web-dev-qa-db-ja.com

Googleでjqueryを使用する方法chrome拡張ページアクションbackground.js？

私は「ページアクション」グーグルchrome拡張機能を開発しています。マニフェストには次のものがあります。

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

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

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

chrome.pageAction.onClicked.addListener(doSomething);

これは動作します。 doSomething関数で、現在のページのデータを読みたいと思います。 jqueryを使用してデータを読み取る方がはるかに簡単になるため、必要なデータを簡単にターゲットにできます。 jquery（GoogleのCDNから提供されることが望ましい）を組み込み、doSomething関数からアクセスできるようにするにはどうすればよいですか？

jquerygoogle-chrome-extensioncontent-script
31
User

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

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

これは仕事をする必要があります。
jsファイルは指定された順序でロードされることに注意してください。

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

background.js内

if (jQuery) {  
    // jQuery loaded
} else {
    // jQuery not loaded
}
57
Jaydeep Solanki

これが理想的な方法かどうかはわかりませんが、この質問のヘルプを使用して機能させることができました： Google Chrome Extensions：jQueryをプログラム的に挿入する方法コンテンツスクリプト？ 。

どうやら、「バックグラウンド」のJavaScriptページはブラウザのWebページのDOMにアクセスできないため、jqueryのロードはバックグラウンドスクリプトでは実際には意味がありません。代わりに、バックグラウンドスクリプト programmatically inject jQueryライブラリを使用してから、コンテンツスクリプトを現在のWebページに挿入します。コンテンツスクリプト（バックグラウンドスクリプトとは異なります）can 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);
10
User

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

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

<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が必要な理由はないと思います。すべてのファイルはユーザーのマシンでホストされます。

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

3
robertp

マニフェストファイルでは、content_scriptsブロック：

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

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

0
Archer