chore: firefox manifest v3 support (#232)

Co-authored-by: Andrew Bastin <[email protected]>

.parcelrc

@@ -1,6 +1,11 @@
 {
   "extends": "@parcel/config-default",
   "transformers": {
-    "*.ttf": ["@parcel/transformer-raw"]
-  }
-}
+    "*.ttf": [
+      "@parcel/transformer-raw"
+    ]
+  },
+  "reporters": [
+    "./mergeManifest.js"
+  ]
+}

manifest.chrome.json

@@ -0,0 +1,5 @@
+{
+  "background": {
+    "service_worker": "index.js"
+  }
+}

manifest.json → manifest.common.json

@@ -1,32 +1,19 @@
 {
   "manifest_version": 3,
   "name": "Hoppscotch Browser Extension",
-  "version": "0.26",
+  "version": "0.27",
   "description": "Provides more capabilities for Hoppscotch",
   "icons": {
     "16": "icons/icon-16x16.png",
     "48": "icons/icon-48x48.png",
     "128": "icons/icon-128x128.png"
   },
-  "background": {
-    "service_worker": "index.js"
-  },
   "action": {
     "default_title": "Hoppscotch Extension",
     "default_popup": "popup.html"
   },
   "permissions": ["storage", "tabs", "cookies", "scripting"],
   "host_permissions": ["<all_urls>"],
-  "applications": {
-    "gecko": {
-      "id": "[email protected]"
-    }
-  },
-  "browser_specific_settings": {
-    "gecko": {
-      "id": "[email protected]"
-    }
-  },
   "web_accessible_resources": [
     {
       "resources": ["*.js.map"],

manifest.firefox.json

@@ -0,0 +1,10 @@
+{
+  "background": {
+    "scripts": ["index.js"]
+  },
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "[email protected]"
+    }
+  }
+}

mergeManifest.js

@@ -0,0 +1,50 @@
+const { Reporter } = require("@parcel/plugin")
+const fs = require("fs").promises
+
+module.exports = new Reporter({
+  async report({ event }) {
+    const target = process.env.HOPP_EXTENSION_TARGET
+
+    if (!target) {
+      return
+    }
+
+    if (event.type == "buildSuccess") {
+      const manifestCommon = (
+        await fs.readFile("./manifest.common.json")
+      ).toString()
+
+      let targetManifestFilePath
+
+      if (target == "CHROME") {
+        targetManifestFilePath = "./manifest.chrome.json"
+      } else if (target == "FIREFOX") {
+        targetManifestFilePath = "./manifest.firefox.json"
+      } else {
+        return
+      }
+
+      const targetSpecificManifest = (
+        await fs.readFile(targetManifestFilePath)
+      ).toString()
+
+      const manifestFinal = JSON.stringify(
+        {
+          ...JSON.parse(manifestCommon),
+          ...JSON.parse(targetSpecificManifest),
+        },
+        null,
+        2
+      )
+
+      // make sure the ./dist folder exists
+      await fs.mkdir("./dist").catch(() => {})
+
+      await fs.writeFile("./dist/manifest.json", manifestFinal, {
+        flag: "w",
+      })
+
+      process.stdout.write("💚 Manifest File Written Successfully")
+    }
+  },
+})

package.json

@@ -1,16 +1,18 @@
 {
   "name": "hoppscotch-extension",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "description": "Provides more features to the Hoppscotch webapp (https://hoppscotch.io/)",
   "scripts": {
-    "clean": "rimraf dist",
-    "build": "pnpm exec parcel build src/* --dist-dir dist/ && pnpm exec copyfiles manifest.json dist && pnpm exec copyfiles icons/* dist"
+    "clean": "rimraf dist .parcel-cache",
+    "build:chrome": "HOPP_EXTENSION_TARGET=CHROME parcel build src/* --dist-dir dist/ && copyfiles icons/* dist",
+    "build:firefox": "HOPP_EXTENSION_TARGET=FIREFOX parcel build src/* --dist-dir dist/ && copyfiles icons/* dist"
   },
   "author": "Andrew Bastin",
   "license": "MIT",
   "devDependencies": {
     "@parcel/config-default": "^2.10.0",
     "@parcel/core": "^2.10.0",
+    "@parcel/plugin": "^2.10.0",
     "@parcel/transformer-raw": "^2.10.0",
     "@types/chrome": "^0.0.246",
     "@types/node": "^17.0.23",

src/contentScript.ts

@@ -1,3 +1,16 @@
+const fs = require("fs")
+
+const hookContent = fs.readFileSync(__dirname + "/hookContent.js", {
+  encoding: "utf-8",
+})
+
+const hookContentInvalidOrigin = fs.readFileSync(
+  __dirname + "/hookContentInvalidOrigin.js",
+  {
+    encoding: "utf-8",
+  }
+)
+
 export type HOOK_MESSAGE = {
   type: "execute_hook"
   origin_type: "VALID_ORIGIN" | "UNKNOWN_ORIGIN"
@@ -27,12 +40,23 @@ async function injectHoppExtensionHook() {
 
   let url = new URL(window.location.href)
 
-  chrome.runtime.sendMessage(<HOOK_MESSAGE>{
-    type: "execute_hook",
-    origin_type: originList.includes(url.origin)
-      ? "VALID_ORIGIN"
-      : "UNKNOWN_ORIGIN",
-  })
+  const originType = originList.includes(url.origin)
+    ? "VALID_ORIGIN"
+    : "UNKNOWN_ORIGIN"
+
+  if (process.env.HOPP_EXTENSION_TARGET === "FIREFOX") {
+    const script = document.createElement("script")
+    script.textContent = originList.includes(url.origin)
+      ? hookContent
+      : hookContentInvalidOrigin
+    document.documentElement.appendChild(script)
+    script.parentNode.removeChild(script)
+  } else {
+    chrome.runtime.sendMessage(<HOOK_MESSAGE>{
+      type: "execute_hook",
+      origin_type: originType,
+    })
+  }
 }
 
 window.addEventListener("message", (ev) => {
@@ -74,7 +98,7 @@ window.addEventListener("message", (ev) => {
   }
 })
 
-const VERSION = { major: 0, minor: 26 }
+const VERSION = { major: 0, minor: 27 }
 
 injectHoppExtensionHook()
 

src/hookContent.js

@@ -36,7 +36,7 @@
   }
 
   window.__POSTWOMAN_EXTENSION_HOOK__ = {
-    getVersion: () => ({ major: 0, minor: 26 }),
+    getVersion: () => ({ major: 0, minor: 27 }),
 
     decodeB64ToArrayBuffer: (input, ab) => {
       const keyStr =