diff --git a/app/services/adapters/basic.js b/app/services/adapters/basic.js index d0cc20a405..d72c84d16e 100644 --- a/app/services/adapters/basic.js +++ b/app/services/adapters/basic.js @@ -93,9 +93,9 @@ export default class Basic extends Service { this._messageCallbacks.push(callback); } - _messageReceived(message) { + _messageReceived(...args) { this._messageCallbacks.forEach((callback) => { - callback(message); + callback(...args); }); } diff --git a/app/services/adapters/web-extension.js b/app/services/adapters/web-extension.js index 759918e038..bbb77f5799 100644 --- a/app/services/adapters/web-extension.js +++ b/app/services/adapters/web-extension.js @@ -19,8 +19,8 @@ export default class WebExtension extends BasicAdapter { init() { this._connect(); this._handleReload(); - this._injectDebugger(); this._setThemeColors(); + this._sendEmberDebug(); return super.init(...arguments); } @@ -30,6 +30,30 @@ export default class WebExtension extends BasicAdapter { this._chromePort.postMessage(options); } + _sendEmberDebug() { + loadEmberDebug().then((emberDebug) => { + // first send to all frames in current tab + this.sendMessage({ + from: 'devtools', + tabId: chrome.devtools.inspectedWindow.tabId, + type: 'inject-ember-debug', + value: emberDebug, + }); + this.onMessageReceived((message, sender) => { + if (message === 'ember-content-script-ready') { + this.sendMessage({ + from: 'devtools', + to: 'tabs', + type: 'inject-ember-debug', + value: emberDebug, + tabId: chrome.devtools.inspectedWindow.tabId, + frameId: sender.frameId, + }); + } + }); + }); + } + @computed get _chromePort() { return chrome.runtime.connect(); @@ -39,8 +63,8 @@ export default class WebExtension extends BasicAdapter { let chromePort = this._chromePort; chromePort.postMessage({ appId: chrome.devtools.inspectedWindow.tabId }); - chromePort.onMessage.addListener((message) => { - this._messageReceived(message); + chromePort.onMessage.addListener((...args) => { + this._messageReceived(...args); }); } @@ -137,31 +161,6 @@ function loadEmberDebug() { window.addEventListener('Ember', resolve, { once: true }); }); waitForEmberLoad.then(() => 'replace-with-ember-debug'); - const emberInspectorDebug = - '(' + loadEmberDebugInWebpage.toString() + ')()'; - const injectIntoIframe = (iframe) => { - const frames = iframe ? [iframe] : window.frames; - for (let i = 0; i < frames.length; i++) { - frames[i].postMessage( - JSON.stringify({ - type: 'inject-ember-debug', - value: emberInspectorDebug, - }), - '*' - ); - } - }; - injectIntoIframe(); - window.addEventListener( - 'message', - (event) => { - if (event.data === '"ember-inspector-iframe-ready"') { - injectIntoIframe(event.source); - event.stopImmediatePropagation(); - } - }, - { capture: true } - ); } return new Promise((resolve) => { if (!emberDebug) { diff --git a/skeletons/web-extension/background-script.js b/skeletons/web-extension/background-script.js index d4a6b45b4e..d9dd5ced03 100644 --- a/skeletons/web-extension/background-script.js +++ b/skeletons/web-extension/background-script.js @@ -136,7 +136,7 @@ } else if (message.from === 'devtools') { // all other messages from EmberInspector are forwarded to the content-script // https://developer.chrome.com/extensions/tabs#method-sendMessage - chrome.tabs.sendMessage(appId, message); + chrome.tabs.sendMessage(message.tabId || appId, message, { frameId: message.frameId }); } }); }); diff --git a/skeletons/web-extension/content-script.js b/skeletons/web-extension/content-script.js index aed5ededb1..705e0f1d9b 100644 --- a/skeletons/web-extension/content-script.js +++ b/skeletons/web-extension/content-script.js @@ -85,26 +85,16 @@ let injected = false; - window.addEventListener('message', (event) => { - try { - const data = JSON.parse(event.data); - if (data?.type === 'inject-ember-debug') { - if (!injected) { - // cannot use eval here, as the context is limited to the content script- - const elem = document.createElement('script') ; - elem.textContent = data.value; - document.head.appendChild(elem) ; - injected = true; - } - event.stopImmediatePropagation(); + chrome.runtime.onMessage.addListener((message) => { + if (message?.type === 'inject-ember-debug') { + if (!injected) { + // cannot use eval here, as the context is limited to the content script- + const elem = document.createElement('script') ; + elem.textContent = message.value; + document.head.appendChild(elem) ; + injected = true; } - } catch { - // noop } - }, { - capture: true }); - if (window.top !== window) { - window.parent.postMessage('"ember-inspector-iframe-ready"', '*'); - } + chrome.runtime.sendMessage('ember-content-script-ready'); })();