From 2471f2dfa8e5b23af3bf613e7d739ae8341e2e9b Mon Sep 17 00:00:00 2001 From: Alessio Symons Date: Fri, 3 Jan 2025 21:28:00 -0500 Subject: [PATCH] Upgrade to Manifest V3 on Chrome --- flow-typed/chrome.js | 10 ++++++++ shells/browser/chrome/manifest.json | 23 +++++++++--------- shells/browser/shared/src/background.js | 23 +++++++++--------- shells/browser/shared/src/injectGlobalHook.js | 24 ++++--------------- .../src/injectedRelayDevToolsDetector.js | 15 ++++++++++++ shells/browser/shared/webpack.config.js | 1 + 6 files changed, 54 insertions(+), 42 deletions(-) create mode 100644 shells/browser/shared/src/injectedRelayDevToolsDetector.js diff --git a/flow-typed/chrome.js b/flow-typed/chrome.js index fd95b7d8..656a5b12 100644 --- a/flow-typed/chrome.js +++ b/flow-typed/chrome.js @@ -56,6 +56,16 @@ declare var chrome: { popup: string, }) => void, }, + action: { + setIcon: (options: { + tabId: number, + path: { [key: string]: string }, + }) => void, + setPopup: (options: { + tabId: number, + popup: string, + }) => void, + }, runtime: { getURL: (path: string) => string, sendMessage: (config: Object) => void, diff --git a/shells/browser/chrome/manifest.json b/shells/browser/chrome/manifest.json index fcf4b466..2053eb29 100644 --- a/shells/browser/chrome/manifest.json +++ b/shells/browser/chrome/manifest.json @@ -1,5 +1,5 @@ { - "manifest_version": 2, + "manifest_version": 3, "name": "Relay Developer Tools", "description": "Adds Relay debugging tools to the Chrome Developer Tools.", "version": "0.9.17", @@ -12,7 +12,7 @@ "48": "icons/enabled48.png", "128": "icons/enabled128.png" }, - "browser_action": { + "action": { "default_icon": { "16": "icons/disabled16.png", "32": "icons/disabled32.png", @@ -22,22 +22,23 @@ "default_popup": "popups/disabled.html" }, "devtools_page": "main.html", - "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'", + "content_security_policy": { + "extension_pages": "script-src 'self'; object-src 'self'" + }, "web_accessible_resources": [ - "main.html", - "panel.html", - "build/backend.js", - "build/renderer.js" + { + "resources": ["main.html", "panel.html", "build/*.js"], + "matches": [""] + } ], "background": { - "scripts": ["build/background.js"], - "persistent": false + "service_worker": "build/background.js" }, - "permissions": ["file:///*", "http://*/*", "https://*/*", "webNavigation"], + "permissions": ["webNavigation", "scripting", "tabs"], "content_scripts": [ { "matches": [""], - "js": ["build/injectGlobalHook.js"], + "js": ["build/injectGlobalHook.js", "build/contentScript.js"], "run_at": "document_start" } ] diff --git a/shells/browser/shared/src/background.js b/shells/browser/shared/src/background.js index 45045e2a..880b1330 100644 --- a/shells/browser/shared/src/background.js +++ b/shells/browser/shared/src/background.js @@ -43,11 +43,10 @@ function isNumeric(str: string): boolean { } function installContentScript(tabId: number) { - chrome.tabs.executeScript( - tabId, - { file: '/build/contentScript.js' }, - function() {} - ); + chrome.scripting.executeScript({ + target: { tabId: tabId }, + files: ['/build/contentScript.js'], + }); } function doublePipe(one: any, two: any) { @@ -70,18 +69,18 @@ function doublePipe(one: any, two: any) { } function setIconAndPopup(relayBuildType: string, tabId: number) { - chrome.browserAction.setIcon({ + chrome.action.setIcon({ tabId: tabId, path: { - '16': `icons/${relayBuildType}16.png`, - '32': `icons/${relayBuildType}32.png`, - '48': `icons/${relayBuildType}48.png`, - '128': `icons/${relayBuildType}128.png`, + '16': chrome.runtime.getURL(`icons/${relayBuildType}16.png`), + '32': chrome.runtime.getURL(`icons/${relayBuildType}32.png`), + '48': chrome.runtime.getURL(`icons/${relayBuildType}48.png`), + '128': chrome.runtime.getURL(`icons/${relayBuildType}128.png`), }, }); - chrome.browserAction.setPopup({ + chrome.action.setPopup({ tabId: tabId, - popup: 'popups/' + relayBuildType + '.html', + popup: chrome.runtime.getURL(`popups/${relayBuildType}.html`), }); } diff --git a/shells/browser/shared/src/injectGlobalHook.js b/shells/browser/shared/src/injectGlobalHook.js index ab529dab..5f0f9fcd 100644 --- a/shells/browser/shared/src/injectGlobalHook.js +++ b/shells/browser/shared/src/injectGlobalHook.js @@ -11,16 +11,12 @@ /* global chrome */ import nullthrows from 'nullthrows'; -import { installHook } from 'src/hook'; -function injectCode(code: string) { +function injectCode() { const script = document.createElement('script'); - script.textContent = code; - - // This script runs before the element is created, - // so we add the script to instead. - nullthrows(document.documentElement).appendChild(script); - nullthrows(script.parentNode).removeChild(script); + script.src = chrome.runtime.getURL('build/injectedRelayDevToolsDetector.js'); + document.documentElement.appendChild(script); + script.remove(); } let lastDetectionResult; @@ -59,14 +55,4 @@ window.addEventListener('pageshow', function(evt) { chrome.runtime.sendMessage(lastDetectionResult); }); -const detectRelay = ` -window.__RELAY_DEVTOOLS_HOOK__.on('environment', function(evt) { - window.postMessage({ - source: 'relay-devtools-detector', - }, '*'); -}); -`; - -// Inject a `__RELAY_DEVTOOLS_HOOK__` global so that Relay can detect that the -// devtools are installed (and skip its suggestion to install the devtools). -injectCode(';(' + installHook.toString() + '(window))' + detectRelay); +injectCode(); diff --git a/shells/browser/shared/src/injectedRelayDevToolsDetector.js b/shells/browser/shared/src/injectedRelayDevToolsDetector.js new file mode 100644 index 00000000..960d1b14 --- /dev/null +++ b/shells/browser/shared/src/injectedRelayDevToolsDetector.js @@ -0,0 +1,15 @@ +import { installHook } from 'src/hook'; + +// Inject a `__RELAY_DEVTOOLS_HOOK__` global so that Relay can detect that the +// devtools are installed (and skip its suggestion to install the devtools). +(function() { + installHook(window); + window.__RELAY_DEVTOOLS_HOOK__.on('environment', function(evt) { + window.postMessage( + { + source: 'relay-devtools-detector', + }, + '*' + ); + }); +})(); diff --git a/shells/browser/shared/webpack.config.js b/shells/browser/shared/webpack.config.js index b84a381c..0f3a9620 100644 --- a/shells/browser/shared/webpack.config.js +++ b/shells/browser/shared/webpack.config.js @@ -39,6 +39,7 @@ module.exports = { main: './src/main.js', panel: './src/panel.js', renderer: './src/renderer.js', + injectedRelayDevToolsDetector: './src/injectedRelayDevToolsDetector.js', }, output: { path: __dirname + '/build',