Skip to content

Commit c239efd

Browse files
AsymonsAsymons
committed
Upgrade to Manifest V3 on Chrome
1 parent 234c062 commit c239efd

File tree

6 files changed

+55
-42
lines changed

6 files changed

+55
-42
lines changed

‎flow-typed/chrome.js

+10
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,16 @@ declare var chrome: {
5656
popup: string,
5757
}) => void,
5858
},
59+
action: {
60+
setIcon: (options: {
61+
tabId: number,
62+
path: { [key: string]: string },
63+
}) => void,
64+
setPopup: (options: {
65+
tabId: number,
66+
popup: string,
67+
}) => void,
68+
},
5969
runtime: {
6070
getURL: (path: string) => string,
6171
sendMessage: (config: Object) => void,

‎shells/browser/chrome/manifest.json

+12-11
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"manifest_version": 2,
2+
"manifest_version": 3,
33
"name": "Relay Developer Tools",
44
"description": "Adds Relay debugging tools to the Chrome Developer Tools.",
55
"version": "0.9.17",
@@ -12,7 +12,7 @@
1212
"48": "icons/enabled48.png",
1313
"128": "icons/enabled128.png"
1414
},
15-
"browser_action": {
15+
"action": {
1616
"default_icon": {
1717
"16": "icons/disabled16.png",
1818
"32": "icons/disabled32.png",
@@ -22,22 +22,23 @@
2222
"default_popup": "popups/disabled.html"
2323
},
2424
"devtools_page": "main.html",
25-
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
25+
"content_security_policy": {
26+
"extension_pages": "script-src 'self'; object-src 'self'"
27+
},
2628
"web_accessible_resources": [
27-
"main.html",
28-
"panel.html",
29-
"build/backend.js",
30-
"build/renderer.js"
29+
{
30+
"resources": ["main.html", "panel.html", "build/*.js"],
31+
"matches": ["<all_urls>"]
32+
}
3133
],
3234
"background": {
33-
"scripts": ["build/background.js"],
34-
"persistent": false
35+
"service_worker": "build/background.js"
3536
},
36-
"permissions": ["file:///*", "http://*/*", "https://*/*", "webNavigation"],
37+
"permissions": ["webNavigation", "scripting", "tabs"],
3738
"content_scripts": [
3839
{
3940
"matches": ["<all_urls>"],
40-
"js": ["build/injectGlobalHook.js"],
41+
"js": ["build/injectGlobalHook.js", "build/contentScript.js"],
4142
"run_at": "document_start"
4243
}
4344
]

‎shells/browser/shared/src/background.js

+12-12
Original file line numberDiff line numberDiff line change
@@ -43,11 +43,10 @@ function isNumeric(str: string): boolean {
4343
}
4444

4545
function installContentScript(tabId: number) {
46-
chrome.tabs.executeScript(
47-
tabId,
48-
{ file: '/build/contentScript.js' },
49-
function() {}
50-
);
46+
chrome.scripting.executeScript({
47+
target: { tabId: tabId },
48+
files: ['/build/contentScript.js'],
49+
});
5150
}
5251

5352
function doublePipe(one: any, two: any) {
@@ -70,18 +69,18 @@ function doublePipe(one: any, two: any) {
7069
}
7170

7271
function setIconAndPopup(relayBuildType: string, tabId: number) {
73-
chrome.browserAction.setIcon({
72+
chrome.action.setIcon({
7473
tabId: tabId,
7574
path: {
76-
'16': `icons/${relayBuildType}16.png`,
77-
'32': `icons/${relayBuildType}32.png`,
78-
'48': `icons/${relayBuildType}48.png`,
79-
'128': `icons/${relayBuildType}128.png`,
75+
'16': chrome.runtime.getURL(`icons/${relayBuildType}16.png`),
76+
'32': chrome.runtime.getURL(`icons/${relayBuildType}32.png`),
77+
'48': chrome.runtime.getURL(`icons/${relayBuildType}48.png`),
78+
'128': chrome.runtime.getURL(`icons/${relayBuildType}128.png`),
8079
},
8180
});
82-
chrome.browserAction.setPopup({
81+
chrome.action.setPopup({
8382
tabId: tabId,
84-
popup: 'popups/' + relayBuildType + '.html',
83+
popup: chrome.runtime.getURL(`popups/${relayBuildType}.html`),
8584
});
8685
}
8786

@@ -98,6 +97,7 @@ if (IS_FIREFOX) {
9897
}
9998

10099
chrome.runtime.onMessage.addListener((request, sender) => {
100+
console.log('we want to enable it', request, sender);
101101
if (sender.tab) {
102102
// This is sent from the hook content script.
103103
// It tells us a renderer has attached.

‎shells/browser/shared/src/injectGlobalHook.js

+5-19
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,12 @@
1111
/* global chrome */
1212

1313
import nullthrows from 'nullthrows';
14-
import { installHook } from 'src/hook';
1514

16-
function injectCode(code: string) {
15+
function injectCode() {
1716
const script = document.createElement('script');
18-
script.textContent = code;
19-
20-
// This script runs before the <head> element is created,
21-
// so we add the script to <html> instead.
22-
nullthrows(document.documentElement).appendChild(script);
23-
nullthrows(script.parentNode).removeChild(script);
17+
script.src = chrome.runtime.getURL('build/injectedRelayDevToolsDetector.js');
18+
document.documentElement.appendChild(script);
19+
script.remove();
2420
}
2521

2622
let lastDetectionResult;
@@ -59,14 +55,4 @@ window.addEventListener('pageshow', function(evt) {
5955
chrome.runtime.sendMessage(lastDetectionResult);
6056
});
6157

62-
const detectRelay = `
63-
window.__RELAY_DEVTOOLS_HOOK__.on('environment', function(evt) {
64-
window.postMessage({
65-
source: 'relay-devtools-detector',
66-
}, '*');
67-
});
68-
`;
69-
70-
// Inject a `__RELAY_DEVTOOLS_HOOK__` global so that Relay can detect that the
71-
// devtools are installed (and skip its suggestion to install the devtools).
72-
injectCode(';(' + installHook.toString() + '(window))' + detectRelay);
58+
injectCode();

‎shells/browser/shared/src/injectedRelayDevToolsDetector.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { installHook } from 'src/hook';
2+
3+
// Inject a `__RELAY_DEVTOOLS_HOOK__` global so that Relay can detect that the
4+
// devtools are installed (and skip its suggestion to install the devtools).
5+
(function() {
6+
installHook(window);
7+
window.__RELAY_DEVTOOLS_HOOK__.on('environment', function(evt) {
8+
window.postMessage(
9+
{
10+
source: 'relay-devtools-detector',
11+
},
12+
'*'
13+
);
14+
});
15+
})();

‎shells/browser/shared/webpack.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ module.exports = {
3939
main: './src/main.js',
4040
panel: './src/panel.js',
4141
renderer: './src/renderer.js',
42+
injectedRelayDevToolsDetector: './src/injectedRelayDevToolsDetector.js',
4243
},
4344
output: {
4445
path: __dirname + '/build',

0 commit comments

Comments
 (0)