1

我正在尝试对 Google 的黑色导航栏（顶部的这个东西）进行调整。更具体地说，我想要一个按钮，您可以单击该按钮将您当前的搜索查询转换为 Grooveshark 的搜索。

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

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

但是，现在一切都在JSFiddle中工作，我无法将其“移植”到用户脚本并最终确定它。更具体地说，在目标页面上使用我的用户脚本时，Grooveshark 徽标甚至不会出现在 Google 的网站上。我什至将部分 Google HTML 源代码复制到 JSFiddle 以查看它是否可以在那里工作，并且确实如此。我对 JavaScript 还是很陌生（例如：'我今天之前没有以任何严肃的方式使用它'），因此，我花了一段时间才把这个脚本放在一起。

所以我的问题是：

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

  2. 我在 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());
});

提前致谢！

4

1 回答 1

1

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

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

避免冲突：需要 jQuery 是好的，但不幸的是，由于 Greasemonkey（现在是 Tampermonkey）的变化，如果关闭沙箱，可能会导致与某些网站发生冲突。为避免潜在的冲突，请始终使用显式@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属性：
请记住，仅当图像由于某种原因未加载时才应该显示该alt属性。图片加载了吗？

也许您想要属性，title因为它经常用于工具提示。
更改此代码段：

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.

于 2013-07-03T23:45:56.510 回答