Can I put a button on the tab header using Firefox Add-on?

Question

In a Firefox browser window, I would like to put a button on the tab header next to the web page title. Is this possible with a Firefox add-on? So far I am still unsure what to call this part of a tab. Sorry for duplicates!

Edit: I didn't have the reputation to add images. Here it is just for clarity (desired button in red)

Answer 1

The short answer to this is: "Yes."

Firefox add-ons have the ability to have almost complete control of the user interface. In this instance, the first level of XUL content that you would want to look at is contained in chrome://browser/content/browser.xul. This file is contained within the omni.ja archive in the browser directory within the Firefox release directory. All the omni.ja files are zip archives which you can view by extracting the files using a program that understands .zip archives. Depending on your OS, it may be easier to change the extension to omni.zip. Within that archive this file is chrome\browser\content\browser\browser.xul.

However the content that you would actually need to modify is located in the chrome://browser/content/tabbrowser.xml file (in the same directory). This files defines what the tab stack looks like. How you go about changing this will depend on the type of add-on you are creating (e.g. overlay, restartless, add-on SDK) and if you want this change to apply to all tabs, or just some.

You will probably also want to look at browser.css which will be in a subdirectory of the skin directory.

The XUL structure for this element normally looks like:

The hbox with class="tab-content" is most likely what you will want to modify.

In tabbrowser.xml it is currently (Firefox 38.0.5) defined as:

<xul:hbox xbl:inherits="pinned,selected,titlechanged"
          class="tab-content" align="center">
  <xul:image xbl:inherits="fadein,pinned,busy,progress,selected"
             class="tab-throbber"
             role="presentation"
             layer="true" />
  <xul:image xbl:inherits="src=image,fadein,pinned,selected,busy,crashed"
             anonid="tab-icon-image"
             class="tab-icon-image"
             validate="never"
             role="presentation"/>
  <xul:image xbl:inherits="crashed,busy"
             class="tab-icon-overlay"
             role="presentation"/>
  <xul:label flex="1"
             anonid="tab-label"
             xbl:inherits="value=visibleLabel,crop,accesskey,fadein,pinned,selected"
             class="tab-text tab-label"
             role="presentation"/>
  <xul:toolbarbutton anonid="close-button"
                     xbl:inherits="fadein,pinned,selected"
                     class="tab-close-button close-icon"/>
</xul:hbox>