如何从用户脚本中使用 Google 搜索 API 和 gSearch jQuery 插件？

Question

我正在尝试编写一个用户脚本（用于 Chrome），但我一直碰壁。我的第一个目标是让Scott Reed's gSearch jQuery plugin 通过脚本在任何页面上工作。

这是我从推挤 sn-ps 和示例中获得的脚本，我在这里和那里一起找到：

我遇到的错误是“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. 它不使用 Google API 密钥 - 这是（或至少是）搜索 API 所必需的。
6. Google 加载程序和 jQuery 在用户脚本环境中不能“玩得很好”。因此，我们使用addJS_Node 来加载 jQuery 而不是 Google 加载器。
7. 一般避免使用@include *（对于Chrome 用户脚本也可以使用@match）。仅定位您希望脚本在其上运行的网站。
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);
}