0

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

这是我从推送片段和示例中获得的脚本，我在这里和那里一起找到：

我遇到的错误是“ 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);
4

1 回答 1

0

问题中该代码的几个问题：

  1. 它正在发射主炮callback两次。
  2. 它不是加载 jQuery，而是使用 JQ 函数。
  3. 使用回调将动作链接到库加载的时间，请参见下面的代码。
  4. 不要“克隆和修改” addScripts。保持这些功能“原子”。
  5. 它不使用 Google API 密钥——这是（或至少是）搜索 API 所必需的。
  6. Google loader 和 jQuery 在用户脚本环境中不会“玩得很好”。因此我们使用addJS_Node加载 jQuery 而不是 Google 加载器。
  7. 一般避免@include *（也@match用于 Chrome 用户脚本）。仅针对您希望脚本在其上运行的站点。
  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);
}
于 2012-10-04T11:10:43.253 回答