Question

正如你们中的一些人所知，Google Chrome对Greasemonkey脚本有一些严重的限制。

Chromium不支持@require，@resource，unsafeWindow，GM_registerMenuCommand，GM_setValue或GM_getValue。

如果没有要求，我找不到在Google Chrome浏览器下的Greasemonkey脚本中包含jQuery库的方法。

有人在这件事上有一些建议吗？

Answer 1

来自"User Script Tip: Using jQuery - Erik Vold's Blog"

// ==UserScript==
// @name         jQuery For Chrome (A Cross Browser Example)
// @namespace    jQueryForChromeExample
// @include      *
// @author       Erik Vergobbi Vold & Tyler G. Hicks-Wright
// @description  This userscript is meant to be an example on how to use jQuery in a userscript on Google Chrome.
// ==/UserScript==

// a function that loads jQuery and calls a callback function when jQuery has finished loading
function addJQuery(callback) {
  var script = document.createElement("script");
  script.setAttribute("src", "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js");
  script.addEventListener('load', function() {
    var script = document.createElement("script");
    script.textContent = "window.jQ=jQuery.noConflict(true);(" + callback.toString() + ")();";
    document.body.appendChild(script);
  }, false);
  document.body.appendChild(script);
}

// the guts of this userscript
function main() {
  // Note, jQ replaces $ to avoid conflicts.
  alert("There are " + jQ('a').length + " links on this page.");
}

// load jQuery and execute the main function
addJQuery(main);

Answer 2

我已经编写了一些基于Erik Vold's script的函数来帮助我运行文档中的运行函数，代码和其他脚本。您可以使用它们将jQuery加载到页面中，然后在全局window范围内运行代码。

使用示例

// ==UserScript==
// @name           Example from http://stackoverflow.com/q/6834930
// @version        1.3
// @namespace      http://stackoverflow.com/q/6834930
// @description    An example, adding a border to a post on Stack Overflow.
// @include        http://stackoverflow.com/questions/2246901/*
// ==/UserScript==

var load,execute,loadAndExecute;load=function(a,b,c){var d;d=document.createElement("script"),d.setAttribute("src",a),b!=null&&d.addEventListener("load",b),c!=null&&d.addEventListener("error",c),document.body.appendChild(d);return d},execute=function(a){var b,c;typeof a=="function"?b="("+a+")();":b=a,c=document.createElement("script"),c.textContent=b,document.body.appendChild(c);return c},loadAndExecute=function(a,b){return load(a,function(){return execute(b)})};

loadAndExecute("//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js", function() {
    $("#answer-6834930").css("border", ".5em solid black");
});

你可以click here安装它，如果你相信我不是想欺骗你安装恶意软件并且没有人编辑我的帖子指向别的东西。重新加载页面，你应该在我的帖子周围看到一个边框。

功能

`load(url, onLoad, onError)`

将url处的脚本加载到文档中。可选地，可以为onLoad和onError提供回调。

`execute(functionOrCode)`

将一个函数或一串代码插入到文档中并执行它。这些函数在插入之前会转换为源代码，因此它们会丢失当前的范围/闭包，并在全局window范围内运行。

`loadAndExecute(url, functionOrCode)`

捷径;这将从url加载脚本，然后在成功时插入并执行functionOrCode。

代码

function load(url, onLoad, onError) {
    e = document.createElement("script");
    e.setAttribute("src", url);

    if (onLoad != null) { e.addEventListener("load", onLoad); }
    if (onError != null) { e.addEventListener("error", onError); }

    document.body.appendChild(e);

    return e;
}

function execute(functionOrCode) {
    if (typeof functionOrCode === "function") {
        code = "(" + functionOrCode + ")();";
    } else {
        code = functionOrCode;
    }

    e = document.createElement("script");
    e.textContent = code;

    document.body.appendChild(e);

    return e;
}

function loadAndExecute(url, functionOrCode) {
    load(url, function() { execute(functionOrCode); });
}

Answer 3

通过调用jQuery.noConflict(true)，使用jQuery 而不用担心发生冲突。像这样：

function GM_main ($) {
    alert ('jQuery is installed with no conflicts! The version is: ' + $.fn.jquery);
}

add_jQuery (GM_main, "1.7.2");

function add_jQuery (callbackFn, jqVersion) {
    jqVersion       = jqVersion || "1.7.2";
    var D           = document;
    var targ        = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
    var scriptNode  = D.createElement ('script');
    scriptNode.src  = 'http://ajax.googleapis.com/ajax/libs/jquery/'
                    + jqVersion
                    + '/jquery.min.js'
                    ;
    scriptNode.addEventListener ("load", function () {
        var scriptNode          = D.createElement ("script");
        scriptNode.textContent  =
            'var gm_jQuery  = jQuery.noConflict (true);\n'
            + '(' + callbackFn.toString () + ')(gm_jQuery);'
        ;
        targ.appendChild (scriptNode);
    }, false);
    targ.appendChild (scriptNode);
}

