API WebExtensions，在浏览器和内容脚本之间通信

Question

我正在尝试从网页到扩展程序进行通信，反之亦然。

为此，我查看了此处的 Mozilla 文档：https://developer.mozilla.org/fr/Add-ons/WebExtensions/Content_scripts#Communicating_with_the_web_page

它有一个简单的示例，但我无法让它工作。在网页脚本上，我有这个：

// page-script.js

var messenger = document.getElementById("from-page-script");

messenger.addEventListener("click", messageContentScript);

function messageContentScript() {
  window.postMessage({
    direction: "from-page-script",
    message: "Message from the page"
  }, "*");

在扩展的内容脚本页面上：

// content-script.js

window.addEventListener("message", function(event) {
  if (event.source == window &&
      event.data.direction &&
      event.data.direction == "from-page-script") {
    alert("Content script received message: \"" + event.data.message + "\"");
  }
});

我安装了扩展（作为临时扩展，我上传了我的xpi文件），然后我使用了API WebExtensions的"Debugging"方法，并在监听器中放置了一个断点，但是每当我调用了 PostMessage，扩展似乎从未接收到事件，从未触发过断点。

是否可以通过这种方式在网页和扩展程序之间进行通信？或者还有其他的吗？

Answer 1

问题出在我的扩展清单中。我将我的内容脚本声明为背景脚本。

所以，与其这样写：

"background": {
    "scripts": ["myscript.js"],
    "persistent": true
    },

您必须像这样声明脚本：

   "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["myscript.js"]
    }
  ]

Answer 2

我遇到了类似的问题，我的问题是我打电话给

window.postMessage

iframe 中的函数。在我将其更改为

之后

top.window.postMessage

它开始工作了。

API WebExtensions，在浏览器和内容脚本之间通信

API WebExtensions, communicate between browser and content script

javascript

firefox

firefox-addon-webextensions