0

Problem: I'm trying to have my webapp communicate with the background script of my chrome extension. However, when I invoke chrome.runtime.sendMessage() from my webapp, in order to send a message to the background.js script in my extension, the response callback never gets invoked. It also appears that background.js isn't receiving the message. Is what I'm trying to do possible? If so, given the information below, can anyone help me?

Background

  1. My browser extension has a Newtab page, that I've configured to load my webapp. It does so by loading the webapp in an iframe:

<html>
  <body style="margin:0px;padding:0px;overflow:hidden;">
    <iframe src="https://www.example.com" frameBorder="0" style={{height:"100vh", width:"100vw", overflow: "hidden"}} height="100%" width="100%"/>
  </body>
</html>
  1. I have set the content-security-policy in manifest.json to allow this to happen:
    "content_security_policy": {
      "extension_pages": "object-src 'none'; child-src https://www.example.com https://example.com; frame-src https://www.example.com https://example.com; script-src 'self'"
    }
  1. I have enabled connectivity between my extension and my webapp using the externally_connectable manifest.json key:
 "externally_connectable": {
      "matches": [
        "http://localhost:3000/*",
        "https://*.example.com/*",
        "https://example.com/*"
      ]
    }
  1. In my webapp (example.com), I have a script that tries to send a message to the background.js service worker. This script executes without any errors reported in the console. Note: this script is running on a webpage that is inside an iFrame in a page bundled with the extension.
function sendMessageToExtension() {
  console.log("I got called");
  if (chrome && chrome.runtime) {
    console.log("Sending message to extension"); // this code is executed
    chrome.runtime.sendMessage(
      "extension_id", 
      { type: "example.message.type"}, 
      {includeTlsChannelId : true}, 
      function(rsp) {
        if(arguments.length === 0) {
          console.log(chrome.runtime.lastError);
        }
        console.log(rsp.message)
      } // this call back never gets invoked.
    );
  } else {
  // TODO: need to detect this in production.
    console.log("no chrome.runtime");
  }
}
  1. My background code to handle the message looks like this:
chrome.runtime.onMessageExternal.addListener(
  (request, sender, sendResponse) => {
    console.log("onMessageExternal invoked") // never gets called
    if (request.type === "example.message.type") {
      sendResponse({message: "message received by background worker."});
    }

  }
)

Other Notes: This doesn't appear to work even when I load the webpage by navigating to it in the URL bar, so I'm not entirely sure what's going on.

kartycodes
  • 38
  • 1
  • 4
  • Assuming `extension_id` is a placeholder for the real id, the code is correct, so I guess you're looking at the wrong console ([How to see background.js console?](/a/10258029)) or you didn't reload the extension after editing or it's a bug in Chrome that disables the service worker. You can try reinstalling the extension, then verify its service worker on `chrome://serviceworker-internals` page. – wOxxOm Aug 30 '22 at 20:55
  • Thanks @wOxxOm! I wasn't aware of that page. I opened, and noticed that my service worker was inactive, which in turn led me to find some unrelated errors that I was able to fix and get past. The code I posted was correct, as it turns out. – kartycodes Aug 31 '22 at 01:55

1 Answers1

0

The answer to my question is yes you can! And as it turns out, the code I posted is exactly how you would do it.

kartycodes
  • 38
  • 1
  • 4