使面板仅可用于某些 URL答案

【问题标题】：Making a panel only available for certain URLs使面板仅可用于某些 URL
【发布时间】：2012-02-11 23:22:13
【问题描述】：

Chrome 有一个名为 "Page Actions" 的东西，我大致尝试使用 Firefox Addon SDK/Jetpack 复制该功能。可能有比我迄今为止尝试过的更好的方法，我愿意接受建议。

使用tabs，我可以监听选项卡就绪和激活事件，如果选项卡的 URL 匹配，则应该启用插件小部件；如果没有，禁用。我已经到了可以在适当时更改图标的地步，但我也想禁用面板。

策略1：窃取点击事件，只在我们在正确的页面上时才显示面板；否则，忽略。问题是，according to the docs，手动显示面板会导致它没有被锚定，a bug that's not had much progress on it。

策略2：禁用时将contentURL设置为null。得到一个错误，抱怨它不是一个 URL。

策略 3：对禁用状态使用不同的 HTML 文档。转到其他页面后，将panel.contentURL 设置为其他 URL 不起作用？

代码如下：

const widgets = require("widget");
const Panel = require("panel").Panel;
const tabs = require("tabs");
const data = require("self").data;
const prefs = require("simple-prefs").prefs;

var panel = Panel({
    width: 480,
    height: 640,
    contentURL: data.url("panel.html"),
    contentScriptFile: [data.url('jquery.min.js'), data.url('panel.js')],
    onMessage: function (msg) { console.log(msg) }
});

var widget = widgets.Widget({
    id: "icon",
    label: "Export",
    contentURL: data.url("icon.png"),
    panel: panel
});


function enable() {
    widget.contentURL = data.url('icon.png');
    panel.contentURL = data.url("panel.html");
}

function disable() {
    widget.contentURL = data.url('icon_disabled.png');
    panel.contentURL = data.url("panel_disabled.html");
}

function on_change_tab(tab) {
    console.log(tab.url);
    if (/http:\/\/example.com\/.*/.exec(tab.url)) {
        console.log('ENABLE');
        enable();
    } else {
        console.log('DISABLE');
        disable();
    }
    console.log(panel.contentURL);
}
tabs.on('ready', on_change_tab);
tabs.on('activate', on_change_tab);

相关，但应该有锚定问题？ How to reload a widget popup panel with firefox addon sdk?

【问题讨论】：

标签： firefox-addon firefox-addon-sdk

【解决方案1】：

如果您仍然没有解决您的问题（以及其他有类似问题的人）：

我遇到了类似的问题，并通过使用 erikvold 的 ToolbarButton 包解决了它。一旦你安装了它及其依赖项，你的 main.js 文件中的类似内容应该可以工作。

var pan = require("panel").Panel({
    width: 400,
    height: 600,
    contentURL: "http://stackoverflow.com"
    //maybe some more options here
});
var button = require("toolbarbutton").ToolbarButton({
    id: "myButton",
    label: "My Button",
    image: data.url("someicon.png"),
    panel: pan //This binds the panel to this toolbarbutton
});

我希望你能找到一些方法来适应你的项目。

【讨论】：

【解决方案2】：

工具栏按钮.ToolbarButton({ id: "我的插件", 标签：“我的插件”， tooltiptext: "我的插件工具提示", 图片：data.url("logo.png"), onCommand: function() {

         var dictionary_panel = require("panel").Panel({
         width:630,
         height:600,
         contentURL: data.url("HtmlPage.html"),
         contentScriptWhen: 'ready',
         contentScriptFile: [data.url("style.css"),data.url("jquery-1.7.1.js"),
                  data.url("javascriptquezz.js"),data.url("create.js")]

});

        dictionary_panel.show();

} });

【讨论】：