Web Applications Stack Exchange is a question and answer site for power users of web applications. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

share|improve this question
Are you talking Ott the bookmarks bar or the Google nav bar that displays when you go to a Google website? – Dez Mar 18 '12 at 21:47
@Dez Yeah. About the new Google's black bar. – Garmen1778 Mar 18 '12 at 21:50
up vote 5 down vote accepted

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

share|improve this answer
This was awesome, but it does not work on the GMail page. Also, how do you keep the 'More' drop down? – asymptotically Dec 31 '12 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
share|improve this answer

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.

share|improve this answer

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);
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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