11

私は Chrome 拡張機能の初心者であり、もちろんすべてのステップに固執しましたが、これは特に困難です。ばかげた間違いかもしれませんが、私がやろうとしていることは次のとおりです。

コンテンツ スクリプトからバックグラウンド ページに簡単なメッセージを送信し、それを変数として処理します。だから私は私のコンテンツスクリプトにこれを持っています:

$(document).ready(function() { 
    var d = document.domain;    
       chrome.extension.sendMessage({dom: d});  

 });

そして、私のバックグラウンドスクリプトではこれ：

chrome.extension.onMessage.addListener(function(request) {
    alert(request.dom);
});

したがって、アラートは正常に機能します。しかし、HTML 拡張機能ではなく、閲覧しているページに「移動」します。つまり、拡張機能ボタンをクリックしたときにポップアップするのではなく、ページの読み込み時にコンテンツ スクリプトにコード化されたように表示されます。

よろしくお願いします。

4

1 に答える 1

18

私のデモ拡張機能は次のとおりです

ファイルと役割

a) manifest.json (ドキュメント)

b) myscript.js (コンテンツ スクリプトはドキュメントを参照)

c) background.js (背景 HTML ファイルドキュメントを参照)

d) popup.html (ブラウザ アクション ポップアップドキュメントを参照)

e) popup.js (背景ページから変更された値の受容体)

マニフェスト.json

すべてのファイルを権限付きでマニフェスト (Viz 背景、ポップアップ、コンテンツ スクリプト) に登録しました

{
"name":"Communication Demo",
"description":"This demonstrates modes of communication",
"manifest_version":2,
"version":"1",
"permissions":["<all_urls>"],
"background":{
    "scripts":["background.js"]
},
"content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["myscript.js"]
    }
  ],
"browser_action":{
    "default_icon":"screen.png",
    "default_popup":"popup.html"
}  
}

myscript.js

バックグラウンド ページとの通信にsendMessage() APIを使用

var d = document.domain;
chrome.extension.sendMessage({
    dom: d
});

background.js

onMessage()およびonConnect()リスナーを使用して、Content および popup.js のイベント リスナーを追加しました。

var modifiedDom;
chrome.extension.onMessage.addListener(function (request) {
    modifiedDom = request.dom + "Trivial Info Appending";
});
chrome.extension.onConnect.addListener(function (port) {
    port.onMessage.addListener(function (message) {
        if (message == "Request Modified Value") {
            port.postMessage(modifiedDom);
        }
    });
});

popup.html

インライン スクリプトを回避するために popup.js を登録するサンプル ブラウザー アクション HTML ページ

<!doctype html>
<html>

    <head>
        <script src="popup.js"></script>
    </head>

    <body></body>

</html>

popup.js

結果を取得するためのバックグラウンド ページとの通信にPort\Long Lived Connectionを使用

var port = chrome.extension.connect({
    name: "Sample Communication"
});
port.postMessage("Request Modified Value");
port.onMessage.addListener(function (msg) {
    console.log("Modified Value recieved is  " + msg);
});

これがお役に立てば幸いです。さらに情報が必要な場合はお知らせください

于 2012-12-04T07:20:01.030 に答える