use internal messaging to setup inframes

emberjs · Oct 17, 2022 · 15f190f · 15f190f
1 parent b84af58
commit 15f190f
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 50 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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');
 })();