Question

如何从网页的JavaScript代码与附加组件的主要代码进行通信？

例如，类似这样：如果单击某个元素，则在页面脚本的相应事件处理程序中，可以使用哪种语法将一些消息发送到主代码？

具体而言，something like this，其中框架现在必须由通用网页替换。有可能吗？

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

console.error：sherlock：       消息：ReferenceError：未定义文档         堆：       Promise解决方案回调中抛出了编码异常。       见https://developer.mozilla.org/Mozilla/JavaScript_code_modules/Promise.jsm/Promise
          完整消息：ReferenceError：未定义文档

以前我的问题，我实际尝试了类似的东西没有任何影响。

Answer 1

是的，这是可能的。

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

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

Reference.

Answer 2

这个问题的答案并不像乍一看那样微不足道。我还想到了Pogrindis＆＃39;中描述的类型的逻辑。响应。

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

总之，互动以这种方式进行：

需要API page-mod 。
通过对象 PageMod 的属性 includes ，您可以创建对文档的引用，指定URI（允许使用通配符）。
通过 contentScriptFile 属性，设置 .js 文件的URL，该文件将充当主代码与文档代码之间的载体。

这是一个例子，它指的是我所处的背景的特定需求。我们有：

附加代码（主要代码）;
一个Sidebar类型的html文档（gui1.html）加载到我的文件中用作简单的UI（我建议不要使用Frames，因为它确实如此不支持许多典型的HTML功能 - 例如点击链接，等）包含第二个文件（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（即插件）访问，但您可以通过消息交换创建双向通信。为实现这一目标，我们必须自己监听page-mod的事件 Attach 。然后，它将一个worker对象传递给监听器;该附加组件可以使用该工作者来进行消息交换。

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

Interacting with page scripts

Communicating with other scripts

page-mod

port

Communicating using "port"

postMessage

Communicating using postMessage

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

2 个答案: