Skip to content

[DevTools] upgrade to Manifest V3 #25145

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Oct 22, 2022
Merged

[DevTools] upgrade to Manifest V3 #25145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
83e8123
upgrade to manifest v3 (chrome)
mondaychen Aug 25, 2022
2c8b0bc
manifest v3 for edge
mondaychen Aug 25, 2022
9b23880
fallback logic for firefox
mondaychen Aug 25, 2022
6ae72f0
fix lint
mondaychen Aug 25, 2022
12a081c
Use new method to inject content scripts + rename files
mondaychen Sep 8, 2022
78f3570
cleanup
mondaychen Sep 8, 2022
e53b5fe
fix renderer logic
mondaychen Sep 8, 2022
4835a51
fallback logic when world is not supported
mondaychen Sep 27, 2022
0edb72a
cleaner code
mondaychen Sep 27, 2022
ba9dc3b
fix lint
mondaychen Sep 27, 2022
5357227
minor improvements per review
mondaychen Oct 21, 2022
26ba645
more nits
mondaychen Oct 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 27 additions & 16 deletions packages/react-devtools-extensions/chrome/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
{
"manifest_version": 2,
"manifest_version": 3,
"name": "React Developer Tools",
"description": "Adds React debugging tools to the Chrome Developer Tools.",
"version": "4.26.1",
"version_name": "4.26.1",
"minimum_chrome_version": "60",
"minimum_chrome_version": "88",
"icons": {
"16": "icons/16-production.png",
"32": "icons/32-production.png",
"48": "icons/48-production.png",
"128": "icons/128-production.png"
},
"browser_action": {
"action": {
"default_icon": {
"16": "icons/16-disabled.png",
"32": "icons/32-disabled.png",
Expand All @@ -21,31 +21,42 @@
"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/react_devtools_backend.js",
"build/renderer.js"
{
"resources": [
"main.html",
"panel.html",
"build/react_devtools_backend.js",
"build/proxy.js",
"build/renderer.js",
"build/installHook.js"
],
"matches": [
"<all_urls>"
],
"extension_ids": []
}
],
"background": {
"scripts": [
"build/background.js"
],
"persistent": false
"service_worker": "build/background.js"
},
"permissions": [
"file:///*",
"http://*/*",
"https://*/*"
"storage",
"scripting"
],
"host_permissions": [
"<all_urls>"
],
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"build/injectGlobalHook.js"
"build/prepareInjection.js"
],
"run_at": "document_start"
}
Expand Down
43 changes: 27 additions & 16 deletions packages/react-devtools-extensions/edge/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
{
"manifest_version": 2,
"manifest_version": 3,
"name": "React Developer Tools",
"description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
"version": "4.26.1",
"version_name": "4.26.1",
"minimum_chrome_version": "60",
"minimum_chrome_version": "88",
"icons": {
"16": "icons/16-production.png",
"32": "icons/32-production.png",
"48": "icons/48-production.png",
"128": "icons/128-production.png"
},
"browser_action": {
"action": {
"default_icon": {
"16": "icons/16-disabled.png",
"32": "icons/32-disabled.png",
Expand All @@ -21,31 +21,42 @@
"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/react_devtools_backend.js",
"build/renderer.js"
{
"resources": [
"main.html",
"panel.html",
"build/react_devtools_backend.js",
"build/proxy.js",
"build/renderer.js",
"build/installHook.js"
],
"matches": [
"<all_urls>"
],
"extension_ids": []
}
],
"background": {
"scripts": [
"build/background.js"
],
"persistent": false
"service_worker": "build/background.js"
},
"permissions": [
"file:///*",
"http://*/*",
"https://*/*"
"storage",
"scripting"
],
"host_permissions": [
"<all_urls>"
],
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"build/injectGlobalHook.js"
"build/prepareInjection.js"
],
"run_at": "document_start"
}
Expand Down
6 changes: 4 additions & 2 deletions packages/react-devtools-extensions/firefox/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,9 @@
"main.html",
"panel.html",
"build/react_devtools_backend.js",
"build/renderer.js"
"build/proxy.js",
"build/renderer.js",
"build/installHook.js"
],
"background": {
"scripts": [
Expand All @@ -50,7 +52,7 @@
"<all_urls>"
],
"js": [
"build/injectGlobalHook.js"
"build/prepareInjection.js"
],
"run_at": "document_start"
}
Expand Down
61 changes: 43 additions & 18 deletions packages/react-devtools-extensions/src/background.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,41 @@

'use strict';

import {IS_FIREFOX} from './utils';

const ports = {};

const IS_FIREFOX = navigator.userAgent.indexOf('Firefox') >= 0;
if (!IS_FIREFOX) {
// Manifest V3 method of injecting content scripts (not yet supported in Firefox)
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi. Not sure if this is the best place to mention it but this is now supported in Firefox and, in fact, feature detection works generally better than user-agent detection. This extension should be trivial to "port" on Firefox MV3 ;-)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for letting me know! Unfortunately we are extremely understaffed now, so we won't be able to improve it soon. I'll make it as a TODO and hope we'll find time.

// Note: the "world" option in registerContentScripts is only available in Chrome v102+
// It's critical since it allows us to directly run scripts on the "main" world on the page
// "document_start" allows it to run before the page's scripts
// so the hook can be detected by react reconciler
chrome.scripting.registerContentScripts([
{
id: 'hook',
matches: ['<all_urls>'],
js: ['build/installHook.js'],
runAt: 'document_start',
world: chrome.scripting.ExecutionWorld.MAIN,
},
{
id: 'renderer',
matches: ['<all_urls>'],
js: ['build/renderer.js'],
runAt: 'document_start',
world: chrome.scripting.ExecutionWorld.MAIN,
},
]);
}

