How to create a sidebar with Firefox WebExtensions?

Question

I'm trying to migrate an extension and yes, I know that I can not add more than one button per WebExtension to the browser interface, but I would like to know if it is possible to create a sidebar somehow. I know that I can manipulate the DOM of the site, but in some cases (e.g. Facebook) it is difficult due to their css, and I need to make sure that my sidebar is visible from any Website where the user wants to use it to see some stats.

Do you know a way for creating a pseudo-sidear (DOM), no matter the site?

PS: Do you think a sidebar (browser UI) will be available in the future?

Any idea is welcome,

Answer 1

To create a sidebar, it's here.

1. First you need to edit your manifest.json, to add the "sidebar-action".

   "sidebar_action": {   
       "default_icon": {
           "16": "button/geo-16.png",
           "32": "button/geo-32.png"
       },  
       "default_title": "My sidebar", 
       "default_panel": "sidebar/sidebar.html" 
   }
   

2. Create the sidebar.html with its scripts and CSS if needed.

You have an example webextension here, on Github to learn how to create a sidebar. It's called "annotate-page".

You can call your sidebar with a function

 sidebarAction.getPanel()

or a keyboard shortcut, so you can use your extension button to call a browser-action, as I think you asked for this, as you said "I know that I can not add more than one button per WebExtension".

You have only one action when clicking the toolbar button, only if you don't use a popup that will shows other buttons.