Добавление записи «Grooveshark» в черную навигационную панель Google

Question

Я пытаюсь настроить панель черной навигации Google (this thing at the top) В частности, я хочу иметь кнопку, которую вы можете щелкнуть, чтобы транспонировать текущий поисковый запрос к поиску Гровешарка.

Это в основном то же самое, что и при поиске чего-то в Google, вы нажимаете ссылку «YouTube» вверху и просматриваете все, что вы вводили на веб-сайте Google, на YouTube.

Я попросил StackOverflow получить помощь до того, когда я был новичком в программировании (также вопросы, касающиеся пользовательских скриптов), но, честно говоря, респонденты выполнили большую часть работы для меня в своих ответах, из которых я приношу свои извинения, поскольку это не было моим намерением. Из-за этого я решил сделать это самостоятельно, насколько мог, и по большей части сделал (хотя и с большим количеством Google)

Однако, теперь, когда все работает в JSFiddle, у меня возникла проблема «портировать» его на userscript и завершить его. Чтобы быть более конкретным, логотип Grooveshark даже не отображается на веб-сайте Google при использовании моего имени пользователя на предполагаемых страницах. Я даже скопировал часть источника HTML Google в JSFiddle, чтобы увидеть, будет ли он работать там, и это произошло. Я до сих пор довольно новичок в JavaScript (как в: «Я не использовал его каким-либо серьезным образом до сегодняшнего дня»), и поэтому мне потребовалось некоторое время, чтобы свести этот сценарий вместе.

Так мои вопросы таковы:

1. Как адаптировать этот кусок JavaScript, чтобы работать на веб-сайте Google, с помощью userscript?

2. Я добавил атрибут «alt» для логотипа Grooveshark, но это не отображается в моем браузере (хром), когда он появляется при просмотре источника или проверке. Почему это и как я могу это исправить?

Вот 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.

Хром имеет ограниченную встроенную поддержку для пользователей, но он не поддерживает @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 значок", и только переключить title.