Javascript 添加一个'；Grooveshark'；进入谷歌'；s黑色导航栏

我正试图对谷歌的黑色导航栏（） 更具体地说，我希望有一个按钮，您可以单击该按钮将当前搜索查询转换为Grooveshark的搜索

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

在我刚开始编程之前，我曾向StackOverflow寻求帮助（也有关于用户脚本的问题），但老实说，受访者在他们的回复中为我做了大部分工作，对此我深表歉意，因为这不是我的本意。 正因为如此，我决定尽我所能自己制作这部电影，并且在很大程度上，我做到了（尽管通过大量的谷歌搜索：）

然而，现在一切都在运行，我很难将它“移植”到并完成它。 更具体地说，Grooveshark徽标甚至不会出现在Google的网站上，而是在预期页面上使用我的用户脚本。 我甚至将Google HTML源代码的一部分复制到JSFIDLE，看看它是否能在那里工作，它做到了。 我对JavaScript还是相当陌生（比如：“我在今天之前没有认真使用过它”），因此，我花了一段时间来编写这个脚本

所以我的问题是：

我如何通过使用用户脚本使这段Javascript在Google的网站上工作

我在Grooveshark徽标中添加了一个“alt”属性，但在我的浏览器（chrome）中不会显示该属性，而在查看源代码或检查时会显示该属性。为什么会这样，我该如何修复它

以下是我到目前为止的用户脚本：

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

---

提前谢谢

为什么它在Chrome中不起作用：
要在Firefox上运行此功能，您需要安装Greasemonkey插件。同样，要在Chrome中运行此功能，您需要安装

Chrome对用户脚本的本地支持有限，但它不支持

@require

和其他一些好东西。省去一些麻烦，使用Tampermonkey

避免冲突：要求使用jQuery是好的，但不幸的是，由于Greasemonkey（现在是Tampermonkey）中的更改，它不能使用jQuery。为避免潜在冲突，请始终使用显式的

@grant

来控制沙箱

将文件结尾更改为：

关于

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图标”，然后只切换

标题

为什么它在Chrome中不起作用：
要在Firefox上运行此功能，您需要安装Greasemonkey插件。同样，要在Chrome中运行此功能，您需要安装

Chrome对用户脚本的本地支持有限，但它不支持

@require

和其他一些好东西。省去一些麻烦，使用Tampermonkey

避免冲突：要求使用jQuery是好的，但不幸的是，由于Greasemonkey（现在是Tampermonkey）中的更改，它不能使用jQuery。为避免潜在冲突，请始终使用显式的

@grant

来控制沙箱

将文件结尾更改为：

关于

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

谢谢，我确实混淆了“alt”和“title”，因为我想要一个工具提示。我也按照你的建议做了：1。猴子，2。已更改元数据块和3。在我的脚本中将“alt”更改为“title”。在安装Tampermonkey之后，我也重新启动了chrome，以防万一。但不幸的是，脚本似乎不想工作。当我在包含的URL上访问Google时，Grooveshark徽标不会显示，当我单击Tampermonkey图标时，它表示没有运行任何用户脚本。。。有没有可能我把包裹搞乱了？有可能。我刚刚验证了它与Chrome 27.0.1453.116 m和TM 3.1.3440以及主英文站点（

http://www.google.com/

）。将您的确切脚本和URL粘贴到不起作用的地方。顺便说一句，前2个

@include

行无效，但它们不会破坏脚本。我们有相同版本的Chrome，但我的TM版本是3.2.3467。我的确切脚本：我正在使用的URL：（https协议）而且我要说的是，TM说没有脚本在运行。升级了我的TM，你的脚本在那个网站上仍然有效。也许你的剧本在里面？在TM的仪表板中，删除脚本（以及任何冲突的脚本），并从pastebin中以fresh格式粘贴新脚本（应该是安全编码）。确保选项看起来像。是的，扩展页面不是安装脚本的地方。好消息是TM使安装用户脚本变得更加容易。不再需要浏览Chrome的应用商店，或者只需拖动到扩展页面。至于定位。。。没有指针，它只是应用HTML和CSS。如果您需要帮助，请打开一个新问题。谢谢，我确实混淆了“alt”和“title”，因为我想要一个工具提示。我也按照你的建议做了：1。猴子，2。已更改元数据块和3。在我的脚本中将“alt”更改为“title”。在安装Tampermonkey之后，我也重新启动了chrome，以防万一。但不幸的是，脚本似乎不想工作。当我访问谷歌的网址时