Guidance on Firefox Sidebar Extension with Add-On Builder

Question

I am looking for some guidance on how to create a browser-embedded sidebar application. I need to make a robust sidebar to allow users to save and organize text from webpages into the sidebar.

I can choose which browser to use and have conducted some research. Currently, it would appear that Chrome does not have a sidebar API, but Firefox does - however it appears documentation on this Firefox feature is dated. I have chosen to investigate this possibility first.

I am new to browser-extension programming, and I have found things a little confusing. I've tried following these tutorials:

• https://developer.mozilla.org/en/docs/Creating_a_Firefox_sidebar
• http://blog.mozilla.org/addons/2009/01/28/how-to-develop-a-firefox-extension/

Eventually, I stumbled upon the Add-On Builder for Firefox, and I like the convenience it provides. It also has solid documentation associated with it. However, I cannot find good documentation on Firefox sidebars. I looked at the Panels API, but I don't think they give me exactly what I want (how can I even position them?). How can I create a sidebar using these tools? Are there any modern examples or docs that I can look at?

If this is not a good approach, are there any alternatives I could consider for this project?

Answer 1

You want to use the following API documentation:

https://addons.mozilla.org/en-US/developers/docs/sdk/Firefox-26/modules/sdk/ui/sidebar.html

Here's a simple example sidebar as noted in the documentation:

var sidebar = require("sdk/ui/sidebar").Sidebar({
  id: 'my-sidebar',
  title: 'My sidebar',
  url: require("sdk/self").data.url("sidebar.html")
});

Answer 2

Even-though no direct API is available, I would recommend you to see the code of other add-ons and learn from them. I will also suggest you to take a look at mozilla add-ons forum where you can see the latest development and also can ask questions regarding add-on development.