How do I create an options popup dialog using firefox addon sdk?

2
votes

So I decided recently to create a firefox extension I have been thinking about, but do not have any prior experience with it. I read on the official tutorials and figured that the addons sdk seemed to fit me well, but I seem to have hit a hitch using it.

What I want to do is create an options popup dialog, similar to the one you see if you press alt-tools-options. That is, a border with title and close button on the upper part, and a bigger area inside the window where I can define an "intuitive" (default elements with the skin the user is used to) GUI. The tabs at the top (general, privacy security etc.) is nothing I really need, though would not hurt either.

So the issue is that from my searches, when you use addon sdk, you are not supposed to use XUL which has those elements, but instead you seem to be supposed to create something custom using HTML in a panel. I don't think its possible to create the top-bar akin to the real options-menu when using that, although if I am wrong I would not mind being corrected.

I had a similar issue before, where I wanted a drop-down menu from the toolbar similar to the default ones, which I solved thanks to: How to add a dropdown menu to a firefox addon sdk powered addon toolbar button?. Might be worth noting that that the button opening the options dialog is one of the menuitems created as described there. I was considering that it could probably be possible (aka I am not sure) to use something akin to this, but sadly I do not know how I would create a "separate" (drag-able) popup that I could use this on.

If possible, I would prefer there to exist a solution, but if someone knows that it is indeed impossible, please do post that so and I can give up without regrets and just make some sort of custom HTML panel instead :)

tldr: Is there a way to create a popup dialog similar (in style) to the options window you can open using alt-tools-options in firefox when developing using addon sdk?

1
javascriptdialogfirefox-addonfirefox-addon-sdkoptions
I don't understand what popup dialog you mean. How do you open it? – therealjeffg
If you have firefox in focus, try pressing the key alt. This will bring up the familiar file, edit, ... , tools, help buttons at the top left of the window. When you select tools there will exist a menuitem called options. Select it and the popup dialog appears. If you want to use keyboard only, the key-combination is Alt-T-O. If you press the link alt-tools-options in OP you will also see a screenshot of it. – felix
What OS are you using? I'm using a Mac, that doesn't apply at all to what I'm seeing. – therealjeffg
Ah, I use windows. I dont know how one would open it in mac, but a quick google suggests this might work support.mozilla.org/en-US/kb/… and I just now noticed that for me (and in the images on that link), there is an options item in that menu before you select customize that opens it as well – felix

1 Answers

1
votes

Essentially, you aren't supposed to, at least not with the SDK.

But then again, it is still possible, but you need to do a lot of stuff yourself:

  1. You need to register a chrome: package for your add-on, as the resource: URIs the SDK uses internally do not work correctly for XUL windows. Create a Chrome Registration (chrome.manifest file). The SDK supports this since Firefox 24 IIRC.
  2. Create the XUL file. For preferences/options windows, there is already the <prefwindow> binding. Look at other extensions and or the Firefox Options dialog (which is a huge thing with multiple overlays, so better look at other extensions). Place the XUL file in chrome/content/<somefile>.xul. This will then correspond to chrome://<registered_package_from_1>/content/<somefile>.xul.
  3. Implement something that will actually display the window. Normally non-SDK add-ons would just put em:optionsURL into their install.rdf, to have the Add-On Manager automatically create a Preferences button that will open the specified URL, but in the SDK this is generated from package.json and there is no way to put optionsURL in package.json if I'm not mistaken. But you could do other things, like using a simple-prefs type: control button to have a button in your about:addons page, or add it to some browser menu (which would require yet another heap of XUL-modifying, require("chrome") code.). To actually open the dialog, you could use window/utils.openDialog.
  4. Don't forget to close any open windows again when your add-on gets unloaded.

As you can see, not a simple task... If you're just after preferences in general, consider using simple-prefs.