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

时间:2010-04-06 21:34:19

标签: jquery google-chrome userscripts

  

可能重复:
  How can I use jQuery in Greasemonkey scripts in Google Chrome?

我无法让此用户脚本在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?

6 个答案:

答案 0 :(得分:32)

design document for Chrome's user script's implementation提到了这些已知问题:

  
      
  • Chromium不支持@require@resourceunsafeWindowGM_registerMenuCommandGM_setValueGM_getValue
  •   
  • GM_xmlhttpRequest仅限同源。
  •   

Include Jquery inside GreaseMonkey script under Google Chrome问题解决了这个问题。这是my answer from that question


我已根据Erik Vold's answer中的脚本编写了一些函数来帮助我运行文档中的运行函数,代码和其他脚本。您可以使用它们将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");
});

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

功能

load(url, onLoad, onError)

url处的脚本加载到文档中。可选地,可以为onLoadonError提供回调。

execute(functionOrCode)

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

loadAndExecute(url, functionOrCode)

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

代码

Source CoffeeScript

我在CoffeeScript(a little language that compiles to 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)})};

答案 1 :(得分:10)

答案 2 :(得分:3)

Chrome中的Greasemonkey支持不包含require语句。你最好创建一个extension而不是Greasemonkey脚本。

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

答案 3 :(得分:3)

简单的解决方案(如果可行的话)就是将jQuery的缩小版本粘贴到您的greasemonkey脚本中。

// ==UserScript==
// @name           voip
// @namespace      1
// @description    voip
// @include        *
// ==/UserScript==
//jQuery 1.4.2 minified code
(function(A,w){function ma(){if(!c.isReady){try{s.documentElement.doScroll...
....
A.jQuery=A.$=c})(window);
//your code
$(document).ready(function() {  
    alert("Hello world!");
});

答案 4 :(得分:2)

只需使用Content Script创建Chrome扩展程序即可。这很简单:

<强>的manifest.json

{
  "name": "Hello World",
  "version": "1.0",
  "description": "Greets the world",
  "content_scripts": [
    {
      "matches": ["*"],
      "css": ["main.css"],
      "js": ["jquery.min.js","main.js"],
      "run at":"document_end",
    }
  ]
}

<强> main.js

$(document).ready(function(){
    alert('Hello World');
});

值得指出的是,在此示例中,实际上不需要将警报包装在$(document).ready()中,因为清单文件已经指定脚本应该是"run at" : "document_end"

另外,正如您在文档中看到的那样,jquery.min.js和main.js必须与manifest.json包含在同一文件夹中

答案 5 :(得分:2)

尝试使用TamperMonkey

你的脚本按原样运行,我已经制作了许多使用jQuery的用户脚本。