🔥 Add manifest v2 for firefox

leonardoventurini · Jun 18, 2022 · a31114c · a31114c
1 parent 7bd8f37
commit a31114c
Show file tree

Hide file tree

Showing 24 changed files with 168 additions and 24 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,2 @@
+chrome/builds
+firefox/builds
diff --git a/.gitignore b/.gitignore
@@ -2,4 +2,5 @@
 .idea
 node_modules
 chrome/build
+firefox/build
 chrome.pem
diff --git a/firefox/devtools-panel.html b/firefox/devtools-panel.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html data-theme="corporate">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+    />
+    <title>Panel</title>
+  </head>
+  <body>
+    <div id="panel" class="bp3-dark"></div>
+    <script src="/build/bundle.js"></script>
+  </body>
+</html>
diff --git a/firefox/devtools.html b/firefox/devtools.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+    />
+    <title>Developer Tools</title>
+  </head>
+  <body>
+    <!-- The sole purpose of this file is to load the JavaScript file as Chrome does not render it -->
+
+    <script src="/build/devtools.js"></script>
+  </body>
+</html>
diff --git a/firefox/icons/meteor-128.png b/firefox/icons/meteor-128.png
diff --git a/firefox/icons/meteor-16.png b/firefox/icons/meteor-16.png
diff --git a/firefox/icons/meteor-32.png b/firefox/icons/meteor-32.png
diff --git a/firefox/icons/meteor-48.png b/firefox/icons/meteor-48.png
diff --git a/firefox/icons/meteor-64.png b/firefox/icons/meteor-64.png
diff --git a/firefox/manifest.json b/firefox/manifest.json
@@ -0,0 +1,43 @@
+{
+  "manifest_version": 2,
+  "name": "Meteor DevTools Evolved",
+  "description": "The Meteor framework development tool belt, evolved.",
+  "version": "1.6",
+  "author": "Leonardo Venturini",
+  "icons": {
+    "16": "icons/meteor-16.png",
+    "48": "icons/meteor-48.png",
+    "128": "icons/meteor-128.png"
+  },
+  "browser_action": {
+    "default_title": "Meteor"
+  },
+  "background": {
+    "scripts": [
+      "build/browser-polyfill.js",
+      "build/background.js"
+    ],
+    "persistent": false
+  },
+  "content_scripts": [
+    {
+      "matches": [
+        "<all_urls>"
+      ],
+      "js": [
+        "build/content.js"
+      ],
+      "run_at": "document_start",
+      "all_frames": true
+    }
+  ],
+  "permissions": [
+    "https://api.github.com/*",
+    "https://www.google-analytics.com/*"
+  ],
+  "content_security_policy": "script-src 'self'; object-src 'self'",
+  "web_accessible_resources": [
+    "/build/inject.js"
+  ],
+  "devtools_page": "devtools.html"
+}
diff --git a/firefox/options.html b/firefox/options.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+    />
+    <title>Options</title>
+  </head>
+  <body>
+    <div id="options" class="bp3-dark"></div>
+    <script src="/build/bundle.js"></script>
+  </body>
+</html>
diff --git a/firefox/popup.html b/firefox/popup.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+    />
+    <title>Popup</title>
+  </head>
+  <body>
+    <div id="popup" class="bp3-dark"></div>
+    <script src="/build/bundle.js"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -10,7 +10,9 @@
   ],
   "scripts": {
     "devapp": "cd devapp && npm run start",
-    "build": "webpack --config webpack/chrome.prod.js"
+    "build:chrome": "webpack --config webpack/chrome.prod.js",
+    "build:firefox": "webpack --config webpack/firefox.prod.js",
+    "lint": "eslint ."
   },
   "author": "Leonardo Venturini",
   "license": "MIT",
@@ -76,5 +78,9 @@
   "volta": {
     "node": "14.19.3",
     "yarn": "1.22.18"
+  },
+  "devDependencies": {
+    "@types/webextension-polyfill": "^0.9.0",
+    "webextension-polyfill": "^0.9.0"
   }
 }
