IssueTracker

I'm building an extension and trying to do message passing between browser and webpage. I've an event that's emitted from my site <foo.com>. The event is implemented something like this:

window.postMessage('foo-message', ...)

I want to get that message and show it in panel.html i.e, the browser devtools tab similar to how you see the logging information under "Console" tab.

I've pretty much looked at all possible reasons for this issue and seems a bit unique scenario in my case or something very stupid. Everytime I refresh I get the following error: Could not establish connection. Receiving end does not exist

Here's the code sample if anyone likes to look into it.

manifest.json

{
  "name": "Solar",
  "version": "0.0.1",
  "description": "Solar Extension",
  "manifest_version": 3,
  "minimum_chrome_version": "88",
  "permissions": [
    "storage",
    "tabs",
    "scripting"
  ],
  "background": {
    "service_worker": "background.js",
    "persistent": false
  },
  "web_accessible_resources": [
    {
      "matches": ["*://*/*"],
      "resources": [
        "panel.html",
        "panel.js",
        "assets/*",
        "content.js",
        "devtools.html",
        "devtools.js",
        "background.js"
      ]
    }
  ],
  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": ["content.js"],
      "run_at": "document_start"
    }
  ],
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self';"
  },
  "devtools_page": "devtools.html",
  "externally_connectable": {
    "matches": ["<all_urls>"]
  }
}

background.js

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'postMessage') {
    console.log('** Background Received message:', message, sender);
    // Relay the message to the panel
    chrome.runtime.sendMessage({
      type: 'panelMessage',
      data: message.data,
    }, (response) => {
      if (chrome.runtime.lastError) {
        console.error('Error sending message to panel:', chrome.runtime.lastError);
      } else {
        console.log('Message sent to panel:', response);
      }
    });
  }
});

content.js

window.addEventListener('message', (event) => {
  // Only accept messages from the same frame
  if (event.source !== window) {
    return;
  }

  if (event.data?.source?.includes('solar')) {
    chrome.runtime.sendMessage({
      type: 'postMessage',
      data: event.data,
    }, (response) => {
      if (chrome.runtime.lastError) {
        console.error('Error sending message to background:', chrome.runtime.lastError);
      } else {
        console.log('Message sent to background:', response);
      }
    });
  }
});

devtools.js

chrome.devtools.panels.create(
    "Solar", // Title of the panel
    "icon.png", // Icon for the panel
    "panel.html", // HTML page for the panel content
    () => {
        console.log("DevTools panel created.");
    }
);

panel.js

chrome.runtime.onMessage.addListener((message) => {
  console.log('** Panel Received message:', message);
  // Handle the relayed message
  console.log('** Relayed Panel message:', message.data);
});

panel.html

<script src="./panel.js"></script>

devtools.html

<script src="./devtools.js"></script>