How to change links of the Google bar?

Question

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.

Answer 1

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];
    divContainingOrderedList.removeChild(orderedList);
    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
    divContainingOrderedList.appendChild(newOrderedList);
}

reformatList();

Answer 2

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() + ")();";
        document.body.appendChild(script);
      }, false);
      document.body.appendChild(script);
    }

    // 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")');

        calendar.insertAfter(gplus);
        gmail.insertAfter(gplus);

        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>';
        $(gvoiceLi).insertAfter(calendar);

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

    // load jQuery and execute the main function
    addJQuery(main);
}

Answer 3

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.

Answer 4

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)
    if(document.getElementById("gbzc"))
    {
        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)
    if(document.getElementById("gbzc"))
    {
        topMenu = document.getElementById("gbzc")

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

        // Remove it
        topMenu.removeChild(child);
    }
}

setTimeout(addEntry, 0);