0

I'm creating an extension for Firefox and Chrome using the WebExtensions API. I have a content script that runs on every page and a GUI in a DevTools panel. Every time the user clicks an element, the content script needs to pass a message to update the GUI in the panel. The code in the content script seems to be working, and looks like this:

content_script.js

document.addEventListener('click', (e) =>
    console.log('content_scripts interpreted click on ', e);
    browser.runtime.sendMessage({"target": e.target.toString()});
    });

The panel is supposed to listen for these click events and update the GUI. That code looks like this:

panel.js

function notifyOnClick(message) {
    console.log('extension heard click', message);
    let clickTargetToString = message.target;
    $('#menu').append(`<p>Clicked ${clickTargetToString}</p>`);
}
browser.runtime.onMessage.addListener(notifyOnClick);

However, every time I click within the document, the "interpreted click" line prints, and an error appears in the panel's console. It says "Error: Could not establish connection. Receiving end does not exist."

I don't know how this could be the case, since I've clearly subscribed to messages on the receiving end. Please help explain this error - thanks!

jxmorris12
  • 1,262
  • 4
  • 15
  • 27

1 Answers1

0

You may refer with this thread. The suggested action is to use a background pages instead of a background script. Also this link states your error means that there is no corresponding listener for that message. In some circumstances this may be expected but obviously most of the time it is an unexpected error. Make sure you are adding the content script and sending the messages from the same namespace.

abielita
  • 13,147
  • 2
  • 17
  • 59