Upgrade to Manifest V3 on Chrome

relayjs · Jan 4, 2025 · 2471f2d · 2471f2d
1 parent 234c062
commit 2471f2d
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 42 deletions.
diff --git 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
@@ -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": ["<all_urls>"]
+    }
   ],
   "background": {
-    "scripts": ["build/background.js"],
-    "persistent": false
+    "service_worker": "build/background.js"
   },
-  "permissions": ["file:///*", "http://*/*", "https://*/*", "webNavigation"],
+  "permissions": ["webNavigation", "scripting", "tabs"],
   "content_scripts": [
     {
       "matches": ["<all_urls>"],
-      "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
@@ -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
@@ -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 <head> element is created,
-  // so we add the script to <html> 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
@@ -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
@@ -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',