2

Chrome 拡張機能でのメッセージ パッシングに関する多くの質問を確認しましたが、これに特に関連するものはあまり見つかりませんでした。

chrome.devtools* API を使用していますが、開発者ツールバーがドッキングされているときに、コンテンツ スクリプト間でメッセージを送信できません。ドッキングしていないとき、つまりフローティングしているときは、すべて正常に動作します。

これが私がやっていることの簡単な例です。

devtools.js

chrome.devtools.panels.create("myExtension", "img/icon.png", 
    "/panel.html", function(extensionPanel) {

         var myData;  //this variable gets manipulated before a user 
                      //clicks on the panel  

         extensionPanel.onShown.addListener(function(panelWindow) {
             chrome.extension.sendMessage({greeting: "update my data", data: myData}, function(response) {});
        });
});

次に、バックグラウンド スクリプト (eventPage.js) でこのメッセージをリッスンし、それを panel.js に渡します。

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.greeting == "update my data"){
        chrome.tabs.sendMessage(sender.tab.id, {greeting: "show data", showResource: request.data}, function(response) {});
    }
});

そして最後に、panel.js (panel.html からロードされる) で「データの表示」呼び出しをリッスンします。

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
        if (request.greeting == "show data") {
            //do stuff with my data here

});

基本的に、devtools.js と panel.js の間でメッセージを渡す必要がありますが、それを行う唯一の方法は、バックグラウンド スクリプトを仲介として使用することです。

devtools.js -> background.js -> panel.js.

これは、開発ツール パネルがウィンドウにドッキングされていない限り、実際には正常に機能します。sendMessage() は -1 のタブ ID を除外しないため、ドッキングするとエラーが発生します。これは、開発ツールがウィンドウにドッキングされているときに、sender.tab.id が等しいものです。私も chrome.tabs.connect - 長持ちする接続 - を使ってみましたが、同じ問題に遭遇しました。

4

1 に答える 1

1

私も最近、その方法を知りました。

「Google Pagespeed」で使用される手法は、検査されたウィンドウのタブ ID を取得し、ポートを使用して拡張機能と背景の間で行き来することです。

拡張機能にメッセージを送信するときはいつでも、タブ ID を探してそのポートを取得します。

panel.js

// get the inspected windows tab id from the panel
var tabId = chrome.devtools.inspectedWindow.tabId;

// create the port
var port = chrome.extension.connect({name: 'connection'});

// keep track of the port and tab id on the background by
// sending the inspected windows tab id
port.postMessage(['connect', tabId])

eventPage.js

var activeListeners = {};

chrome.extension.onConnect.addListener(function(port) {
  port.onMessage.addListener(function(message) {
    if (message[0] === 'connect') {
      // get the tab id
      var tabId = message[1];

      // save the reference to the port
      activeListeners[tabId] = port;

      // make sure we clean up after disconnecting (closing the panel)
      activeListeners[tabId].onDisconnect.addListener(function() {
        delete activeListeners[tabId];
      });
    }
  });
});

これはあまり完全な説明ではありませんが、要点を理解していただければ幸いです。

于 2013-03-14T04:56:29.330 に答える