37

「ページ アクション」Google Chrome 拡張機能を開発しています。私のマニフェストは次のとおりです。

...
"background": { "scripts": ["background.js"] },
...

私の background.js ファイルには次のものがあります。

function doSomething() {
     alert("I was clicked!");
}

chrome.pageAction.onClicked.addListener(doSomething);

これは機能します。私のdoSomething関数では、現在のページのデータを読みたいと思っています。jqueryを使用してデータを読み取る方がはるかに簡単なので、必要な正確なデータを簡単にターゲットにできます。jquery (できれば Google の CDN から提供される) を組み込んで、doSomething関数にアクセスできるようにするにはどうすればよいですか?

4

4 に答える 4

71

の"background"仕様では、 の前にロードされるようにmanifest.json指定する必要があります。jquery.jsbackground.js

...
"background": { "scripts": ["jquery.js","background.js"] },
...

これでうまくいくはずです。
js ファイルは、指定された順序でロードされることに注意してください。

jquery がロードされているかどうかをテストします。

background.js で

if (jQuery) {  
    // jQuery loaded
} else {
    // jQuery not loaded
}
于 2013-01-02T12:39:27.623 に答える
10

これが理想的な方法かどうかはわかりませんが、次の質問の助けを借りて機能させることができました: Google Chrome 拡張機能: プログラムで挿入されたコンテンツ スクリプトに jQuery を含める方法は? .

どうやら「バックグラウンド」の JavaScript ページはブラウザーの Web ページの DOM にアクセスできないため、バックグラウンド スクリプトで jquery をロードしても意味がありません。代わりに、バックグラウンド スクリプトをプログラムで jQuery ライブラリに挿入し、次にコンテンツ スクリプトを現在の Web ページに挿入します。コンテンツ スクリプトは (バックグラウンド スクリプトとは異なり) Web ページの情報にアクセスできます。

background.js:

function handleClick(tab) {
    chrome.tabs.executeScript(null, { file: "jquery-1.8.2.min.js" }, function() {
        chrome.tabs.executeScript(null, { file: "content.js" });
    });
}

chrome.pageAction.onClicked.addListener(handleClick);

content.js

var text = jQuery('h1').text();
alert('inside content! ' + text);
于 2012-10-25T23:54:08.720 に答える
1

私の理解では、background.js を使用する必要はありません。代わりに popup.js にコードを含めることができます。したがって、マニフェスト ファイルにも何も含める必要はありません。

jQuery JS と popup.js を popup.html に含めることをお勧めします。

<script src="/js/jquery-1.8.1.min.js"></script>
<script src="/js/popup.js"></script>

次に、popup.js で jQuery にアクセスできるようにする必要があるため、eventHandler は次のようになります。

$(document).ready(function(){
 $('#anyelement').on('click', doSomething);

 function doSomething(){
   alert ('do something');
 };
})

jQueryにCDNが必要な理由はわかりません。すべてのファイルはユーザーのマシンでホストされます。

お役に立てば幸いです、ロブ

于 2012-10-25T09:03:46.160 に答える
0

content_scriptsマニフェスト ファイルでは、ブロック内でローカルの jquery.js ファイル (名前に関係なく) を参照していることを確認してください。

"content_scripts": [{
    "js": ["jquery.js"]
}]

これにより、crx ファイルに埋め込まれ、他のスクリプトからアクセスできるようになります。

于 2012-10-25T09:18:33.720 に答える