chrome.runtime.onConnect.addListener(function(port) {
let tab = null;
let name = null;
if (isNumeric(port.name)) {
tab = port.name;
name = 'devtools';
installContentScript(+port.name);
installProxy(+port.name);
} else {
tab = port.sender.tab.id;
name = 'content-script';
Expand All @@ -35,12 +59,15 @@ function isNumeric(str: string): boolean {
return +str + '' === str;
}

function installContentScript(tabId: number) {
chrome.tabs.executeScript(
tabId,
{file: '/build/contentScript.js'},
function() {},
);
function installProxy(tabId: number) {
if (IS_FIREFOX) {
chrome.tabs.executeScript(tabId, {file: '/build/proxy.js'}, function() {});
} else {
chrome.scripting.executeScript({
target: {tabId: tabId},
files: ['/build/proxy.js'],
});
}
}

function doublePipe(one, two) {
Expand All @@ -63,18 +90,19 @@ function doublePipe(one, two) {
}

function setIconAndPopup(reactBuildType, tabId) {
chrome.browserAction.setIcon({
const action = IS_FIREFOX ? chrome.browserAction : chrome.action;
action.setIcon({
tabId: tabId,
path: {
'16': 'icons/16-' + reactBuildType + '.png',
'32': 'icons/32-' + reactBuildType + '.png',
'48': 'icons/48-' + reactBuildType + '.png',
'128': 'icons/128-' + reactBuildType + '.png',
'16': chrome.runtime.getURL(`icons/16-${reactBuildType}.png`),
'32': chrome.runtime.getURL(`icons/32-${reactBuildType}.png`),
'48': chrome.runtime.getURL(`icons/48-${reactBuildType}.png`),
'128': chrome.runtime.getURL(`icons/128-${reactBuildType}.png`),
},
});
chrome.browserAction.setPopup({
action.setPopup({
tabId: tabId,
popup: 'popups/' + reactBuildType + '.html',
popup: chrome.runtime.getURL(`popups/${reactBuildType}.html`),
});
}

Expand Down Expand Up @@ -123,9 +151,6 @@ chrome.runtime.onMessage.addListener((request, sender) => {
// This is sent from the hook content script.
// It tells us a renderer has attached.
if (request.hasDetectedReact) {
// We use browserAction instead of pageAction because this lets us
// display a custom default popup when React is *not* detected.
// It is specified in the manifest.
setIconAndPopup(request.reactBuildType, id);
} else {
switch (request.payload?.type) {
Expand Down
25 changes: 25 additions & 0 deletions packages/react-devtools-extensions/src/contentScripts/installHook.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import {installHook} from 'react-devtools-shared/src/hook';

// avoid double execution
if (!window.hasOwnProperty('__REACT_DEVTOOLS_GLOBAL_HOOK__')) {
installHook(window);

// detect react
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.on('renderer', function({
reactBuildType,
}) {
window.postMessage(
{
source: 'react-devtools-detector',
reactBuildType,
},
'*',
);
});

// save native values
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeObjectCreate = Object.create;
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeMap = Map;
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeWeakMap = WeakMap;
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeSet = Set;
}
Loading