fix: chrome support + manifest browser based split

package.json

@@ -18,10 +18,11 @@
   ],
   "scripts": {
     "prepare": "node ./scripts/postinstall.js",
-    "build": "pnpm run build:extension && pnpm run build:electron",
+    "build": "pnpm run build:extension:chrome && pnpm run build:extension:firefox && pnpm run build:electron",
     "build:electron": "export NODE_ENV=production; export BUILD_ENV=electron; pnpm run webpack:extension && pnpm run webpack:electron",
-    "build:extension": "export NODE_ENV=production; export BUILD_ENV=extension; pnpm run webpack:extension",
-    "bundle": "cd dist/extension && bestzip ../../extension.zip *",
+    "build:extension:chrome": "export NODE_ENV=production; export BUILD_ENV=extension; export TARGET_BROWSER=chrome; pnpm run webpack:extension",
+    "build:extension:firefox": "export NODE_ENV=production; export BUILD_ENV=extension; export TARGET_BROWSER=firefox; pnpm run webpack:extension",
+    "bundle": "cd dist/extension/firefox && bestzip ../../../firefox-extension.zip * && cd ../chrome && bestzip ../../../chrome-extension.zip *",
     "cosmos": "export BUILD_ENV=electron; cosmos",
     "cosmos:build": "export BUILD_ENV=electron; pnpm run cosmos-export && node scripts/cosmos-add-badge.js",
     "dev": "concurrently \"npm:dev:extension\" \"npm:dev:electron\"",
@@ -86,7 +87,7 @@
     "@babel/preset-typescript": "^7.18.6",
     "@changesets/cli": "^2.25.2",
     "@changesets/get-github-info": "^0.5.1",
-    "@types/chrome": "0.0.122",
+    "@types/chrome": "0.1.1",
     "@types/codemirror": "0.0.97",
     "@types/d3-scale": "^2.2.0",
     "@types/enzyme": "^3.10.5",

src/extension/background.ts

@@ -43,9 +43,9 @@ const handleContentScriptConnection = (port: chrome.runtime.Port) => {
     const tabId = port.sender.tab.id;
 
     addToTarget({ tabId, port, source: "exchange" });
-    chrome.pageAction.setIcon({ tabId, path: "/assets/icon-32.png" });
+    chrome.action.setIcon({ tabId, path: "/assets/icon-32.png" });
     port.onDisconnect.addListener(() => {
-      chrome.pageAction.setIcon(
+      chrome.action.setIcon(
         {
           tabId,
           path: "/assets/icon-disabled-32.png",

src/extension/chrome_manifest.json

@@ -0,0 +1,38 @@
+{
+  "manifest_version": 3,
+  "name": "Urql Devtools",
+  "description": "The official Urql chrome extension",
+  "icons": {
+    "16": "/assets/icon-16.png",
+    "32": "/assets/icon-32.png",
+    "48": "/assets/icon-48.png",
+    "64": "/assets/icon-64.png",
+    "128": "/assets/icon-128.png",
+    "256": "/assets/icon-256.png",
+    "512": "/assets/icon-512.png"
+  },
+  "background": {
+    "service_worker": "background.js"
+  },
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "all_frames": true,
+      "js": ["content_script.js"],
+      "run_at": "document_start"
+    }
+  ],
+  "action": {
+    "default_title": "Urql Devtools",
+    "default_icon": {
+      "32": "/assets/icon-disabled-32.png",
+      "64": "/assets/icon-disabled-64.png",
+      "128": "/assets/icon-disabled-128.png"
+    }
+  },
+  "devtools_page": "devtools.html",
+  "host_permissions": ["file:///*", "http://*/*", "https://*/*"],
+  "content_security_policy": {
+    "extension_pages": "script-src 'self'; object-src 'self'"
+  }
+}

src/extension/manifest.json → src/extension/firefox_manifest.json

@@ -1,5 +1,5 @@
 {
-  "manifest_version": 2,
+  "manifest_version": 3,
   "name": "Urql Devtools",
   "description": "The official Urql chrome extension",
   "icons": {
@@ -12,8 +12,7 @@
     "512": "/assets/icon-512.png"
   },
   "background": {
-    "scripts": ["background.js"],
-    "persistent": false
+    "scripts": ["background.js"]
   },
   "content_scripts": [
     {
@@ -23,7 +22,7 @@
       "run_at": "document_start"
     }
   ],
-  "page_action": {
+  "action": {
     "default_title": "Urql Devtools",
     "default_icon": {
       "32": "/assets/icon-disabled-32.png",
@@ -32,8 +31,10 @@
     }
   },
   "devtools_page": "devtools.html",
-  "permissions": ["file:///*", "http://*/*", "https://*/*"],
-  "content_security_policy": "script-src 'self'; object-src 'self'",
+  "host_permissions": ["file:///*", "http://*/*", "https://*/*"],
+  "content_security_policy": {
+    "extension_pages": "script-src 'self'; object-src 'self'"
+  },
   "application": {
     "gecko": {
       "id": "{c11f3a69-f159-4708-b044-853066c2d2fe}",

src/panel/definitions.d.ts

@@ -7,6 +7,7 @@ declare namespace NodeJS {
   export interface ProcessEnv {
     NODE_ENV: "production" | "development" | "testing";
     BUILD_ENV: "extension" | "electron";
+    TARGET_BROWSER: "chrome" | "firefox";
     PKG_VERSION: string;
   }
 }

webpack/webpack.extension.config.js

@@ -8,6 +8,7 @@ const TerserPlugin = require("terser-webpack-plugin");
 const root = `${__dirname}/..`;
 
 const isExtension = process.env.BUILD_ENV !== "electron";
+const targetBrowser = process.env.TARGET_BROWSER || "chrome";
 
 const inOutConfig = isExtension
   ? {
@@ -19,7 +20,7 @@ const inOutConfig = isExtension
         panel: `${root}/src/panel/panel.tsx`,
       },
       output: {
-        path: `${root}/dist/extension`,
+        path: `${root}/dist/extension/${targetBrowser}`,
         devtoolModuleFilenameTemplate: (info) =>
           `urql-devtools:///${info.resourcePath}`,
       },
@@ -96,7 +97,11 @@ module.exports = {
       patterns: [
         { from: "src/assets/", to: "assets/" },
         isExtension && {
-          from: "src/extension/manifest.json",
+          from:
+            targetBrowser === "chrome"
+              ? "src/extension/chrome_manifest.json"
+              : "src/extension/firefox_manifest.json",
+          to: "manifest.json",
           transform: function (content) {
             return Buffer.from(
               JSON.stringify(