但是，对于跨浏览器脚本，为什么不尽可能利用jQuery的快速本地副本？

以下版本可用作Chrome用户脚本和Greasemonkey脚本，如果平台支持，则使用jQuery的本地@require版本。

// ==UserScript==
// @name     _Smart, cross-browser jquery-using script
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @grant    GM_info
// ==/UserScript==

function GM_main ($) {
    alert ('jQuery is installed with no conflicts! The version is: ' + $.fn.jquery);
}

if (typeof jQuery === "function") {
    console.log ("Running with local copy of jQuery!");
    GM_main (jQuery);
}
else {
    console.log ("fetching jQuery from some 3rd-party server.");
    add_jQuery (GM_main, "1.7.2");
}

function add_jQuery (callbackFn, jqVersion) {
    var jqVersion   = jqVersion || "1.7.2";
    var D           = document;
    var targ        = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
    var scriptNode  = D.createElement ('script');
    scriptNode.src  = 'http://ajax.googleapis.com/ajax/libs/jquery/'
                    + jqVersion
                    + '/jquery.min.js'
                    ;
    scriptNode.addEventListener ("load", function () {
        var scriptNode          = D.createElement ("script");
        scriptNode.textContent  =
            'var gm_jQuery  = jQuery.noConflict (true);\n'
            + '(' + callbackFn.toString () + ')(gm_jQuery);'
        ;
        targ.appendChild (scriptNode);
    }, false);
    targ.appendChild (scriptNode);
}

Answer 4

如果页面已经有jQuery，那么只需按照以下模板：

// ==UserScript==
// @name          My Script
// @namespace     my-script
// @description   Blah
// @version       1.0
// @include       http://site.com/*
// @author        Me
// ==/UserScript==

var main = function () {

    // use $ or jQuery here, however the page is using it

};

// Inject our main script
var script = document.createElement('script');
script.type = "text/javascript";
script.textContent = '(' + main.toString() + ')();';
document.body.appendChild(script);

Answer 5

简单的方法是使用required关键字：

// @require     http://code.jquery.com/jquery-latest.js

Answer 6

当这些脚本实际上没有使用任何特权功能（GM_ *函数等）时，有一种非常简单的方法可以包括jQuery for Chrome脚本的完整副本 ...

只需将脚本本身插入页面DOM并执行即可！最好的部分是这种技术在Firefox + Greasemonkey上同样适用，所以你可以使用相同的脚本：

