Chrome扩展程序：无法向ID为-1的标签发送消息

Question

I've checked numerous questions regarding message passing in a Chrome extension but I haven't found much specifically relating to this.

I'm using the chrome.devtools* APIs and I'm having trouble sending messages between content scripts when the developer toolbar is docked. Everything works fine when it is not docked ie floating.

Here's a brief example of what I'm doing.

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) {});
        });
});

Then in my background script (eventPage.js) I listen for this message and pass it on to 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) {});
    }
});

And then finally I listen for the 'show data' call in my panel.js (which is loaded from panel.html)

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

});

Essentially, I need to pass messages between devtools.js to panel.js but the only way to do it is by using the background script as an intermediary.

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

This actually works fine as long as the dev tools panel is not docked to the window. When it is docked I get an error because sendMessage() won't except a tab id of -1, which is what sender.tab.id equals when the dev tools are docked to the window. I also tried using chrome.tabs.connect - long lasting connections - but ran into the same problem.

Answer 1

I also just found out recently how to do this.

A technique used by "Google Pagespeed" is to get the tab id of the inspected window and pass it back and forth between the extension and background using a port.

Whenever you want to send the extension a message, you look for the tab id and get its port.

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];
      });
    }
  });
});

This is not a very thorough explanation but I hope you get the point.