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

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.

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.


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

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

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.

Leave a Reply