向Google的黑色导航栏添加“Grooveshark”条目

Question

我试图对Google的黑色导航栏进行调整（this thing at the top） 更具体地说，我想要有一个按钮，您可以点击以转置当前的搜索查询到Grooveshark的搜索。

它基本上是同样的事情，当你搜索在谷歌的东西，你打在顶部以“YouTube”链接，它搜索无论你在谷歌网站输入，在YouTube上。

在我刚刚接触编程时（也就是关于userscripts的问题），我已经问过StackOverflow寻求帮助，但老实说，受访者在回复中为我做了大部分工作，我很抱歉，因为这不是我的意图。 正因为如此，我决定我要做出我自己的这1，就像我可以，在大多数情况下，我做了（尽管有很多谷歌搜索:)

然而，现在一切工作中的JSFiddle，我有麻烦“移植”它userscript并最终定稿。 具体而言，该标志的Grooveshark甚至没有对谷歌的网站上显示，同时使用预期的页面我userscript。 我甚至将Google HTML源代码的一部分复制到JSFiddle中，以查看它是否可以在那里工作，并且它确实如此。 我还是相当新的JavaScript的（如：“我没有在今天之前任何严重的方式使用它），因此，我花了一段时间来把这个脚本一起。

所以我的问题是：

1. 如何通过使用userscript适应这段JavaScript对谷歌的网站工作？

2. 我为Grooveshark徽标添加了一个'alt'属性，但是在查看源代码或检查时，这并不会显示在我的浏览器（镶边）中。为什么是这样的，我该如何解决？

这里的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中运行这个，你需要安装the Tampermonkey extension。

对Chrome的限制，userscripts原生支持，但它不支持@require和一堆其他的好东西。省去一些麻烦并使用Tampermonkey。

避免冲突：要求jQuery是好的，但不幸的是，由于Greasemonkey（和现在的Tampermonkey）的变化，它can cause conflicts with some websites if the sandbox is switched off。为避免潜在冲突，请始终使用明确的@grant来控制沙箱。

更改您的metadata block在2002年底：

// @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图标”，只有切换title。