Technology Tales

Adventures & experiences in contemporary technology

Making a custom button to hide or display the Google Toolbar in Firefox

27th February 2011

Adding more toolbars to Firefox is all very fine but they can take up space on the screen. Even with the big screens that many of us have these days, it’s still nice to be able to see more of what we use web browsers to visit: web pages. For the Web Developer extension’s toolbar, there is the Toggle Web Developer Toolbar plugin for showing and hiding the thing when so desired. As it happens, I keep it hidden until I need it and I fancied doing exactly the same thing with the Google Toolbar but found none. Instead, I happened on a tutorial that used the Custom Buttons plugin to define a custom button. That gives you an entry named Add new button… to the context menu that appears when you right-click on the main menu bar near the top of the Firefox window. When you select the that extra entry in the menu, you get the dialogue box that you see below.

Making a custom button to hide or display the Google Toolbar in Firefox

In there, that are some form fields that need filling. Button URL is an option without which you can do but I entered “Toggle Google Toolbar” into the Name field while also sourcing an image to be used on the button instead of the default (a Google logo, naturally…). The last step is to add the code below underneath the /*CODE*/ comment line, leaving the latter in place.

const toolbar = document.getElementById(“gtbToolbar”);
toolbar.collapsed = !toolbar.collapsed;

With all that completed, clicking on the OK button is all that’s needed to finish off the button definition. With that done, the next step is to add the button where you want it by right clicking on the top menu bar again and selecting the Customise… entry. From the list of buttons that appears, just pick the new one and drag it to where you want it to go. Then, you’re done with what might sound a roundabout away of putting in place a space saver but I can live with that.


  • JIM says:

    I made the button per instructions, installed it on the address bar, but it does not work for me. I am running firefox 4. I copied the data to put below the comment from the your website

    any suggestions? I really want it to work for space saving purposes. Thanks. –DJ

  • Jim says:

    What’s missing to make this work is that your web page does not provide the initialization code — which I found elsewhere and now it is working

  • John says:

    It’s odd that this didn’t work for you because this was all that I needed for things to perform as expected for me.

  • All the views that you find expressed on here in postings and articles are mine alone and not those of any organisation with which I have any association, through work or otherwise. As regards editorial policy, whatever appears here is entirely of my own choice and not that of any other person or organisation.

  • Please note that everything you find here is copyrighted material. The content may be available to read without charge and without advertising but it is not to be reproduced without attribution. As it happens, a number of the images are sourced from stock libraries like iStockPhoto so they certainly are not for abstraction.

  • With regards to any comments left on the site, I expect them to be civil in tone of voice and reserve the right to reject any that are either inappropriate or irrelevant. Comment review is subject to automated processing as well as manual inspection but whatever is said is the sole responsibility of the individual contributor.