如何从 Firefox 插件中的面板触发面板？答案

【问题标题】：How to fire a panel from a panel in Firefox addon?如何从 Firefox 插件中的面板触发面板？
【发布时间】：2017-05-31 23:15:40
【问题描述】：

我有这样的结构：

Addon Directory
    index.js
    Data Directory
       -panel1.html
       -panel1.js
       -panel2.html
       -panel2.js

我在index.js 中定义了panel1 和panel2。我将panel1 附加到工具栏按钮。 panel1.html 包含一个应该打开 panel2.html 的链接。

问题是：当我在panel1.js 中调用panel2.show() 时，我收到此错误：panel2.show is not a function 这是代码：

var geLink= document.getElementById("mylink");
getLink.addEventListener('click', function (event)
            {
               console.log("link clicked");
                panel2.show();
                },false);

如何从 panel1 触发 panel2？这可能吗？

我了解无法从主插件脚本之外调用 show 方法。那么，当点击panel1 中的链接时，显示panel2.html 并执行其内容脚本的正确方法是什么？是使用 window.open() 吗？如果是这种情况，我如何告诉panel2 脚本在panel2.html 窗口打开之前不被执行？因为当我尝试它时，panel2 脚本会在我单击 panel1 中的链接和panel2.html 页面打开之前执行。

【问题讨论】：

请edit 你的问题成为主题：包括一个重复问题的minimal reproducible example。寻求调试帮助的问题（“为什么这段代码没有按我想要的方式工作？”）必须包括：（1）期望的行为，（2）特定的问题或错误以及（3）重现它所需的最短代码在问题本身中。另请参阅：What topics can I ask about here? 和 How to Ask。
基本上，您需要向主脚本传递一条消息才能打开 panel2。有很多方法可以做到这一点。但是，您应该注意：一次只能只有一个 sdk/panel 打开（来自安装在该 Firefox 配置文件中的 all 基于附加 SDK 的附加组件，而不仅仅是您的附加组件）。因此，您不能同时打开 panel1 和 panel2。见：How to show 2 sdk/panels at the same time in Firefox Add-on SDK?
需要minimal reproducible example 的原因是我们想提供帮助。如果我们不必重新创建复制问题所需的任何代码，那么提供帮助会要容易得多。这是您已经拥有的代码。因此，请帮助我们为您提供帮助并提供一个完整 minimal reproducible example 以重复该问题。如果没有minimal reproducible example，甚至开始帮助您所需的工作量要高得多，这显着减少了愿意/能够帮助您的人数。即使我们付出了额外的努力，我们也必须猜测您可能遇到的问题的很大一部分。

标签： javascript firefox-addon firefox-addon-sdk dom-events

【解决方案1】：

不可能从第一个面板触发第二个面板。不可能同时拥有两个面板。

打开面板将关闭由 Panel() 创建的任何面板已经打开的构造函数，即使该面板是由不同的基于附加 SDK 的扩展。

但是，您可以触发包含内容脚本的普通 HTML 页面，而不是面板。在索引中创建一个 pageMod 对象：

var pageMod = require('sdk/page-mod').PageMod({
  include: "resource://extensionfile/data/page.html",
  contentScriptFile:'./myscript.js',
  contentScriptWhen: 'ready',
  onAttach: function(worker) {
    worker.port.emit("going-from-index", myarray);
    worker.port.on("coming-from-panel", receivedvalue); }
});//end var pageMod

在面板中，听链接点击，然后打开html页面：

link = document.getElementById("click-link");
link.addEventListener('click',function (event)
                                    {
                                      window.open('page.html');
                                    }
                            );

【讨论】：