javascript - 将 'Grooveshark' 条目添加到 Google 的黑色导航栏

Question

我正在尝试调整 Google 的黑色导航栏 ( this thing at the top ) 更具体地说，我想要一个按钮，您可以单击该按钮将当前的搜索查询转换为 Grooveshark 的搜索。

这与您在 Google 上搜索内容时的情况基本相同，您点击顶部的“YouTube”链接，它就会搜索您在 Google 网站 YouTube 上输入的任何内容。

不久前，当我刚接触编程时(还有与用户脚本有关的问题)，我曾向 StackOverflow 寻求帮助，但老实说，受访者在回复中为我做了大部分工作，对此我深表歉意，因为这不是我的本意。 正因为如此，我决定尽可能地自己制作这个，而且在大多数情况下，我做到了(尽管有很多谷歌搜索:)

但是，现在一切正常 JSFiddle ，我无法将其“移植”到 userscript并最终确定它。 更具体地说，当我在目标页面上使用我的用户脚本时，Grooveshark Logo 甚至不会显示在 Google 网站上。 我什至将 Google HTML 源代码的一部分复制到 JSFiddle，看看它是否能在那里工作，结果确实如此。 我对 JavaScript 还很陌生(例如:“今天之前我没有以任何认真的方式使用过它”)，​​因此，我花了一段时间才把这个脚本放在一起。

所以我的问题是:

1. 如何使用用户脚本修改这段 Javascript 以在 Google 网站上运行？

2. 我向 Grooveshark Logo 添加了“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());
});

提前致谢!

Answer 1

为什么它在 Chrome 中不起作用:
要在 Firefox 上运行此程序，您需要安装 Greasemonkey 插件。同样，要在 Chrome 中运行此程序，您需要安装 the Tampermonkey extension 。

Chrome 对用户脚本的原生支持有限，但它不支持 @require 和许多其他功能。使用 Tampermonkey 可以省去一些麻烦。

避免冲突:需要 jQuery 很好，但不幸的是，由于 Greasemonkey(现在是 Tampermonkey)的变化，它 can cause conflicts with some websites if the sandbox is switched off 。为了避免潜在的冲突，请始终使用显式的 @grant 来控制沙箱。

更改 metadata block 的结尾至:

// @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属性:
请记住the alt attribute仅当图像因某种原因未加载时才应显示。图片正在加载吗？

也许你想要the title attribute ，因为它经常用于工具提示。
更改此代码片段:

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