add support for firefox (#1)

* add support for firefox

* fix service-worker key, prettify

* add debugging section to contributing

* update ensure-manifest

---------

Co-authored-by: John Alden <[email protected]>

.gitignore

@@ -5,3 +5,4 @@ node_modules
 tsconfig*.tsbuildinfo
 .DS_Store
 *.zip
+manifest.json

CONTRIBUTING.md

@@ -76,6 +76,50 @@ This project uses [ESLint](https://eslint.org/) for code linting. You can run ES
 
 To lint the code as you make changes you can install the [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) extension.
 
+### Debugging
+
+### Firefox
+
+To run and debug the project for Firefox, execute the following from a terminal:
+
+```
+yarn build:firefox
+```
+
+or
+
+```
+yarn watch:firefox
+```
+
+to run the addon in the browser, run
+
+```
+`web-ext run --browser-console`
+```
+
+> web-ext is a tool for developing WebExtensions for Firefox and can be installed with `npm install --global web-ext`
+
+or
+
+add any file this folder to the [Firefox Add-on Debugger](about:debugging#/runtime/this-firefox)
+
+### Chrome/Edge
+
+To run and debug the project for Chrome or Edge, execute the following from a terminal:
+
+```
+yarn build:chromium
+```
+
+or
+
+```
+yarn watch:chromium
+```
+
+To run the extension in the browser, first add your extension to the browser in `chrome://extensions/` or `edge://extensions/`. Then, turn on developer mode. Lastly, load this folder as an unpacked extension.
+
 ### Bundling
 
 To generate a production bundle (without packaging) run the following from a terminal:

package.json

@@ -17,16 +17,25 @@
 	},
 	"main": "dist/background.js",
 	"scripts": {
-		"build": "webpack --mode development",
+		"build": "yarn run ensure-manifest && webpack --mode development",
+		"build:chromium": "yarn run set-manifest:chromium:force && yarn build",
+		"build:firefox": "yarn run set-manifest:firefox:force && yarn build",
 		"bundle": "yarn run clean && webpack --mode production",
 		"clean": "npx rimraf dist && yarn run clean:package",
 		"clean:package": "cross-var rimraf \"%npm_package_name%*.zip\"",
 		"lint": "eslint \"src/**/*.ts?(x)\" --fix",
+		"ensure-manifest": "node -e \"require('./scripts/makeManifest').ensureManifest()\"",
+		"set-manifest:firefox": "node -e \"require('./scripts/makeManifest').makeFirefoxManifest()\"",
+		"set-manifest:firefox:force": "node -e \"require('./scripts/makeManifest').makeFirefoxManifest(true)\"",
+		"set-manifest:chromium": "node -e \"require('./scripts/makeManifest').makeChromiumManifest()\"",
+		"set-manifest:chromium:force": "node -e \"require('./scripts/makeManifest').makeChromiumManifest(true)\"",
 		"package": "yarn bundle && cross-var npx bestzip \"%npm_package_name%-%npm_package_version%.zip\" dist icons manifest.json LICENSE",
-		"package-pre": "yarn run patch-pre && yarn run package",
+		"package-pre": "yarn run patch-pre && yarn run ensure-manifest && yarn run package",
 		"patch-pre": "node ./scripts/applyPreReleasePatch.js",
 		"pretty": "prettier --config .prettierrc --loglevel warn --write .",
-		"watch": "webpack --watch --mode development"
+		"watch": "yarn run ensure-manifest && webpack --watch --mode development",
+		"watch:chromium": "yarn run set-manifest:chromium:force && yarn watch",
+		"watch:firefox": "yarn run set-manifest:firefox:force && yarn watch"
 	},
 	"dependencies": {
 		"webextension-polyfill": "0.10.0"

scripts/makeManifest.js

@@ -0,0 +1,71 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const fs = require('fs');
+const path = require('path');
+
+const root = path.dirname(__filename)
+
+const manifestJsonPath = path.join('manifest.json');
+const packageJson = require('../package.json')
+
+const manifestBase = {
+  "manifest_version": 3,
+  "name": packageJson["name"],
+  "description": packageJson["description"],
+  "version": packageJson["version"],
+  "icons": {
+    "16": "icons/logo-16.png",
+    "32": "icons/logo-32.png",
+    "48": "icons/logo-48.png",
+    "128": "icons/logo-128.png"
+  },
+  "permissions": [
+    "scripting",
+    "webNavigation"
+  ],
+  "host_permissions": [
+    "*://*.github.com/*",
+    "*://*.gitlab.com/*",
+    "*://*.bitbucket.org/*"
+  ]
+};
+
+const getMakeManifest = (isFirefox) => (force = false) => {
+  const firefoxKeys = {
+    background: {
+      scripts: ["dist/background.js"]
+    }
+  };
+
+  const chromiumKeys = {
+    background: {
+      "service_worker": "dist/service-worker.js"
+    }
+  };
+
+  const manifest = {
+    ...manifestBase,
+    ...(isFirefox ? firefoxKeys : chromiumKeys)
+  };
+
+  if (!fs.existsSync(manifestJsonPath) || force) {
+    console.log('building', manifestJsonPath);
+    fs.writeFileSync(manifestJsonPath, JSON.stringify(manifest, null, 2) + '\n');
+  }
+}
+
+const getEnsureManifest = (makeFireFoxManifest, makeChromiumManifest) => () => {
+  if (!fs.existsSync(manifestJsonPath)) {
+    console.log(`manifest.json does not exist, creating ${process.env.FIREFOX ? 'firefox' : 'chromium'} manifest`);
+    if (process.env.FIREFOX) {
+      makeFireFoxManifest();
+    } else {
+      makeChromiumManifest();
+    }
+  }
+}
+
+module.exports = {
+  makeChromiumManifest: getMakeManifest(false),
+  makeFirefoxManifest: getMakeManifest(true),
+  ensureManifest: getEnsureManifest(getMakeManifest(false), getMakeManifest(true))
+}