在谷歌的黑色导航栏中添加“Grooveshark”条目

Question

我正试图对谷歌的黑色导航栏(顶上的东西)做一个更具体的调整，我希望有一个按钮，您可以单击该按钮将当前的搜索查询转到Grooveshark的搜索中。

这基本上和你在谷歌上搜索东西时一样，你点击顶部的“YouTube”链接，它会搜索你在谷歌网站上输入的任何内容，在YouTube上。

在我刚开始编程(也是关于用户脚本的问题)之前，我曾向StackOverflow寻求帮助，但老实说，受访者在他们的回复中为我做了大部分工作，对此我表示歉意，因为这不是我的意图。正因为如此，我决定尽我所能自己做这件事，而且大部分时间我都自己做了(尽管有很多谷歌搜索:)

然而，现在所有的东西都在JSFiddle中工作，我很难将它移植到用户脚本并完成它。更具体地说，Grooveshark的徽标甚至没有出现在Google的网站上，而在预期的页面上使用我的用户脚本。我甚至将Google源代码的一部分复制到JSFiddle，看看它是否能在那里工作，它做到了。我对JavaScript还是很陌生的(比如：“我在今天之前还没有认真地使用过它)，因此，我花了一段时间才把这个脚本放在一起。

所以我的问题是：

1. 如何通过使用用户脚本使这段Javascript在Google的网站上工作呢？
2. 我在Grooveshark徽标中添加了一个“alt”属性，但是它在查看源代码或检查时不会显示在我的浏览器(chrome)中。为什么会这样，我该怎么解决呢？

下面是我到目前为止拥有的userscript：

// ==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());
});

提前感谢！

Answer 1

为什么它在Chrome中不能工作：

要在Firefox上运行这个程序，您需要安装Greasemonkey插件。同样，要在Chrome中运行它，您需要安装 坦佩猴子的延伸。

Chrome对用户脚本的支持是有限的，但它不支持@require和其他一些优点。省省点麻烦用坦佩猴子吧。

避免冲突：需要jQuery是好的，但不幸的是，由于Greasemonkey (现在的jQuery)的变化，它如果沙箱关闭，可能会与某些网站发生冲突。。为了避免潜在的冲突，请始终使用显式@grant来控制沙箱。

将元数据块的末尾更改为：

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

关于alt 属性的：

请记住，只有当图像由于某种原因没有加载时，才应该显示属性。正在加载图像吗？

也许您需要属性，因为它经常用于工具提示。

更改此代码段：

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";
}

对此：

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";
}

或者只需将图像的alt设置为"Grooveshark图标“，只需切换title。