11

Chrome Browser Actions provide a really nice popup effect by default.

dead ImageShack image link removed

  • Hovering over the toolbar icon provides a neat hover effect.

  • Clicking the toolbar icon shows a nice animation that opens the popup html file.

  • The popup is aligned with the button that is pressed.

  • Clicking the toolbar icon again fades out the popup.

Any thoughts on how to approximate this effect with Firefox extensions? Has anybody successfully achieved something similar to this effect?

Thanks.

1
  • 1
    I've published a Jetpack module which brings the chrome.browserAction API and appearance to Firefox, see this answer for a demo.
    – Rob W
    Commented May 28, 2013 at 8:57

2 Answers 2

7

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.xul

skin    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.

4

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.

2
  • 5
    I was trying to find an answer to this question. Compared to Chrome, Firefox extensions seem like a big pain.
    – cnanney
    Commented Dec 11, 2010 at 6:11
  • 1
    Thanks Chris. For those of us getting started with FF, can you show some demo code? Cheers. Commented Jan 28, 2011 at 16:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.