diff --git a/package.json b/package.json
index 062b09cd..24d705ea 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5b5801db..b4b04db4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,7 +13,7 @@ specifiers:
   '@fortawesome/fontawesome-svg-core': ^6.2.1
   '@fortawesome/free-solid-svg-icons': ^6.2.1
   '@fortawesome/react-fontawesome': ^0.2.0
-  '@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
@@ -125,7 +125,7 @@ devDependencies:
   '@babel/preset-typescript': 7.18.6_@babel+core@7.20.2
   '@changesets/cli': 2.26.0
   '@changesets/get-github-info': 0.5.2
-  '@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
@@ -1909,7 +1909,7 @@ packages:
     dependencies:
       '@jest/types': 29.4.2
       '@types/node': 14.17.4
-      chalk: 4.1.0
+      chalk: 4.1.2
       jest-message-util: 29.4.2
       jest-util: 29.4.2
       slash: 3.0.0
@@ -2044,7 +2044,7 @@ packages:
       '@jest/types': 29.4.2
       '@jridgewell/trace-mapping': 0.3.17
       '@types/node': 14.17.4
-      chalk: 4.1.0
+      chalk: 4.1.2
       collect-v8-coverage: 1.0.1
       exit: 0.1.2
       glob: 7.1.6
@@ -2352,8 +2352,8 @@ packages:
       '@types/node': 14.17.4
     dev: true
 
-  /@types/chrome/0.0.122:
-    resolution: {integrity: sha512-xHmT1AlBwKAVpQmv+/5gUsB1FXLUiizIZI6bIM52DJDtEhv97FkryHkohjw2HZqAGLOxuJ3kae7YfgWIZ+hMrg==}
+  /@types/chrome/0.1.1:
+    resolution: {integrity: sha512-MLtFW++/n+OPQIaf5hA6pmURd3Zn+OxuvASyf2mYh8B8pHDpbhHjwlVHMw3H/aJC9Z7Z3itO0AFaZeegrGk0yA==}
     dependencies:
       '@types/filesystem': 0.0.29
       '@types/har-format': 1.2.4
@@ -4111,7 +4111,7 @@ packages:
       minipass-pipeline: 1.2.3
       mkdirp: 1.0.4
       p-map: 4.0.0
-      promise-inflight: 1.0.1_bluebird@3.7.2
+      promise-inflight: 1.0.1
       rimraf: 3.0.2
       ssri: 8.0.0
       tar: 6.1.6
@@ -4246,7 +4246,6 @@ packages:
     dependencies:
       ansi-styles: 4.2.1
       supports-color: 7.1.0
-    dev: true
 
   /char-regex/1.0.2:
     resolution: {integrity: sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==}
@@ -6685,7 +6684,7 @@ packages:
     resolution: {integrity: sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==}
     engines: {node: '>= 4.0'}
     os: [darwin]
-    deprecated: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
+    deprecated: Upgrade to fsevents v2 to mitigate potential security issues
     requiresBuild: true
     dependencies:
       bindings: 1.5.0
@@ -7527,6 +7526,7 @@ packages:
   /is-accessor-descriptor/1.0.0:
     resolution: {integrity: sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==}
     engines: {node: '>=0.10.0'}
+    deprecated: Please upgrade to v1.0.1
     requiresBuild: true
     dependencies:
       kind-of: 6.0.3
@@ -7608,6 +7608,7 @@ packages:
   /is-data-descriptor/1.0.0:
     resolution: {integrity: sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==}
     engines: {node: '>=0.10.0'}
+    deprecated: Please upgrade to v1.0.1
     requiresBuild: true
     dependencies:
       kind-of: 6.0.3
@@ -8047,7 +8048,7 @@ packages:
       '@jest/test-sequencer': 29.4.2
       '@jest/types': 29.4.2
       babel-jest: 29.4.2_@babel+core@7.20.2
-      chalk: 4.1.0
+      chalk: 4.1.2
       ci-info: 3.8.0
       deepmerge: 4.2.2
       glob: 7.1.6
@@ -8086,7 +8087,7 @@ packages:
       '@jest/types': 29.4.2
       '@types/node': 14.17.4
       babel-jest: 29.4.2_@babel+core@7.20.2
-      chalk: 4.1.0
+      chalk: 4.1.2
       ci-info: 3.8.0
       deepmerge: 4.2.2
       glob: 7.1.6
