| 1 | /* global chrome */ |
| 2 | |
| 3 | let lastSentDevToolsHookMessage; |
| 4 | |
| 5 | // We want to detect when a renderer attaches, and notify the "background page" |
| 6 | // (which is shared between tabs and can highlight the React icon). |
| 7 | // Currently we are in "content script" context, so we can't listen to the hook directly |
| 8 | // (it will be injected directly into the page). |
| 9 | // So instead, the hook will use postMessage() to pass message to us here. |
| 10 | // And when this happens, we'll send a message to the "background page". |
| 11 | window.addEventListener('message', function onMessage({data, source}) { |
| 12 | if (source !== window || !data) { |
| 13 | return; |
| 14 | } |
| 15 | |
| 16 | // We keep this logic here and not in `proxy.js`, because proxy content script is injected later at `document_end` |
| 17 | if (data.source === 'react-devtools-hook') { |
| 18 | const {source: messageSource, payload} = data; |
| 19 | const message = {source: messageSource, payload}; |
| 20 | |
| 21 | lastSentDevToolsHookMessage = message; |
| 22 | chrome.runtime.sendMessage(message); |
| 23 | } |
| 24 | }); |
| 25 | |
| 26 | // NOTE: Firefox WebExtensions content scripts are still alive and not re-injected |
| 27 | // while navigating the history to a document that has not been destroyed yet, |
| 28 | // replay the last detection result if the content script is active and the |
| 29 | // document has been hidden and shown again. |
| 30 | window.addEventListener('pageshow', function ({target}) { |
| 31 | if (!lastSentDevToolsHookMessage || target !== window.document) { |
| 32 | return; |
| 33 | } |
| 34 | |
| 35 | chrome.runtime.sendMessage(lastSentDevToolsHookMessage); |
| 36 | }); |