如何通过浏览器插件与网页通信

Question

如何从网页的 JavaScript 代码与插件的主代码通信？

例如，这样的事情：如果点击了某个元素，在页面脚本的相应事件处理程序中，可用于向主代码发送一些消息的语法是什么？

具体来说，something like this，其中框架现在必须替换为通用网页。可能吗？

编辑：我已经尝试了建议的代码，但是我说过，应用程序 returns 这个错误：

console.error: sherlock: Message: ReferenceError: document is not defined Stack: A coding exception was thrown in a Promise resolution callback. See https://developer.mozilla.org/Mozilla/JavaScript_code_modules/Promise.jsm/Promise
Full message: ReferenceError: document is not defined

之前我的问题，我实际上尝试过类似的东西但没有任何效果。

Answer 1

是的，这是可能的。

document.onload = function() {
  var elementYouWant = document.getElementById("someID");

  elementYouWant.onclick = console.log("Yup.. It was clicked..");
};

Reference.

Answer 2

问题的答案并不像乍看起来那么微不足道。我还想到了 Pogrindis 回复中描述的那种逻辑。

但是在这里，在主脚本（即附加组件的脚本）和任意文档的通用脚本之间进行交互的情况下，模式是不同的。

综上所述，交互是这样进行的：

需要API页面-mod.
通过对象 PageMod 的属性 includes 你创建一个文档的引用，指定 URI（通配符是允许的）。
通过 contentScriptFile 属性设置将执行的 .js 文件的 URL作为主要代码和文档代码之间的载体。

这里有一个例子，它涉及我所处环境的特定需求。我们有：

附加代码（主代码）；
a Sidebar类型html文件(gui1.html)加载到我的文件中用作简单的 UI（我建议不要使用 Frames，因为它确实不支持许多典型的 HTML 功能 - 例如点击 link，等）包含 link 到第二个文档（gui2.html），然后加载到浏览器选项卡中（我需要这个技巧，因为侧边栏不支持 localStorage，但对我来说是必需的）;
文档中的脚本。

我们必须在两个元素之间创建信息交换。在我的例子中，交换是单向的，从页面脚本到主脚本。

这是代码 (main.js)：

var pageMod = require("sdk/page-mod");
pageMod.PageMod({
    include: "resource://path/to/document/gui2.html",
    contentScriptFile: data.url("listen.js"),
    onAttach: function(worker) {
        worker.port.on("gotElement", function(elementContent) {
            console.log(elementContent);
        });
    }
});

并在 html 页面脚本中：

<script type="text/javascript">

[...]

SOWIN = (navigator.userAgent.toLowerCase().indexOf("win") > -1) ? "win" : "nix";
            if (SOWIN == "win") {
            window.postMessage("win","*");
            } else {
            window.postMessage("Linux","*");
            }
[...]

</script>

最后在JS文件(listen.js)中附上页面脚本：

window.addEventListener('message', function(event) {
   self.port.emit("gotElement", event.data);
}, false);

这只是一个小例子，但是逻辑我会说很清楚。上传的内容脚本无法直接从 main.js（即插件）访问，但您可以通过消息交换创建双向通信。为了实现这一点，我们必须让自己监听页面-mod 的事件Attach。然后，将一个 worker 对象传递给侦听器；该 worker 可能会被附加组件用于消息交换。

以下是详尽图片的参考资料：

Interacting with page scripts

Communicating with other scripts

page-mod

port

Communicating using "port"

postMessage

Communicating using postMessage

如何通过浏览器插件与网页通信

How to communicate with a webpage via browser plugin

javascript

firefox-addon-sdk

message-passing