如何通过浏览器插件与网页通信
我如何从网页的 JavaScript 代码与附加组件的主代码进行通信？
例如，像这样：如果单击了某个元素，则在页面脚本的相应事件处理程序中，可以使用哪种语法向主代码发送一些消息？
具体来说， 类似这样的 ，其中 frame 现在必须由通用网页替换。这可能吗？
编辑：我尝试了建议的代码，但正如我所说，应用程序返回此错误：
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
之前我的问题，我实际上尝试过类似的东西，但没有任何效果。
是的，这是可能的。
document.onload = function() {
var elementYouWant = document.getElementById("someID");
elementYouWant.onclick = console.log("Yup.. It was clicked..");
};
这个问题的答案并不像乍一看那么简单。我也曾想过 Pogrindis 的回复中描述的那种逻辑。
但在这里，在主脚本（即附加组件的脚本）和任意文档的通用脚本之间交互的情况下，模式是不同的。
总之，交互以这种方式进行：
- 需要 API page-mod 。
- 通过对象 PageMod 的属性 includes ，您可以创建对文档的引用，并指定 URI（允许使用通配符）。
- 通过 contentScriptFile 属性，设置 .js 文件的 URL，该文件将充当主代码和文档代码之间的载体。
这里有一个例子，它涉及我所处环境的特定需求。我们有：
- 附加代码（主代码）；
- 一个 侧边栏 类型的 html 文档 (gui1.html)，加载到我用作简单 UI 的文件中（我不建议使用 框架 ，因为它不支持许多典型的 HTML 功能 - 例如单击链接等），其中包含指向第二个文档 (gui2.html) 的链接，然后将其加载到浏览器选项卡中（我需要这个技巧是因为侧边栏不支持 localStorage ，而对于me);
- 文档中的脚本。
我们必须在两个元素之间创建信息交换。在我的例子中，交换是单向的，从页面脚本到主脚本。
这是代码（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（即附加组件）访问，但您可以通过消息交换创建 双向 通信。为了实现这一点，我们必须监听 page-mod 的事件 Attach 。然后，它将一个工作对象传递给监听器；该工作器可被附加组件用于交换消息。
以下是一些参考资料，可帮助您全面了解：