如何在 Firefox 中打开插件页面？答案

【问题标题】：How to open an addon page in Firefox?如何在 Firefox 中打开插件页面？
【发布时间】：2015-07-15 10:57:26
【问题描述】：

我正在开发一个 Firefox (SDK) 插件，它在某些时候需要打开一个内部页面（所以 resource://<addon_id>/data/path/to/some_page.html）并且仍然能够保留与插件通信的能力。

这是我迄今为止采用的策略，但都失败了。

使用sdk/tabs.open 打开一个新选项卡，并希望self.port 可以在脚本的页面上下文中使用，因为它是一个内部页面，并且它们可以监听和发出消息。没用——self 根本不可用。
使用sdk/tabs.open 打开一个新选项卡并注入内容脚本。 self 这次是可用，但是没有消息发送到插件或从插件接收。这似乎是某种安全措施。有趣的是，发送或接收消息的失败是静默的，因此没有消息转储到控制台。
使用sdk/tabs.open 打开一个新选项卡，直接访问选项卡的 (DOM) window 对象并通过window.postMessage API 发送/接收消息。这似乎需要调用getBrowserForTab，然后访问contentWindow.wrappedJSObject。但是，在sdk/tabs.open 调用的onOpened 处理程序中调用getBrowserForTab 会返回undefined。

我被困住了。

使用panel 来实现这一点似乎要容易得多，但是由于页面需要是无模式的，因此我无法使用此策略。如何实现？

【问题讨论】：

标签： firefox firefox-addon firefox-addon-sdk

【解决方案1】：

使用 sdk/tabs.open 打开一个新标签并注入一个内容脚本。 self 这个时间是可用的，但是没有消息发送到插件或从插件接收。这似乎是某种安全措施。有趣的是，发送或接收消息的失败是静默的，因此没有消息转储到控制台。

这个方法应该有效，你能提供一些代码和Firefox版本/ jpm版本等吗？您的代码应如下所示：

require("sdk/tabs").open({
  url: "./page.html",
  onReady(tab) {
    let worker = tab.attach({
      contentScriptFile: "./content.js"
    });
    // send and received stuff using `worker.port`
  }
});

您也可以为此使用 page-mod：

const { data: { url } } = require("sdk/self");

require("sdk/page-mod").PageMod({
  include: url("./page.html"),
  contentScriptFile: "./content.js",
  onAttach(worker) {
    // send and received stuff using `worker.port`
  }
});

// if you want to open the page in a tab immediately
require("sdk/tabs").open("./page.html");

使用 page-mod 的主要优点是，即使页面没有被插件打开，它也可以工作（因此，如果用户将 URL 加入书签或在选项卡中手动输入 URL 等）。

我尝试了这两个版本，content.js 和 self.port.on 和 self.port.emit 都按预期工作 - 只是退回短信。

【讨论】：

是的！我同意这也是我推荐的。 pageMod 和使用端口消息 API 就像一个魅力。

【解决方案2】：

只需将该资源 url 加载到浏览器并加载。要进行交流，您可以执行 contentWindow.wrappedJSObject 但尝试使用消息，这样会更好。我个人使用观察者服务。您甚至可以使用以下方法让您的插件页面进入您的插件范围：https://gist.github.com/yajd/17ee5b1b98cb717c8429 不要采用面板方式，html 页面是我这样做的最佳方式。 https://github.com/Noitidart/l10n/tree/xhtml-xul 实际使用 xhtml 所以可以本地化它

【讨论】：