Question

我正在使用WebExtensions API为Firefox和Chrome创建扩展程序。我有一个在每个页面上运行的内容脚本和一个DevTools面板中的GUI。每次用户单击元素时，内容脚本都需要传递消息以更新面板中的GUI。内容脚本中的代码似乎正常工作，如下所示：

content_script.js

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

该面板应该监听这些点击事件并更新GUI。该代码如下所示：

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);

但是，每次在文档中单击时，都会打印“解释的单击”行，并且面板控制台中会显示错误。它说“错误：无法建立连接。接收端不存在。”

我不知道情况会怎样，因为我已明确订阅了接收端的消息。请帮忙解释一下这个错误 - 谢谢！

Answer 1

您可以参考此thread。建议的操作是使用background pages而不是background script。此link表示您的错误意味着该消息没有相应的侦听器。在某些情况下，这可能是预期的，但显然大部分时间都是意外错误。确保添加内容脚本并从同一名称空间发送消息。

无法从内容脚本向devtools面板发送消息

1 个答案: