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

How to communicate with a webpage via browser plugin

本文关键字：网页 通信 插件 何通过 浏览器      更新时间：2024-04-03

如何从网页的JavaScript代码到插件的主代码进行通信？

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

具体来说，类似这样的东西，框架现在必须被一个通用网页取代。有可能吗？

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

console.error:夏洛克：消息：ReferenceError:未定义文档堆栈：Promise解析回调中引发了编码异常。看见https://developer.mozilla.org/Mozilla/JavaScript_code_modules/Promise.jsm/Promise
完整消息：ReferenceError：文档未定义

在我之前的问题中，我实际上尝试过类似的方法，但没有任何效果。

是的，这是可能的。

document.onload = function() {
  var elementYouWant = document.getElementById("someID");
  elementYouWant.onclick = console.log("Yup.. It was clicked..");
};

参考。

这个问题的答案并不像乍一看那么微不足道。我还想到了波格林迪斯回应中描述的那种逻辑。

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

总之，交互是以这种方式发生的：

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

这里有一个例子，指的是我所处环境的具体需求

  • 附加代码（主代码）
  • 加载在我用作简单的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（即插件）访问，但您可以通过消息交换创建双向通信。为了实现这一点，我们必须倾听页面mod的事件附加。然后，将一个worker对象传递给侦听器；附加组件可以使用该工作者来交换消息。

以下是详尽的参考资料：

与页面脚本交互

与其他脚本通信

页面模式

端口

使用"端口"进行通信

postMessage

使用postMessage 进行通信

相关文章：