Adding a 'Grooveshark' entry to Google's black navigation bar

Question

I'm trying to make a tweak to Google's black navigation bar (this thing at the top) More specifically, I want to have a button that you can click to transpose your current search query to Grooveshark's search.

It's basically the same thing as when you search for something on Google, you hit the 'YouTube' link at the top and it searches for whatever you input on Google's website, on YouTube.

I've asked StackOverflow for help before a while back when I was new to programming (also questions pertaining to userscripts), but honestly, the respondents did most of the work for me in their replies, which I apologize for, as this was not my intention. Because of this, I decided I wanted to make this one on my own as much as I could, and for the most part, I did (albeit with lots of Googling :)

However, now that everything is working in JSFiddle, I'm having trouble 'porting' it to userscript and finalizing it. To be more specific, the Grooveshark logo does not even show up on Google's website while using my userscript on the intended pages. I even copied part of the Google HTML source to JSFiddle to see if it would work there, and it did. I'm still rather new to JavaScript (as in: 'I have not used it in any serious manner before today') and as such, it took me a while to put this script together.

So my questions are these:

1. How do I adapt this piece of Javascript to work on Google's website by using a userscript?

2. I added an 'alt' attribute to the Grooveshark logo, but this does not show up in my browser (chrome) while it does when viewing source or inspecting. Why is this, and how do I fix it?

Here's the userscript I have so far:

// ==UserScript==
// @name           GoogleGroovesharkBar
// @description    Adds a 'Search on Grooveshark' option to Google's black navigation bar
// @include        google.com/*
// @include        google.nl/*
// @include        https://www.google.com/*
// @include        https://www.google.nl/*
// @include        http://www.google.com/*
// @include        http://www.google.nl/*
// @require        http://code.jquery.com/jquery-1.10.1.min.js

//by Soullesswaffle
//Versions : 0.8
// ==/UserScript==

function addGroove(retrievedText) {
    var bar = document.getElementById("gbzc");
    var grooveyImage = document.createElement("img");
    var link = document.createElement("a");
    var listy = document.createElement("li");
    grooveyImage.src = "http://cdn.androidpolice.com/wp-content/uploads/2012/08/nexusae0_146.png";
    grooveyImage.style.height = "28px";

    //grooveyImage.alt doesn't display in chrome for me, but when inspecting the element the alt attribute is present and correct.
    if (retrievedText === "") {
        link.href = "http://grooveshark.com";
        grooveyImage.alt = "Grooveshark";
    } else {
        link.href = "http://grooveshark.com/#!/search?q=" + retrievedText;
        grooveyImage.alt = "Search for '" + retrievedText + "' on Grooveshark";
    }

    //Nest and display everything
    link.appendChild(grooveyImage);
    listy.appendChild(link);
    listy.id = "grvshrkbtn";
    if (!document.getElementById("grvshrkbtn")) {
        bar.appendChild(listy);
    } else {
        bar.replaceChild(listy, document.getElementById("grvshrkbtn"));
    }
}

//Initialize
$(document).ready(function () {
    addGroove(document.getElementById("gbqfq").value);
});

//Watch textfield for changes
$("#gbqfq").bind("input", function () {
    addGroove($(this).val());
});

Thanks in advance!

Answer 1

Why it doesn't work in Chrome:
To run this on Firefox, you need to install the Greasemonkey add-on. Likewise, to run this in Chrome, you need to install the Tampermonkey extension.

Chrome has limited, native support for userscripts, but it doesn't support @require and a bunch of other goodies. Save yourself some hassle and use Tampermonkey.

Avoid conflicts: Requiring jQuery is good, but unfortunately, due to changes in Greasemonkey (and now Tampermonkey), it can cause conflicts with some websites if the sandbox is switched off. To avoid potential conflicts, always use an explicit @grant to control the sandbox.

Change the end of your metadata block to:

// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

About the alt attribute:
Remember that the alt attribute is only supposed to be displayed if the image doesn't load for some reason. Is the image loading?

Perhaps you want the title attribute, since it's often used for tooltips.
Change this code snippet:

if (retrievedText === "") {
    link.href = "http://grooveshark.com";
    grooveyImage.alt = "Grooveshark";
} else {
    link.href = "http://grooveshark.com/#!/search?q=" + retrievedText;
    grooveyImage.alt = "Search for '" + retrievedText + "' on Grooveshark";
}

to this:

if (retrievedText === "") {
    link.href = "http://grooveshark.com";
    grooveyImage.alt    = "Grooveshark icon supposed to be here";
    grooveyImage.title  = "Grooveshark";
} else {
    link.href = "http://grooveshark.com/#!/search?q=" + retrievedText;
    grooveyImage.alt    = "Grooveshark icon supposed to be here";
    grooveyImage.title  = "Search for '" + retrievedText + "' on Grooveshark";
}

Or just set the image's alt once to "Grooveshark icon", and only switch the title.