From 4a77f259d4599c3b3d8a74f7745d24a940416c54 Mon Sep 17 00:00:00 2001 From: giacomocerquone Date: Mon, 21 Jul 2025 00:36:28 +0200 Subject: [PATCH 1/2] feat: branch-out chrome and firefox manifests to get chrome extension back up and running --- package.json | 7 ++- pnpm-lock.yaml | 58 ++++++++++++------- src/extension/background.ts | 4 +- src/extension/chrome_manifest.json | 38 ++++++++++++ .../{manifest.json => firefox_manifest.json} | 13 +++-- src/panel/definitions.d.ts | 1 + webpack/webpack.extension.config.js | 9 ++- 7 files changed, 95 insertions(+), 35 deletions(-) create mode 100644 src/extension/chrome_manifest.json rename src/extension/{manifest.json => firefox_manifest.json} (79%) diff --git a/package.json b/package.json index 062b09cd..8e914701 100644 --- a/package.json +++ b/package.json @@ -18,9 +18,10 @@ ], "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", + "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 && bestzip ../../extension.zip *", "cosmos": "export BUILD_ENV=electron; cosmos", "cosmos:build": "export BUILD_ENV=electron; pnpm run cosmos-export && node scripts/cosmos-add-badge.js", @@ -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_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( From 9cc19b457bdbd1db0a1148b4afeffa04c52f7eee Mon Sep 17 00:00:00 2001 From: giacomocerquone Date: Mon, 21 Jul 2025 00:48:19 +0200 Subject: [PATCH 2/2] fix: adjust bundle script --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8e914701..24d705ea 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "build:electron": "export NODE_ENV=production; export BUILD_ENV=electron; pnpm run webpack:extension && pnpm run webpack:electron", "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 && bestzip ../../extension.zip *", + "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\"",