Replicating Google Chrome Browser Actions popup Effect in a Firefox Extension Replicating Google Chrome Browser Actions popup Effect in a Firefox Extension google-chrome google-chrome

Replicating Google Chrome Browser Actions popup Effect in a Firefox Extension


For everyone who is just starting with your first Firefox extension like I did here is an example code:

yourextname\chrome\content\browser.xul

<?xml version="1.0"?><?xml-stylesheet href="chrome://yourextname/skin/toolbar.css" type="text/css"?><overlay id="yourextname_overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">    <popupset>        <menupopup id="yourextname_menu_popup">            <menuitem label="Website" oncommand="gBrowser.selectedTab = gBrowser.addTab('http://www.your-website.com/');" />            <menuseparator />            <menuitem label="Options" oncommand="window.open('chrome://yourextname/content/options.xul', 'Options', 'dialog,chrome,modal,titlebar,toolbar,centerscreen=yes');" />        </menupopup>        <panel id="yourextname_popup" noautohide="false" noautofocus="true">            <label control="vvvname" value="Name:"/><textbox id="vvvname"/>        </panel>    </popupset>    <toolbarpalette id="BrowserToolbarPalette">        <toolbarbutton id="yourextname_toolbar_button" class="toolbarbutton-1" context="yourextname_menu_popup" oncommand="document.getElementById('yourextname_popup').openPopup(document.getElementById('yourextname_toolbar_button'), 'after_start', 0, 0, false, false);" label="button name" tooltiptext="tooltip" />    </toolbarpalette></overlay>

yourextname\skin\toolbar.css
This will add icon to the toolbar button:

#yourextname_toolbar_button {    list-style-image:url(chrome://yourextname/skin/icon_024.png);}toolbar[iconsize="small"] #yourextname_toolbar_button {    list-style-image:url(chrome://yourextname/skin/icon_016.png);}

yourextname\chrome.manifest

content yourextname chrome/content/overlay chrome://browser/content/browser.xul chrome://yourextname/content/overlay.xulskin    yourextname classic/1.0 skin/style   chrome://global/content/customizeToolbar.xul chrome://yourextname/skin/toolbar.css

NOTE: Make sure you replace all "yourextname" strings with something unique, best with your extension name.


In case anybody is researching this and trying to find out the answer, ultimately using a panel within the toolbarpalette in the browser.xul file worked well for me.