-
Notifications
You must be signed in to change notification settings - Fork 47.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor[devtools/extension]: refactored messaging logic across diffe…
…rent parts of the extension
- Loading branch information
Showing
14 changed files
with
389 additions
and
291 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
58 changes: 58 additions & 0 deletions
58
packages/react-devtools-extensions/src/background/executeScript.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| /* global chrome */ | ||
|
|
||
| import {IS_FIREFOX} from '../utils'; | ||
|
|
||
| // Firefox doesn't support ExecutionWorld.MAIN yet | ||
| // https://bugzilla.mozilla.org/show_bug.cgi?id=1736575 | ||
| function executeScriptForFirefoxInMainWorld({target, files}) { | ||
| return chrome.scripting.executeScript({ | ||
| target, | ||
| func: fileNames => { | ||
| function injectScriptSync(src) { | ||
| let code = ''; | ||
| const request = new XMLHttpRequest(); | ||
| request.addEventListener('load', function () { | ||
| code = this.responseText; | ||
| }); | ||
| request.open('GET', src, false); | ||
| request.send(); | ||
|
|
||
| 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. | ||
| if (document.documentElement) { | ||
| document.documentElement.appendChild(script); | ||
| } | ||
|
|
||
| if (script.parentNode) { | ||
| script.parentNode.removeChild(script); | ||
| } | ||
| } | ||
|
|
||
| fileNames.forEach(file => injectScriptSync(chrome.runtime.getURL(file))); | ||
| }, | ||
| args: [files], | ||
| }); | ||
| } | ||
|
|
||
| export function executeScriptInIsolatedWorld({target, files}) { | ||
| return chrome.scripting.executeScript({ | ||
| target, | ||
| files, | ||
| world: chrome.scripting.ExecutionWorld.ISOLATED, | ||
| }); | ||
| } | ||
|
|
||
| export function executeScriptInMainWorld({target, files}) { | ||
| if (IS_FIREFOX) { | ||
| return executeScriptForFirefoxInMainWorld({target, files}); | ||
| } | ||
|
|
||
| return chrome.scripting.executeScript({ | ||
| target, | ||
| files, | ||
| world: chrome.scripting.ExecutionWorld.MAIN, | ||
| }); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
12 changes: 0 additions & 12 deletions
12
packages/react-devtools-extensions/src/background/injectProxy.js
This file was deleted.
Oops, something went wrong.
101 changes: 101 additions & 0 deletions
101
packages/react-devtools-extensions/src/background/messageHandlers.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| /* global chrome */ | ||
|
|
||
| import setExtensionIconAndPopup from './setExtensionIconAndPopup'; | ||
| import {executeScriptInMainWorld} from './executeScript'; | ||
|
|
||
| import {EXTENSION_CONTAINED_VERSIONS} from '../utils'; | ||
|
|
||
| export function handleReactDevToolsHookMessage(message, sender) { | ||
| const {payload} = message; | ||
|
|
||
| switch (payload?.type) { | ||
| case 'react-renderer-attached': { | ||
| setExtensionIconAndPopup(payload.reactBuildType, sender.tab.id); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| export function handleBackendManagerMessage(message, sender) { | ||
| const {payload} = message; | ||
|
|
||
| switch (payload?.type) { | ||
| case 'require-backends': { | ||
| payload.versions.forEach(version => { | ||
| if (EXTENSION_CONTAINED_VERSIONS.includes(version)) { | ||
| executeScriptInMainWorld({ | ||
| target: {tabId: sender.tab.id}, | ||
| files: [`/build/react_devtools_backend_${version}.js`], | ||
| }); | ||
| } | ||
| }); | ||
|
|
||
| break; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| export function handleDevToolsPageMessage(message) { | ||
| const {payload} = message; | ||
|
|
||
| switch (payload?.type) { | ||
| // Proxy this message from DevTools page to content script via chrome.tabs.sendMessage | ||
| case 'fetch-file-with-cache': { | ||
| const { | ||
| payload: {tabId, url}, | ||
| } = message; | ||
|
|
||
| if (!tabId) { | ||
| throw new Error("Couldn't fetch file sources: tabId not specified"); | ||
| } | ||
|
|
||
| if (!url) { | ||
| throw new Error("Couldn't fetch file sources: url not specified"); | ||
| } | ||
|
|
||
| chrome.tabs.sendMessage(tabId, { | ||
| source: 'devtools-page', | ||
| payload: { | ||
| type: 'fetch-file-with-cache', | ||
| url, | ||
| }, | ||
| }); | ||
|
|
||
| break; | ||
| } | ||
|
|
||
| case 'inject-backend-manager': { | ||
| const { | ||
| payload: {tabId}, | ||
| } = message; | ||
|
|
||
| if (!tabId) { | ||
| throw new Error("Couldn't inject backend manager: tabId not specified"); | ||
| } | ||
|
|
||
| executeScriptInMainWorld({ | ||
| target: {tabId}, | ||
| files: ['/build/backendManager.js'], | ||
| }); | ||
|
|
||
| break; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| export function handleFetchResourceContentScriptMessage(message) { | ||
| const {payload} = message; | ||
|
|
||
| switch (payload?.type) { | ||
| case 'fetch-file-with-cache-complete': | ||
| case 'fetch-file-with-cache-error': | ||
| // Forward the result of fetch-in-page requests back to the DevTools page. | ||
| // We switch the source here because of inconsistency between Firefox and Chrome | ||
| // In Chromium this message will be propagated from content script to DevTools page | ||
| // For Firefox, only background script will get this message, so we need to forward it to DevTools page | ||
| chrome.runtime.sendMessage({ | ||
| source: 'react-devtools-background', | ||
| payload, | ||
| }); | ||
| break; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
51 changes: 51 additions & 0 deletions
51
packages/react-devtools-extensions/src/contentScripts/fileFetcher.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| /* global chrome */ | ||
|
|
||
| function fetchResource(url) { | ||
| const reject = value => { | ||
| console.log('fetch reject'); | ||
| chrome.runtime.sendMessage({ | ||
| source: 'react-devtools-fetch-resource-content-script', | ||
| payload: { | ||
| type: 'fetch-file-with-cache-error', | ||
| url, | ||
| value, | ||
| }, | ||
| }); | ||
| }; | ||
|
|
||
| const resolve = value => { | ||
| console.log('fetch resolve'); | ||
| chrome.runtime.sendMessage({ | ||
| source: 'react-devtools-fetch-resource-content-script', | ||
| payload: { | ||
| type: 'fetch-file-with-cache-complete', | ||
| url, | ||
| value, | ||
| }, | ||
| }); | ||
| }; | ||
|
|
||
| fetch(url, {cache: 'force-cache'}).then( | ||
| response => { | ||
| if (response.ok) { | ||
| response | ||
| .text() | ||
| .then(text => resolve(text)) | ||
| .catch(error => reject(null)); | ||
| } else { | ||
| reject(null); | ||
| } | ||
| }, | ||
| error => reject(null), | ||
| ); | ||
| } | ||
|
|
||
| chrome.runtime.onMessage.addListener(message => { | ||
| if ( | ||
| message?.source === 'devtools-page' && | ||
| message?.payload?.type === 'fetch-file-with-cache' | ||
| ) { | ||
| console.log('fetch start'); | ||
| fetchResource(message.payload.url); | ||
| } | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.