diff --git a/src/Bridge.ts b/src/Bridge.ts
@@ -3,6 +3,7 @@ import prettyBytes from 'pretty-bytes'
 import { PanelStore } from '@/Stores/PanelStore'
 import { DateTime } from 'luxon'
 import { StringUtils } from '@/Utils/StringUtils'
+import browser from 'webextension-polyfill'
 
 export const syncSubscriptions = () =>
   Bridge.sendContentMessage({
@@ -43,21 +44,21 @@ export const Bridge = new (class {
       source: 'meteor-devtools-evolved',
     }
 
-    if (chrome && chrome.devtools) {
-      chrome.devtools.inspectedWindow.eval(
+    if (browser && browser.devtools) {
+      browser.devtools.inspectedWindow.eval(
         `__meteor_devtools_evolved_receiveMessage(${JSON.stringify(payload)})`,
       )
     }
   }
 
   chrome() {
-    const backgroundConnection = chrome.runtime.connect({
+    const backgroundConnection = browser.runtime.connect({
       name: 'panel',
     })
 
     backgroundConnection.postMessage({
       name: 'init',
-      tabId: chrome.devtools.inspectedWindow.tabId,
+      tabId: browser.devtools.inspectedWindow.tabId,
     })
 
     backgroundConnection.onMessage.addListener((message: Message<any>) =>
@@ -68,7 +69,7 @@ export const Bridge = new (class {
   init() {
     console.log('Setting up bridge...')
 
-    if (!chrome || !chrome.devtools) return
+    if (!browser || !browser.devtools) return
 
     this.chrome()
 

diff --git a/src/Browser/Background.ts b/src/Browser/Background.ts
@@ -1,6 +1,7 @@
 import { defer } from 'lodash'
+import browser from 'webextension-polyfill'
 
-type Connection = Map<number, chrome.runtime.Port>
+type Connection = Map<number, any>
 
 declare global {
   interface Window {
@@ -15,7 +16,7 @@ const connections: Connection = new Map()
 self.connections = connections
 
 const panelListener = () => {
-  chrome.runtime.onConnect.addListener(port => {
+  browser.runtime.onConnect.addListener(port => {
     console.debug('runtime.onConnect', port)
 
     port.onMessage.addListener(request => {
@@ -40,7 +41,7 @@ const panelListener = () => {
 }
 
 const tabRemovalListener = () => {
-  chrome.tabs.onRemoved.addListener(tabId => {
+  browser.tabs.onRemoved.addListener(tabId => {
     console.debug('tabs.onRemoved', tabId)
 
     if (connections.has(tabId)) {
@@ -50,10 +51,10 @@ const tabRemovalListener = () => {
   })
 }
 
-chrome.action.onClicked.addListener(e => {
+browser.browserAction.onClicked.addListener(e => {
   console.debug('action.onClicked', e)
 
-  chrome.tabs
+  browser.tabs
     .create({
       url: 'http://cloud.meteor.com/?utm_source=chrome_extension&utm_medium=extension&utm_campaign=meteor_devtools_evolved',
     })
@@ -72,7 +73,8 @@ const handleConsole = (
 }
 
 const contentListener = () => {
-  chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+  // @ts-ignore
+  browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
     defer(() => {
       const tabId = sender?.tab?.id
 

diff --git a/src/Browser/Content.ts b/src/Browser/Content.ts
@@ -1,16 +1,18 @@
+import browser from 'webextension-polyfill'
+
 const messageHandler = (event: MessageEvent) => {
   // Only accept messages from same frame
   if (event.source !== window) return
 
   // Only accept messages that we know are ours
   if (event.data.source !== 'meteor-devtools-evolved') return
 
-  chrome.runtime.sendMessage(event.data)
+  browser.runtime.sendMessage(event.data)
 }
 
 window.addEventListener('message', messageHandler)
 
-const url = chrome.runtime.getURL('/build/inject.js')
+const url = browser.runtime.getURL('/build/inject.js')
 const script = document.createElement('script')
 script.setAttribute('type', 'text/javascript')
 script.setAttribute('src', url)

diff --git a/src/Browser/DevTools.ts b/src/Browser/DevTools.ts
@@ -1 +1,3 @@
-chrome.devtools.panels.create('☄️ Meteor', '', 'devtools-panel.html')
+import browser from 'webextension-polyfill'
+
+browser.devtools.panels.create('☄️ Meteor', '', 'devtools-panel.html')
diff --git a/src/Pages/Panel/Navigation.tsx b/src/Pages/Panel/Navigation.tsx
@@ -7,6 +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'
 
 export const Navigation: FunctionComponent = observer(() => {
   const panelStore = usePanelStore()
@@ -63,7 +64,7 @@ export const Navigation: FunctionComponent = observer(() => {
       key: 'community',
       content: '👥 Community',
       handler: () => {
-        chrome.tabs
+        browser.tabs
           .create({
             url: 'https://join.slack.com/t/meteor-community/shared_invite/zt-a9lwcfb7-~UwR3Ng6whEqRxcP5rORZw',
           })
@@ -104,7 +105,7 @@ export const Navigation: FunctionComponent = observer(() => {
         </>
       ),
       handler: () => {
-        chrome.tabs
+        browser.tabs
           .create({
             url: repositoryData.html_url.concat('/issues'),
           })
@@ -129,7 +130,7 @@ export const Navigation: FunctionComponent = observer(() => {
       ),
       shine: true,
       handler: () => {
-        chrome.tabs
+        browser.tabs
           .create({
             url: repositoryData.html_url.concat('/stargazers'),
           })

diff --git a/src/Pages/Panel/Sponsor/SponsorHero.tsx b/src/Pages/Panel/Sponsor/SponsorHero.tsx
@@ -2,6 +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 '@/Assets/meteor-shower.jpg'
 
@@ -76,7 +77,7 @@ export const SponsorHero: FC<Props> = () => {
             <button
               className='btn btn-primary'
               onClick={() =>
-                chrome.tabs.create({
+                browser.tabs.create({
                   url: 'https://social.meteor.com/devtools-evolved',
                 })
               }
@@ -87,7 +88,7 @@ export const SponsorHero: FC<Props> = () => {
             <button
               className='btn bg-orange-500 hover:bg-orange-600'
               onClick={() =>
-                chrome.tabs.create({ url: 'mailto:marketing@meteor.com' })
+                browser.tabs.create({ url: 'mailto:marketing@meteor.com' })
               }
             >
               Email Us the Code

diff --git a/webpack/base.js b/webpack/base.js
@@ -9,7 +9,7 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 
 const aliases = getTypeScriptAliases()
 
-module.exports = override =>
+module.exports = (browser = 'chrome', override) =>
   merge(
     {
       entry: {
@@ -22,7 +22,7 @@ module.exports = override =>
 
       output: {
         chunkFilename: '[name].js',
-        path: path.join(__dirname, '../chrome/build/'),
+        path: path.join(__dirname, `../${browser}/build/`),
         publicPath: '/build/',
       },
 

diff --git a/webpack/chrome.dev.js b/webpack/chrome.dev.js
@@ -1,6 +1,6 @@
 const base = require('./base')
 
-module.exports = base({
+module.exports = base('chrome', {
   watch: true,
   mode: 'development',
   devtool: 'inline-source-map',

diff --git a/webpack/chrome.prod.js b/webpack/chrome.prod.js
@@ -2,7 +2,7 @@ const base = require('./base')
 
 const TerserPlugin = require('terser-webpack-plugin')
 
-module.exports = base({
+module.exports = base('chrome', {
   mode: 'production',
 
   optimization: {

diff --git a/webpack/firefox.dev.js b/webpack/firefox.dev.js
@@ -0,0 +1,10 @@
+const base = require('./base')
+
+module.exports = base('firefox', {
+  watch: true,
+  mode: 'development',
+  devtool: 'inline-source-map',
+  stats: {
+    modules: false,
+  },
+})
diff --git a/webpack/firefox.prod.js b/webpack/firefox.prod.js
@@ -0,0 +1,12 @@
+const base = require('./base')
+
+const TerserPlugin = require('terser-webpack-plugin')
+
+module.exports = base('firefox', {
+  mode: 'production',
+
+  optimization: {
+    minimize: true,
+    minimizer: [new TerserPlugin()],
+  },
+})