17

重複の可能性:
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 を使用するにはどうすればよいですか?

4

6 に答える 6

32

Chromeのユーザー スクリプトの実装に関する設計ドキュメントには、次の既知の問題が記載されています。

  • Chromium は、、、、、、またはをサポート@requireし@resourceていません。unsafeWindowGM_registerMenuCommandGM_setValueGM_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)})};
于 2011-07-26T05:38:50.403 に答える
10

これは素晴らしい記事です：jQueryとGreasemonkeyでうまく遊ぶ方法

説明した方法は、クロムでも機能します。

アップデート：

私はすべてのブラウザで機能するより良い方法を思いつきました。これについてはここで読むことができます。

于 2010-04-11T06:17:54.423 に答える
3

簡単な解決策 (実行可能な場合) は、縮小版の jQuery をグリースモンキー スクリプトにコピー ペーストするだけです。

// ==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!");
});
于 2010-04-06T22:40:41.177 に答える
3

Chrome での Greasemonkey サポートには、require ステートメントが含まれていません。Greasemonkey スクリプトではなく、拡張機能を作成した方がよいでしょう。

または、Google API を使用して jQuery をロードすることもできます。

于 2010-04-06T21:52:07.557 に答える
2

TamperMonkeyを使用してみてください。

あなたのスクリプトは私にとってはそのままで機能し、jQuery を利用する他の多くのユーザー スクリプトを作成しました。

于 2011-09-07T15:25:10.020 に答える
2

Content Scriptを使用して Chrome 拡張機能を作成するだけです。それは非常に簡単です：

マニフェスト.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');
});

この例では、マニフェスト ファイルで既にスクリプト"run at" : "document_end"が

また、ドキュメントでわかるように、jquery.min.js と main.js は manifest.json と同じフォルダーに含める必要があります。

于 2011-09-02T22:27:36.567 に答える