I'm using Chrome, and I want to change the links of the bar, but I don't know how. It could be a Greasemonkey script, but I don't know how to write it.

  • Are you talking Ott the bookmarks bar or the Google nav bar that displays when you go to a Google website? Mar 18, 2012 at 21:47
  • @Dez Yeah. About the new Google's black bar.
    – Garmen1778
    Mar 18, 2012 at 21:50
  • Google retired the Google bar some years ago.
    – ale
    May 23, 2018 at 14:31

4 Answers 4


The Rearrange Google Apps Menu Bar userscript should work pretty well for you.

It looks fairly simple to add or move items around as you wish. All the script does is remove the current list items and replace them with new ones.

So to add Google Docs to the list of links you would add in:

newOrderedList.innerHTML += '<li class=gbt><a target="_blank" class="gbzt" href="https://docs.google.com"><span class="gbtb2"></span><span class="gbts">Documents</span></a></li>';

Just or reference the full userscript is as follows:

// ==UserScript==
// @name          Rearrange Google Apps Menu Bar
// @namespace     http://divergentblue.com
// @version       0.1
// @description   Customizes the google black bar
// @include       *
// ==/UserScript==

function reformatList()
    // Remove the OL containing the nav links
    var divContainingOrderedList = document.getElementById('gbz');
    var orderedList = document.getElementById("gbz").getElementsByTagName("ol")[0];
    var newOrderedList = document.createElement("ol");
    newOrderedList.setAttribute("class", "gbtc");

    // Add Plus
    newOrderedList.innerHTML += '<li class=gbt><a target="_blank" class="gbzt" href="https://plus.google.com"><span class="gbtb2"></span><span class="gbts">+</span></a></li>';
    // Add Gmail
    newOrderedList.innerHTML += '<li class=gbt><a target="_blank" class="gbzt" href="https://mail.google.com"><span class="gbtb2"></span><span class="gbts">Gmail</span></a></li>';
    // Add Voice
    newOrderedList.innerHTML += '<li class=gbt><a target="_blank" class="gbzt" href="https://voice.google.com/"><span class="gbtb2"></span><span class="gbts">Voice</span></a></li>';
    // Add Calendar
    newOrderedList.innerHTML += '<li class=gbt><a target="_blank" class="gbzt" href="https://calendar.google.com/"><span class="gbtb2"></span><span class="gbts">Calendar</span></a></li>';
    // Add Contacts
    newOrderedList.innerHTML += '<li class=gbt><a target="_blank" class="gbzt" href="https://www.google.com/contacts"><span class="gbtb2"></span><span class="gbts">Contacts</span></a></li>';
    // Add Reader
    newOrderedList.innerHTML += '<li class=gbt><a target="_blank" class="gbzt" href="https://reader.google.com"><span class="gbtb2"></span><span class="gbts">Reader</span></a></li>';
    // Add News
    newOrderedList.innerHTML += '<li class=gbt><a target="_blank" class="gbzt" href="https://news.google.com"><span class="gbtb2"></span><span class="gbts">News</span></a></li>';
    // Add Finance
    newOrderedList.innerHTML += '<li class=gbt><a target="_blank" class="gbzt" href="https://finance.google.com"><span class="gbtb2"></span><span class="gbts">Finance</span></a></li>';

    // Add the OL to the DOM

  • This was awesome, but it does not work on the GMail page. Also, how do you keep the 'More' drop down? Dec 31, 2012 at 2:05

I made a userscript for Chrome that uses jQuery to move the Gmail and Calendar links just after the Google+ one. It uses this code by my colleague tghw to get jQuery added to the page. Update: this version also adds a google voice link

// ==UserScript==
// @name           Reorder Google links
// @namespace      http://adambox.org
// @description    Put the gmail and calendar links right after g+ where they belong
// ==/UserScript==

if (window.location.host.toLowerCase() == "www.google.com" || window.location.host.toLowerCase() == "mail.google.com")
    // a function that loads jQuery and calls a callback function when jQuery has finished loading
    function addJQuery(callback) {
      var script = document.createElement("script");
      var sProtocol = window.location.protocol;
      script.setAttribute("src", sProtocol + "//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js");
      script.addEventListener('load', function() {
        var script = document.createElement("script");
        script.textContent = "(" + callback.toString() + ")();";
      }, false);

    // the guts of this userscript
    function main() {
        var calendar = $('li.gbt:contains("Calendar")');
        var gplus = $('li.gbt:contains("+Adam")');
        var gmail = $('li.gbt:contains("Gmail")');


        var gvoiceLi = document.createElement("li");
        gvoiceLi.className = "gbt";
        gvoiceLi.innerHTML = '<a target="_blank" class="gbzt" href="https://www.google.com/voice"><span class="gbtb2"></span><span class="gbts">Voice</span></a>';

        var gplay = $('li.gbt:contains("Play")');

    // load jQuery and execute the main function

You can't do it without scripts.

I don't know for greasemonkey script but for chrome users there is a GTools+ extension in chrome web store that has the option to reorder google bar links.


Here a couple of hints, using Greasemonkey. I write the script really fast, it could be done better but maybe it helps. There is an example how to add a custom link after Google More and an example how to remove a link.

If you have questions, please comment and I will try to add more code.

function addEntry()
    // If you want to add a link (for example to Google Books)
        newItem = document.createElement("li");
        newItem.setAttribute("class", "gbt");
        newItem.innerHTML = '<a target="_blank" class="gbzt" href="http://books.google.com/"><span class="gbtb2"></span><span class="gbts">Books</span></a>';

        topMenu = document.getElementById("gbzc")

        // Get the total menu entries
        var totalEntries = topMenu.getElementsByTagName("li").length;

        // Insert a link to the one before the last
        topMenu.insertBefore(newItem, topMenu.getElementsByTagName("li")[totalEntries]);

    // If you want to remove a link (for example the first link to your Google+ profile)
        topMenu = document.getElementById("gbzc")

        // Get the first menu entry
        var child = topMenu.getElementsByTagName("li")[0];

        // Remove it

setTimeout(addEntry, 0);

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