🐛 Add conditional check for browserAction

leonardoventurini · Jun 20, 2022 · ad27efd · ad27efd
2 parents ddb5614 + ff9ae83
commit ad27efd
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 32 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,9 +1,9 @@
 .DS_Store
 .idea
 node_modules
-extension/chrome
-extension/firefox
+chrome/build
+firefox/build
 chrome.pem
 firefox.pem
-chrome/
-firefox/
+extension/chrome
+extension/firefox
diff --git a/extension/manifest-v2.json b/extension/manifest-v2.json
@@ -14,7 +14,7 @@
   },
   "background": {
     "scripts": [
-      ".dist/background.js"
+      "/dist/background.js"
     ],
     "persistent": false
   },
@@ -24,15 +24,16 @@
         "<all_urls>"
       ],
       "js": [
-        ".dist/content.js"
+        "/dist/content.js"
       ],
       "run_at": "document_start",
       "all_frames": true
     }
   ],
   "permissions": [
     "https://api.github.com/*",
-    "https://www.google-analytics.com/*"
+    "https://www.google-analytics.com/*",
+    "tabs"
   ],
   "content_security_policy": "script-src 'self'; object-src 'self'",
   "web_accessible_resources": [

diff --git a/src/Browser/Background.ts b/src/Browser/Background.ts
@@ -51,7 +51,10 @@ const tabRemovalListener = () => {
   })
 }
 
-browser.browserAction.onClicked.addListener(e => {
+// For cross-browser support
+const action = browser.browserAction || browser.action
+
+action.onClicked.addListener(e => {
   console.debug('action.onClicked', e)
 
   browser.tabs
@@ -113,6 +116,23 @@ const contentListener = () => {
   })
 }
 
+const tabListener = () => {
+  const tabEvent = {
+    'create-tab': request =>
+      browser.tabs
+        .create({
+          url: request.data.url,
+        })
+        .catch(console.error),
+  }
+  chrome.runtime.onMessage.addListener(function (request, sender) {
+    if (request.source !== 'meteor-devtools-evolved') return null
+
+    tabEvent[request.eventType]?.(request)
+  })
+}
+
 panelListener()
 tabRemovalListener()
 contentListener()
+tabListener()
diff --git a/src/Pages/Panel/Navigation.tsx b/src/Pages/Panel/Navigation.tsx
@@ -7,7 +7,7 @@ import { IMenuItem, ITab, TabBar } from '@/Components/TabBar'
 import { Tag } from '@blueprintjs/core'
 import { isNumber } from 'lodash'
 import { useAnalytics } from '@/Utils/Hooks/useAnalytics'
-import browser from 'webextension-polyfill'
+import { openTab } from '@/Utils/BackgroundEvents'
 
 export const Navigation: FunctionComponent = observer(() => {
   const panelStore = usePanelStore()
@@ -64,11 +64,9 @@ export const Navigation: FunctionComponent = observer(() => {
       key: 'community',
       content: '👥 Community',
       handler: () => {
-        browser.tabs
-          .create({
-            url: 'https://join.slack.com/t/meteor-community/shared_invite/zt-a9lwcfb7-~UwR3Ng6whEqRxcP5rORZw',
-          })
-          .catch(console.error)
+        openTab(
+          'https://join.slack.com/t/meteor-community/shared_invite/zt-a9lwcfb7-~UwR3Ng6whEqRxcP5rORZw',
+        )
 
         analytics?.event('navigation', 'click', { label: 'community' })
       },
@@ -105,12 +103,7 @@ export const Navigation: FunctionComponent = observer(() => {
         </>
       ),
       handler: () => {
-        browser.tabs
-          .create({
-            url: repositoryData.html_url.concat('/issues'),
-          })
-          .catch(console.error)
-
+        openTab(repositoryData.html_url.concat('/issues'))
         analytics?.event('navigation', 'click', { label: 'feedback' })
       },
       shine: true,
@@ -130,11 +123,7 @@ export const Navigation: FunctionComponent = observer(() => {
       ),
       shine: true,
       handler: () => {
-        browser.tabs
-          .create({
-            url: repositoryData.html_url.concat('/stargazers'),
-          })
-          .catch(console.error)
+        openTab(repositoryData.html_url.concat('/stargazers'))
 
         analytics?.event('navigation', 'click', { label: 'star' })
       },

diff --git a/src/Pages/Panel/Sponsor/SponsorHero.tsx b/src/Pages/Panel/Sponsor/SponsorHero.tsx
@@ -2,7 +2,7 @@ import React, { FC } from 'react'
 import { StringUtils } from '@/Utils/StringUtils'
 import { AppToaster } from '@/AppToaster'
 import MeteorCloudLogo from '@/Assets/meteor-cloud-logo.png'
-import browser from 'webextension-polyfill'
+import { openTab } from '@/Utils/BackgroundEvents'
 
 import '@/Assets/meteor-shower.jpg'
 
@@ -77,19 +77,15 @@ export const SponsorHero: FC<Props> = () => {
             <button
               className='btn btn-primary'
               onClick={() =>
-                browser.tabs.create({
-                  url: 'https://social.meteor.com/devtools-evolved',
-                })
+                openTab('https://social.meteor.com/devtools-evolved')
               }
             >
               Sign Up
             </button>
 
             <button
               className='btn bg-orange-500 hover:bg-orange-600'
-              onClick={() =>
-                browser.tabs.create({ url: 'mailto:marketing@meteor.com' })
-              }
+              onClick={() => openTab('mailto:marketing@meteor.com')}
             >
               Email Us the Code
             </button>

diff --git a/src/Utils/BackgroundEvents.ts b/src/Utils/BackgroundEvents.ts
@@ -0,0 +1,9 @@
+import browser from 'webextension-polyfill'
+
+export const openTab = (url: string): void => {
+  browser.runtime.sendMessage({
+    source: 'meteor-devtools-evolved',
+    eventType: 'create-tab',
+    data: { url: url },
+  })
+}