0

これは私がここに持っているものです：

「manifest.json」

{..."permissions": [
"https:/mywebsite.com/"],"content_scripts": [{
  "matches" : ["http://*/*", "https://*/*"],
  "js": ["js/jquery-1.7.2.min.js", "contentScript1.js", "contentScript2.js"],
  "all_frames" : true,
  "run_at": "document_end"
} ]}

「contentScript1.js」

$(document).ready(function() {
$('#someDiv').load('https://mywebsite.com/index.html');}

「contentScript2.js」

function showMessage()
{alert ('Hello World!');}

「index.html」

<a href="" onclick="showMessage();"> <img src="https://mywebsite.com/images/myimage.png"></a>

ここで実際に行っているのは、アクセスしているページのコードにクリック可能な画像を挿入することです。画像をクリックすると、「HelloWorld」メッセージが表示されることを期待しています。コンテンツスクリプトと画像が正常に読み込まれているにもかかわらず、画像をクリックしても関数が呼び出されず、コンソールに次のエラーが表示されます。

Uncaught ReferenceError：showMessageが定義されていません

コンテンツスクリプトではなく、コードを挿入したWebサイトで関数を探しているため、関数が見つからないと思います。しかし、それはなぜですか。つまり、画像をクリックするのではなく、ロード時にコンテンツスクリプト内で関数を呼び出すと、メッセージが表示されます。誰かが私をここから連れ出すことができますか？

4

2 に答える 2

1

私は自分の質問に答えるつもりだと思います：

これが発生する理由は、コンテンツスクリプトが孤立した世界で実行されるためです。http ：//code.google.com/chrome/extensions/content_scripts.html#execution-environmentを参照してください。

したがって、ユーザーの現在のページでいくつかの作業を実行するために、content_scriptsにHTMLコードを挿入すると、関数を呼び出すことはできません。

あなたがしなければならないことはあなたがhtmlコードでするようにあなたがページにあなたのスクリプトを注入することです。それで：

（1）マニフェストファイルのWebリソースに挿入するファイルを追加します。http ：//code.google.com/chrome/extensions/manifest.html#web_accessible_resourcesを参照してください。

"web_accessible_resources": [
"Script2.js",
 "index.html",
"jquery-1.7.2.min.js"]

（2）contentScript1.js内（これをcontent_scriptとしてロードします）

 //inject your javascript files to the head of the page
function injectJs(srcFile) {
   var scr = document.createElement('script');
   scr.type="text/javascript";
   scr.src=srcFile;
   document.getElementsByTagName('head')[0].appendChild(scr);
}

injectJs(chrome.extension.getURL('jquery-1.7.2.min.js'));
injectJs(chrome.extension.getURL('Script2.js'));

//inject your html by loading query and passing your html page
$(document).ready(function() {
$('#someDiv').load(chrome.extension.getURL('./index.html'));}

それで全部です！

于 2012-07-03T11:46:53.680 に答える
1

競合を回避するための私の解決策が現在のコードでは機能しないことを理解していませんでした。を使用する代わりに$.noConflict、スクリプトインジェクション関数を$().readyメソッドでラップしています。

"js"マニフェストの一部からjQueryを削除する必要があります。

  "js": ["contentScript1.js"],

とcontentScript1.js 

function injectJs(srcFile) {
    var scr = document.createElement('script');
    scr.src = srcFile;
    document.getElementsByTagName('head')[0].appendChild(scr);
}
injectJs(chrome.extension.getURL('js/jquery-min.js'));
injectJs(chrome.extension.getURL('js/yourscript.js'));

js/yourscript.jsに追加することを忘れないでくださいweb_accessible_resources。そうすれば、次のように使用できます。

"web_accessible_resources": [
    "index3.html",
    "js/jquery-min.js"
    "js/yourscript.js"
]

でjs/yourscript.js、関数ロジックを。と組み合わせて無名関数でラップします$.noConflict。$.noConflict(true)ページ内のスクリプトとの競合を回避するために使用されます。$およびの元の値を復元しますjQuery。

(function(jQuery, $) {
    // Here, you can do anything you want.
    // jQuery and $ refer to the same jQuery object from `js/jquery-min.js`

})(jQuery, jQuery.noConflict(true));

あなたの質問をもう一度見た後、あなたがajaxを介してコンテンツをロードしていることに気づきました：$('#someDiv').load(...)。スクリプトが挿入されると、ページのスコープ内で実行されます。これが、AJAX呼び出しが失敗する理由です。同一生成元ポリシーのためにリクエストがブロックされます。

これで、別のアプローチを使用してコードを修正できます。ロジックをコンテンツスクリプトからページに（挿入されたスクリプトによって）移動する代わりに、ページを変更しますindex.html。クリックイベントは事前設定されていませんが、コンテンツスクリプトに追加されています。例えば：

"index.html"：

<a href="" id="showMessage"> <img src="https://mywebsite.com/images/myimage.png"></a>

"contentscript2.js"：

$('#showMessage').click(showMessage);
于 2012-07-04T07:46:28.037 に答える