为什么jQuery不能在Chrome用户脚本(Greasemonkey)中运行？

Question

可能重复:
如何在Google Chrome中的Greasemonkey脚本中使用jQuery？

我无法让此用户脚本在Google Chrome中运行.

// ==UserScript==
// @name           voip
// @namespace      1
// @description    voip
// @include        *
// @require        http://jquery.com/src/jquery-latest.js
// ==/UserScript==

$(document).ready(function() {  
        alert("Hello world!");
});

警报未显示.如果我只是放入alert("Hello world!");脚本,它就可以了.

如何在Chrome用户脚本中使用jQuery？

Answer 1

Chrome用户脚本实现的设计文档提到了这些已知问题:

• 铬不支持@require,@resource,unsafeWindow,GM_registerMenuCommand,GM_setValue,或GM_getValue.
• GM_xmlhttpRequest 只是同源.

这在Google Chrome下的GreaseMonkey脚本中包含Jquery的问题中得到解决.以下是我对这个问题的回答:

我已经根据Erik Vold的答案编写了一些函数来帮助我在文档中运行函数,代码和其他脚本.您可以使用它们将jQuery加载到页面中,然后在全局window范围内运行代码.

示例用法

// ==UserScript==
// @name           Example from https://stackoverflow.com/q/6825715
// @version        1.2
// @namespace      https://stackoverflow.com/q/6825715
// @description    An example, adding a border to a post on Stack Overflow.
// @include        https://stackoverflow.com/questions/2588513/*
// ==/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-6825715").css("border", ".5em solid black");
});

你可以点击这里安装它,如果你相信我不是想欺骗你安装恶意的东西,而且没有人编辑我的帖子指向别的东西.重新加载页面,你应该看到我的帖子周围的边框.

功能

load(url, onLoad, onError)

将脚本加载url到文档中.可选地,可以为onLoad和提供回调onError.

execute(functionOrCode)

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

loadAndExecute(url, functionOrCode)

捷径; 这将加载脚本url,然后插入并执行,functionOrCode如果成功.

码

来源CoffeeScript

我用CoffeeScript(一种编译成JavaScript的小语言)编写了这些文章.以下是您自己使用CofeeScript的CoffeeScript源代码.对于JavaScript用户,编译和缩小的代码包含在下面.

load = (url, onLoad, onError) ->
    e = document.createElement "script"
    e.setAttribute "src", url

    if onLoad? then e.addEventListener "load", onLoad
    if onError? then e.addEventListener "error", onError

    document.body.appendChild e

    return e

execute = (functionOrCode) ->
    if typeof functionOrCode is "function"
        code = "(#{functionOrCode})();"
    else
        code = functionOrCode

    e = document.createElement "script"
    e.textContent = code

    document.body.appendChild e

    return e

loadAndExecute = (url, functionOrCode) ->
    load url, -> execute functionOrCode

编译和缩小JavaScript(468个字符)

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)})};

Answer 2

这是一篇很好的文章:如何很好地使用jQuery和Greasemonkey

解释的方法也适用于铬.

更新:

我想出了一个适用于所有浏览器的更好的方法,你可以在这里阅读.

Answer 3

Chrome 中的 Greasemonkey 支持不包括 require 语句。您最好创建一个扩展而不是 Greasemonkey 脚本。

或者您可以使用 Google API 来加载 jQuery。