@@ -8112,7 +8113,7 @@ packages:
     resolution: {integrity: sha512-EK8DSajVtnjx9sa1BkjZq3mqChm2Cd8rIzdXkQMA8e0wuXq53ypz6s5o5V8HRZkoEt2ywJ3eeNWFKWeYr8HK4g==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
-      chalk: 4.1.0
+      chalk: 4.1.2
       diff-sequences: 29.4.2
       jest-get-type: 29.4.2
       pretty-format: 29.4.2
@@ -8219,7 +8220,7 @@ packages:
     resolution: {integrity: sha512-EZaAQy2je6Uqkrm6frnxBIdaWtSYFoR8SVb2sNLAtldswlR/29JAgx+hy67llT3+hXBaLB0zAm5UfeqerioZyg==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
-      chalk: 4.1.0
+      chalk: 4.1.2
       jest-diff: 29.4.2
       jest-get-type: 29.4.2
       pretty-format: 29.4.2
@@ -8232,7 +8233,7 @@ packages:
       '@babel/code-frame': 7.18.6
       '@jest/types': 26.3.0
       '@types/stack-utils': 1.0.1
-      chalk: 4.1.0
+      chalk: 4.1.2
       graceful-fs: 4.2.10
       micromatch: 4.0.5
       slash: 3.0.0
@@ -8246,7 +8247,7 @@ packages:
       '@babel/code-frame': 7.18.6
       '@jest/types': 29.4.2
       '@types/stack-utils': 2.0.1
-      chalk: 4.1.0
+      chalk: 4.1.2
       graceful-fs: 4.2.10
       micromatch: 4.0.5
       pretty-format: 29.4.2
@@ -8300,7 +8301,7 @@ packages:
     resolution: {integrity: sha512-RtKWW0mbR3I4UdkOrW7552IFGLYQ5AF9YrzD0FnIOkDu0rAMlA5/Y1+r7lhCAP4nXSBTaE7ueeqj6IOwZpgoqw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
-      chalk: 4.1.0
+      chalk: 4.1.2
       graceful-fs: 4.2.10
       jest-haste-map: 29.4.2
       jest-pnp-resolver: 1.2.2_jest-resolve@29.4.2
@@ -8321,7 +8322,7 @@ packages:
       '@jest/transform': 29.4.2
       '@jest/types': 29.4.2
       '@types/node': 14.17.4
-      chalk: 4.1.0
+      chalk: 4.1.2
       emittery: 0.13.1
       graceful-fs: 4.2.10
       jest-docblock: 29.4.2
@@ -8352,7 +8353,7 @@ packages:
       '@jest/transform': 29.4.2
       '@jest/types': 29.4.2
       '@types/node': 14.17.4
-      chalk: 4.1.0
+      chalk: 4.1.2
       cjs-module-lexer: 1.2.2
       collect-v8-coverage: 1.0.1
       glob: 7.1.6
@@ -8387,7 +8388,7 @@ packages:
       '@types/babel__traverse': 7.0.12
       '@types/prettier': 2.7.2
       babel-preset-current-node-syntax: 1.0.1_@babel+core@7.20.2
-      chalk: 4.1.0
+      chalk: 4.1.2
       expect: 29.4.2
       graceful-fs: 4.2.10
       jest-diff: 29.4.2
@@ -8419,7 +8420,7 @@ packages:
     dependencies:
       '@jest/types': 26.3.0
       '@types/node': 14.17.4
-      chalk: 4.1.0
+      chalk: 4.1.2
       graceful-fs: 4.2.10
       is-ci: 2.0.0
       micromatch: 4.0.5
@@ -8442,7 +8443,7 @@ packages:
     dependencies:
       '@jest/types': 29.4.2
       camelcase: 6.3.0
-      chalk: 4.1.0
+      chalk: 4.1.2
       jest-get-type: 29.4.2
       leven: 3.1.0
       pretty-format: 29.4.2
@@ -8456,7 +8457,7 @@ packages:
       '@jest/types': 29.4.2
       '@types/node': 14.17.4
       ansi-escapes: 4.3.1
-      chalk: 4.1.0
+      chalk: 4.1.2
       emittery: 0.13.1
       jest-util: 29.4.2
       string-length: 4.0.1
@@ -10515,6 +10516,15 @@ packages:
     resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
     engines: {node: '>=0.4.0'}
 
+  /promise-inflight/1.0.1:
+    resolution: {integrity: sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==}
+    peerDependencies:
+      bluebird: '*'
+    peerDependenciesMeta:
+      bluebird:
+        optional: true
+    dev: true
+
   /promise-inflight/1.0.1_bluebird@3.7.2:
     resolution: {integrity: sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==}
     peerDependencies:
@@ -10671,6 +10681,10 @@ packages:
   /q/1.5.1:
     resolution: {integrity: sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==}
     engines: {node: '>=0.6.0', teleport: '>=0.2.0'}
+    deprecated: |-
+      You or someone you depend on is using Q, the JavaScript Promise library that gave JavaScript developers strong feelings about promises. They can almost certainly migrate to the native JavaScript promise now. Thank you literally everyone for joining me in this bet against the odds. Be excellent to each other.
+
+      (For a CapTP with native promises, see @endo/eventual-send and @endo/captp)
     dev: true
 
   /qs/6.5.2:
diff --git a/src/extension/background.ts b/src/extension/background.ts
index 16cad149..6d270b53 100644
--- a/src/extension/background.ts
+++ b/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",
diff --git a/src/extension/chrome_manifest.json b/src/extension/chrome_manifest.json
new file mode 100644
index 00000000..b500a904
--- /dev/null
+++ b/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'"
+  }
+}
diff --git a/src/extension/manifest.json b/src/extension/firefox_manifest.json
similarity index 79%
rename from src/extension/manifest.json
rename to src/extension/firefox_manifest.json
index f70a3e55..c87a6620 100644
--- a/src/extension/manifest.json
+++ b/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}",
diff --git a/src/panel/definitions.d.ts b/src/panel/definitions.d.ts
index 41ab1060..dfee6c4c 100644
--- a/src/panel/definitions.d.ts
+++ b/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;
   }
 }
diff --git a/webpack/webpack.extension.config.js b/webpack/webpack.extension.config.js
index 84d6a61e..20da9e17 100644
--- a/webpack/webpack.extension.config.js
+++ b/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(