Technology Tales

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

Published on 27^th February 2011 Estimated Reading Time: 2 minutes

While adding more toolbars to Firefox is all very fine, 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 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 like a roundabout away of putting in place a space saver, but I can live with that.

Comments: