如何從userscript使用Google Search API和gSearch jQuery插件？

Question

我正在努力拼湊一個用戶腳本（用於Chrome），並且我一直打牆。我的第一個目標是通過腳本在任何頁面上運行Scott Reed's gSearch jQuery plugin。

這裏是劇本我從搡片段和例子，我覺得在這裏和那裏，一起：

我這個得到的錯誤是「Uncaught TypeError: Cannot read property 'WebSearch' of undefined」。

// ==UserScript== 
// @name   Example 
// @version  1.2 
// @namespace  
// @description  
// @include * 
// ==/UserScript== 

function addScripts(callback) { 
    var script = document.createElement("script"); 
    script.setAttribute("src", "http://google.com/jsapi"); 
    script.addEventListener('load', function() { 
    var script = document.createElement("script"); 
    script.textContent = "(" + callback.toString() + ")();"; 
    document.body.appendChild(script); 
    }, false); 
    document.body.appendChild(script); 

    var script = document.createElement("script"); 
    script.setAttribute("src", "http://gsearch.scottreeddesign.com/js/jquery.gSearch-1.0-min.js"); 
    script.addEventListener('load', function() { 
    var script = document.createElement("script"); 
    script.textContent = "(" + callback.toString() + ")();"; 
    document.body.appendChild(script); 
    }, false); 
    document.body.appendChild(script); 
} 


function LoadGoogle() 
    { 
     if(typeof google != 'undefined' && google && google.load) 
     { 
      google.load("search", "1"); 
     } 
     else 
     { 
      // Retry later... 
      setTimeout(LoadGoogle, 30); 
     } 
    } 

LoadGoogle(); 

function main() { 

    $("#div").css("border", ".5em solid black"); 

    $('head').append('<link rel="stylesheet" href="http://gsearch.scottreeddesign.com/css/gSearch.css" type="text/css" />'); 

    $('body').append('<div id="search-results"></div>'); 


$('#div').click(
    function() { 

     $("#search-results").gSearch({search_text : 'example search'}); 

    }); 
} 

// load scripts and execute the main function 
addScripts(main); 

Answer 1

的若干問題與問題代碼：

1. 它發射的主要callback兩次。
2. 它不加載jQuery，但使用JQ函數。
3. 使用回調鏈行動的當庫加載，請參見下面的代碼。
4. 不要"Clone and Modify"addScripts。保持這些功能「原子」。
5. 它不使用谷歌的API密鑰 - 這是（或者至少是）所需的搜索API。
6. 谷歌加載器和jQuery不會在用戶腳本環境中「發揮不錯」。因此我們使用addJS_Node來加載jQuery而不是Google加載器。
7. 避免一般@include *（還可以使用@match爲Chrome userscripts）。只定位您希望腳本運行的站點。
8. 它使用id爲div一個節點，而是由代碼（也可能在大多數的網頁存在）創建沒有這樣的節點。

以下代碼可用作Chrome用戶腳本，Firefox Greasemonkey腳本以及其他瀏覽器。注意廣泛使用不同的回調和addJS_Node，通過時序問題，以及需要在Chrome將代碼注入需要的：

// ==UserScript== 
// @name _Google Search API and plugin demo 
// @match http://stackoverflow.com/questions/* 
// ==/UserScript== 

function GM_main() { 
    console.log ("Firing GM_main()."); 

    $("body").prepend ('<button id="gmSrchBtn">Run Google Search</button>') 
    $('head').append (
     '<link rel="stylesheet" href="http://gsearch.scottreeddesign.com/css/gSearch.css" type="text/css" />' 
    ); 
    $('body').prepend ('<div id="search-results"></div>'); 
    $('#gmSrchBtn').click (function() { 
     $("#search-results").gSearch ({ 
      search_text: 'example search' 
     }); 
    }); 
} 

/*--- Load: 
     1) Required/handy callbacks. 
     2) Google base API 
     3) Google search API 
     4) jQuery 
     5) The scottreeddesign jQuery plugin 
*/ 

function GM_targetScopeFunctions() { 
    window.gSearchApiIsLoaded = false; 

    window.gAPI_LoadedCB  = function() { 
     console.log ("Google base API loaded."); 
     google.load ("search", "1", {callback: gSearchAPI_LoadedCB}); 
    } 

    window.gSearchAPI_LoadedCB = function() { 
     console.log ("Google search API loaded."); 
     window.gSearchApiIsLoaded = true; 
    } 
} 

addJS_Node (null, null, GM_targetScopeFunctions); 
/*--- IMPORTANT! 
    You will most likely need to get and use an API key for any but demo searching. 
addJS_Node (null, "http://google.com/jsapi?callback=gAPI_LoadedCB&key=YOUR_API_KEY"); 
*/ 
addJS_Node (null, "http://google.com/jsapi?callback=gAPI_LoadedCB"); 
addJS_Node (
    null, 
    "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js", 
    null, 
    loadG_SrchPlugin 
); 
addJS_Node (GM_main); //-- Loads main but does not run yet. 

function loadG_SrchPlugin() { 
    console.log ("jQuery loaded."); 
    addJS_Node (
     null, 
     "http://gsearch.scottreeddesign.com/js/jquery.gSearch-1.0-min.js", 
     null, 
     function() { addJS_Node (null, null, fireMainAfterSearchApiLoaded); } 
    ); 

    function fireMainAfterSearchApiLoaded() { 
     var srchLoadedIntrvl = setInterval (checkForSrchAPI, 444); 

     function checkForSrchAPI() { 
      console.log ("In checkForSrchAPI()."); 
      if (gSearchApiIsLoaded) { 
       clearInterval (srchLoadedIntrvl); 
       GM_main(); 
      } 
     } 
    } 
} 

function addJS_Node (text, s_URL, funcToRun, runOnLoad) { 
    var D         = document; 
    var scriptNode       = D.createElement ('script'); 
    if (runOnLoad) { 
     scriptNode.addEventListener ("load", runOnLoad, false); 
    } 
    scriptNode.type       = "text/javascript"; 
    if (text)  scriptNode.textContent = text; 
    if (s_URL)  scriptNode.src   = s_URL; 
    if (funcToRun) scriptNode.textContent = '(' + funcToRun.toString() + ')()'; 

    var targ = D.getElementsByTagName ('head')[0] || D.body || D.documentElement; 
    targ.appendChild (scriptNode); 
}