2

我已经检查了许多关于在 Chrome 扩展中传递消息的问题，但我没有发现很多与此相关的具体问题。

我正在使用 chrome.devtools* API，当开发人员工具栏停靠时，我无法在内容脚本之间发送消息。当它没有停靠（即浮动）时，一切正常。

这是我正在做的一个简短示例。

开发工具.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 并获取其端口。

面板.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])

事件页面.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 回答