var script = document.createElement("script"); script.type = "text/javascript"; script.textContent = "(" + threadComments.toString() + ")(jQuery)"; document.body.appendChild(script); function threadComments($) { // taken from kip's http://userscripts-mirror.org/scripts/review/62163 var goodletters = Array('\u00c0','\u00c1','\u00c2','\u00c3','\u00c4','\u00c5','\u00c6','\u00c7' ,'\u00c8','\u00c9','\u00ca','\u00cb','\u00cc','\u00cd','\u00ce','\u00cf' ,'\u00d1','\u00d2','\u00d3','\u00d4','\u00d5','\u00d6' ,'\u00d8','\u00d9','\u00da','\u00db','\u00dc','\u00dd' ,'\u00e0','\u00e1','\u00e2','\u00e3','\u00e4','\u00e5','\u00e6','\u00e7' ,'\u00e8','\u00e9','\u00ea','\u00eb','\u00ec','\u00ed','\u00ee','\u00ef' ,'\u00f1','\u00f2','\u00f3','\u00f4','\u00f5','\u00f6' ,'\u00f8','\u00f9','\u00fa','\u00fb','\u00fc','\u00fd' ,'\u00ff').join(''); // from Benjamin Dumke's http://userscripts-mirror.org/scripts/review/68252 function goodify(s) { good = new RegExp("^[" + goodletters + "\\w]{3}"); bad = new RegExp("[^" + goodletters + "\\w]"); original = s; while (s.length >3 && !s.match(good)) { s = s.replace(bad, ""); } if (!s.match(good)) { // failed, so we might as well use the original s = original; } return s; } in_reply_to = {}; function who(c, other_way) { if (other_way) { // this is closer to the real @-reply heuristics m = /@(\S+)/.exec(c); } else { m = /@([^ .:!?,()[\]{}]+)/.exec(c); } if (!m) {return} if (other_way) {return goodify(m[1]).toLowerCase().slice(0,3);} else {return m[1].toLowerCase().slice(0,3);} } function matcher(user, other_way) { if (other_way) { return function () { return goodify($(this).find(".comment-user").text()).toLowerCase().slice(0,3) == user } } else { return function () { return $(this).find(".comment-user").text().toLowerCase().slice(0,3) == user } } } function replyfilter(id) { return function() { return in_reply_to[$(this).attr("id")] == id; } } function find_reference() { comment_text = $(this).find(".comment-text").text(); if (who(comment_text)) { fil = matcher(who(comment_text)); all = $(this).prevAll("tr.comment").filter(fil); if (all.length == 0) { // no name matched, let's try harder fil = matcher(who(comment_text, true), true); all = $(this).prevAll("tr.comment").filter(fil); if (all.length == 0) {return} } reference_id = all.eq(0).attr("id"); in_reply_to[$(this).attr("id")] = reference_id; } } // How far may comments be indented? // Note that MAX_NESTING = 3 means there are // up to *four* levels (including top-level) MAX_NESTING = 3 // How many pixels of indentation per level? INDENT = 30 function indenter(parent) { for (var i = MAX_NESTING; i > 0; i--) { if (parent.hasClass("threading-" + (i-1)) || (i == MAX_NESTING && parent.hasClass("threading-" + i))) { return function() { $(this).addClass("threading-" + i).find(".comment-text").css({"padding-left": INDENT*i}); } } } return function() { $(this).addClass("threading-1").find(".comment-text").css({"padding-left": INDENT}); } } function do_threading(){ id = $(this).attr("id"); replies = $(this).nextAll("tr.comment").filter(replyfilter(id)); ind = indenter($(this)); replies.each(ind); replies.insertAfter(this); } function go() { $("tr.comment").each(find_reference); $("tr.comment").each(do_threading); } $.ajaxSetup({complete: go}); go(); }

（在meta.stackoverflow上从Shog9偷偷偷走了，因为他没有把它移到这里，我必须删除元文章..）

Answer 7

此外，您可以使用jQuery将脚本打包到Chrome扩展程序。请参阅Google Chrome's Content Scripts。

Chrome扩展程序与Greasemonkey脚本不同，可以自动更新。

Answer 8

更简单的解决方案：将jquery.min.js的内容剪切并粘贴到用户脚本的顶部。完成。

我发现了推荐答案的各种问题。 addJQuery（）解决方案适用于大多数页面，但在许多页面上都有错误。如果遇到问题，只需将jquery内容复制并粘贴到脚本中即可。

Answer 9

我想知道你的GM脚本ala中是否不能依赖document.defaultView.jQuery

if (document.defaultView.jQuery) {
  jQueryLoaded(document.defaultView.jQuery);
} else {
  var jq = document.createElement('script');
  jq.src = 'http://jquery.com/src/jquery-latest.js';
  jq.type = 'text/javascript';
  document.getElementsByTagName('head')[0].appendChild(jq);
  (function() { 
    if (document.defaultView.jQuery) jQueryLoaded(document.defaultView.jQuery);
    else setTimeout(arguments.callee, 100);
  })();
}

function jQueryLoaded($) {
  console.dir($);
}

Answer 10

另一种方法是修改脚本以手动加载jQuery。 http://joanpiedra.com/jquery/greasemonkey/的示例：

// Add jQuery
var GM_JQ = document.createElement('script');
GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';
GM_JQ.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(GM_JQ);

// Check if jQuery's loaded
function GM_wait() {
    if(typeof unsafeWindow.jQuery == 'undefined') { window.setTimeout(GM_wait,100); }
else { $ = unsafeWindow.jQuery; letsJQuery(); }
}
GM_wait();

// All your GM code must be inside this function
function letsJQuery() {
    alert($); // check if the dollar (jquery) function works
}

编辑：DRATS！测试后显示此代码无效，因为Google Chrome会在与实际网页不同的范围/流程中运行用户脚本/扩展程序。您可以使用XmlhttpRequest下载jQuery代码，然后Eval它，但您必须在允许Cross-Origin Resource Sharing使用Access-Control-Allow-Origin: *标头的服务器上托管代码。遗憾的是NONE of the current CDNs jQuery支持这个。

Answer 11

将jQuery嵌入Chrome控制台的完美扩展程序尽可能简单。如果jQuery已经嵌入到页面中，这个扩展也会提出异议。

此扩展用于将jQuery嵌入到您想要的任何页面中。它允许在控制台shell中使用jQuery（您可以通过“Ctrl + Shift + j”调用Chrome控制台）。

要将jQuery嵌入到选定的选项卡中，请单击“扩展”按钮。

链接到扩展程序：https://chrome.google.com/extensions/detail/gbmifchmngifmadobkcpijhhldeeelkc

如何在Google Chrome中的Greasemonkey脚本中使用jQuery？

11 个答案:

使用示例

功能

`load(url, onLoad, onError)`

`execute(functionOrCode)`

`loadAndExecute(url, functionOrCode)`

代码