Create a bar for specific URLs only

Question

There is something called "Page Actions" in Chrome, and I'm crudely trying to reproduce this functionality using the Firefox Addon SDK / Jetpack. There is probably a better approach than what I have tried so far, and I'm open to suggestions.

Using tabs , I can listen to the finished tab and trigger events, and if the tab URL matches, the add-on widget must be enabled; if not, disabled. I have come to the point that I can change the icon when necessary, but I would also like to turn off the panel.

Strategy 1: steal the click event and show the panel only if we are on the right page; otherwise ignore. The problem is in accordance with the documents , manually displaying the panel, causing it to not snap, an error that did not make much progress on this .

Strategy 2: when disconnecting, set contentURL to null . Receive a message that this is not a URL.

Strategy 3: Use a different HTML document for the disabled state. Setting panel.contentURL to a different url doesn't work after going to another page?

Here is the code:

 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); 

Bound but must have a binding problem? How to reload widget popup using Firefox sdk addon?

Answer 1

If you still haven't solved your problem (and for those who have a similar problem):

I had a similar problem and resolved it with the erikvold ToolbarButton package . Once you have installed this and its dependencies, something like this in the main.js file should work.

 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 }); 

Hope you can find a way to adapt this to your project.

Answer 2

toolbarbutton.ToolbarButton ({id: "MyAddon", label: "My Addon", tooltiptext: "My Addon Tooltip", image: 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(); 

}});