3

Chrome拡張機能を作成しようとしています。ユーザーが私の拡張機能のアイコン（browserAction）をクリックすると、コンテンツスクリプトは開いているページ（現在のタブ）の本文に追加のdivを追加します。グーグルの検索ページとユーチューブを除くすべてのサイトで正常に動作します。エラーメッセージなどが表示されません。それは単に何の反応も与えません。

これはcontent.jsの私のコードです：

alert('sdsd');
$('body').append("<div id='popup'>My extension name</div>");

テスト目的でアラートを出しました。したがって、拡張機能を切り替えると、アラートメッセージが表示され、その後にdivが本文に追加されるのが理想的です。しかし、これら2つのサイトには当てはまりません。

ここで何がうまくいかない可能性があるか考えてみてください。

マニフェスト

{
    "name": "My first extension",
    "version": "1.0",
    "background": { "scripts": ["background.js"] },
    "content_scripts": [{
            "all_frames": true,
            "css": ["style.css"],
            "matches": ["http://*/*","https://*/*"]
        }],
    "permissions": [ "tabs","http://*/*" ],
    "browser_action": { "name": "test" },
    "manifest_version": 2
}

background.js

chrome.browserAction.onClicked.addListener(function(tab){
chrome.tabs.executeScript(null,{file:"jquery.min.js"},function(){
    chrome.tabs.executeScript(null,{file:"content.js"});
});

}）;

4

1 に答える 1

3

Youtubeのページでは、$は上書きされ、jQueryではありません。これは

bound: function ()
{
    return document.getElementById.apply(document, arguments)
}

したがって、コードは例外になりdocument.getElementById('body')ますundefined。

noConflict（）を使用してみてください。

編集 ：

プログラムで注入するのではなく、単にリストjQuery.min.jsして、自分の中に入れてみませんか。これにより、競合を回避できます。content.jscontent_scripts

編集2：

コンテンツスクリプトを使用するようになったので、ここで説明する通信をbackground.js使用して、アラートを表示するための指示をコンテンツスクリプトに送信する必要があります。

編集3：

別の解決策は、（最初​​に行ったように）プログラムによるインジェクションを使用し、jqueryを使用せず$('body').append("<div id='popup'>My extension name</div>");、バニラJSで次のように変換することでした。

var div = document.createElement('div');
div.id = 'popup';
document.body.appendChild(div);
document.getElementById('popup').innerHTML = "My extension name"​;​

ただし、プログラムによるインジェクションを回避する方が一般的にクリーンです（必要な権限が少なくて済みます）。

于 2012-10-23T18:54:15.403 に答える