fix: global hook not installing (#133)

Author: coolsoftwaretyler

src/shells/webextension/contentScript.js

@@ -120,7 +120,7 @@ window.addEventListener('message', function listener(message) {
 });
 
 // Listen for messages from the background script
-chrome.runtime.onMessage.addListener((message, sender) => {
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
   if (message.type === 'panel-message') {
     // Forward to backend
     window.postMessage(
@@ -131,52 +131,42 @@ chrome.runtime.onMessage.addListener((message, sender) => {
       },
       '*',
     );
+    // Send immediate response to avoid channel closing
+    sendResponse({ received: true });
   }
+  // Return false to indicate we won't send an async response
+  return false;
 });
 
 // Handle messages from backend
 window.addEventListener('message', evt => {
   if (evt.data.source === 'mobx-devtools-backend' && evt.data.contentScriptId === contentScriptId) {
     // Forward to panel via background script
-    chrome.runtime
-      .sendMessage({
-        type: 'content-to-panel',
-        data: evt.data.payload,
-      })
-      .catch(err => {
-        // Ignore errors about receiving end not existing
-        if (!err.message.includes('receiving end does not exist')) {
-          console.error('Error sending message:', err);
-        }
-      });
-  }
-});
-
-// Add to port message listener
-port.onMessage.addListener(message => {
-  if (message.type === 'panel-message') {
-    window.postMessage(
-      {
-        source: 'mobx-devtools-content-script',
-        payload: message.data,
-        contentScriptId: contentScriptId,
-        backendId: backendId,
-      },
-      '*',
-    );
+    try {
+      chrome.runtime
+        .sendMessage({
+          type: 'content-to-panel',
+          data: evt.data.payload,
+        })
+        .catch(() => {
+          // Ignore "receiving end does not exist" errors silently
+        });
+    } catch (err) {
+      // Ignore chrome.runtime not available errors
+      console.debug('Failed to send message:', err);
+    }
   }
 });
 
-// Add this message handler for panel messages
+// Consolidate duplicate port message listeners into one
 port.onMessage.addListener(message => {
   if (message.type === 'panel-message') {
-    // Add these specific properties needed by the backend
     window.postMessage(
       {
         source: 'mobx-devtools-content-script',
         payload: message.data,
-        contentScriptId: contentScriptId, // Make sure this matches the initial handshake
-        backendId: backendId, // Make sure this is available from the handshake
+        contentScriptId,
+        backendId,
       },
       '*',
     );

src/shells/webextension/injectGlobalHook.js

@@ -1,9 +1,11 @@
 // Simply importing this file will install the global hook here
 import installGlobalHook from '../../backend/utils/installGlobalHook';
 
-// if (__DEV__) {
-window.addEventListener('test-open-mobx-devtools-window', () => {
-  console.log('test-open-mobx-devtools-window'); // eslint-disable-line no-console
-  chrome.runtime.sendMessage({ eventName: 'open-mobx-devtools-window' });
-});
-// }
+if (__DEV__) {
+  window.addEventListener('test-open-mobx-devtools-window', () => {
+    console.log('test-open-mobx-devtools-window'); // eslint-disable-line no-console
+    chrome.runtime.sendMessage({ eventName: 'open-mobx-devtools-window' });
+  });
+}
+
+installGlobalHook(window);

src/shells/webextension/manifest.json

@@ -41,20 +41,12 @@
   "permissions": ["contextMenus", "storage", "scripting"],
   "host_permissions": ["<all_urls>"],
 
-  "browser_action": {
-    "default_icon": {
-      "16": "icons/toolbar-chrome.png",
-      "32": "icons/[email protected]"
-    },
-    "default_title": "Open"
-  },
-
   "content_scripts": [
     {
       "matches": ["<all_urls>"],
       "js": ["injectGlobalHook.js"],
-      "run_at": "document_start"
+      "run_at": "document_start",
+      "world": "MAIN"
     }
   ]
-
 }

src/shells/webextension/panel-loader.js

@@ -16,7 +16,7 @@ function createPanelIfMobxLoaded() {
       world: 'MAIN',
     })
     .then(([result]) => {
-      const pageHasMobx = result?.result; // Access the result property
+      const pageHasMobx = result?.result;
 
       if (!pageHasMobx || panelCreated) {
         return;