'use strict';
function injectProxy({target}: {target: any}) {
if (!window.__REACT_DEVTOOLS_PROXY_INJECTED__) {
window.__REACT_DEVTOOLS_PROXY_INJECTED__ = true;
connectPort();
sayHelloToBackendManager();
const intervalID: IntervalID = setInterval(() => {
if (backendInitialized) {
clearInterval(intervalID);
} else {
sayHelloToBackendManager();
}
}, 500);
}
}
window.addEventListener('pagereveal', injectProxy);
window.addEventListener('pageshow', injectProxy);
window.addEventListener('pagehide', function ({target}) {
if (target !== window.document) {
return;
}
delete window.__REACT_DEVTOOLS_PROXY_INJECTED__;
});
let port = null;
let backendInitialized: boolean = false;
function sayHelloToBackendManager() {
window.postMessage(
{
source: 'react-devtools-content-script',
hello: true,
},
'*',
);
}
function handleMessageFromDevtools(message: any) {
window.postMessage(
{
source: 'react-devtools-content-script',
payload: message,
},
'*',
);
}
function handleMessageFromPage(event: any) {
if (event.source !== window || !event.data) {
return;
}
switch (event.data.source) {
case 'react-devtools-bridge': {
backendInitialized = true;
port.postMessage(event.data.payload);
break;
}
case 'react-devtools-backend-manager': {
const {source, payload} = event.data;
chrome.runtime.sendMessage({
source,
payload,
});
break;
}
}
}
function handleDisconnect() {
window.removeEventListener('message', handleMessageFromPage);
port = null;
connectPort();
}
function connectPort() {
port = chrome.runtime.connect({
name: 'proxy',
});
window.addEventListener('message', handleMessageFromPage);
port.onMessage.addListener(handleMessageFromDevtools);
port.onDisconnect.addListener(handleDisconnect);
}
let evalRequestId = 0;
const evalRequestCallbacks = new Map<number, Function>();
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
switch (msg?.source) {
case 'devtools-page-eval': {
const {scriptId, args} = msg.payload;
const requestId = evalRequestId++;
window.postMessage(
{
source: 'react-devtools-content-script-eval',
payload: {
requestId,
scriptId,
args,
},
},
'*',
);
evalRequestCallbacks.set(requestId, sendResponse);
return true;
}
}
});
window.addEventListener('message', event => {
if (event.data?.source === 'react-devtools-content-script-eval-response') {
const {requestId, response} = event.data.payload;
const callback = evalRequestCallbacks.get(requestId);
try {
if (!callback)
throw new Error(
`No eval request callback for id "${requestId}" exists.`,
);
callback(response);
} catch (e) {
console.warn(
'React DevTools Content Script eval response error occurred:',
e,
);
} finally {
evalRequestCallbacks.delete(requestId);
}
}
});