Question

我正在编写Chrome Devtools扩展程序，我的流程非常基础：

点击面板上的按钮，向背景发送消息
后台接收消息，向内容脚本发送消息
内容脚本接收消息，执行javascript，在完成时发回消息
后台脚本接收消息，向我的open devtools扩展程序的所有实例发送消息。

问题是，我只想将消息发送到发送请求的devtools的选项卡/实例，而不是所有当前打开的devtools实例。

这是我的devtools.js（它主要是从另一个例子中复制/粘贴，我会在我再次找到它后给予评论）：

    chrome.devtools.panels.create('Test', '/icon.png', '/panel.html', function(extensionPanel) {
    var _window; // Going to hold the reference to panel.html's `window`

    var data = [];
    var port = chrome.runtime.connect({name: 'fav'});
    port.onMessage.addListener(function(msg) {
        // Write information to the panel, if exists.
        // If we don't have a panel reference (yet), queue the data.
        if (_window) {
            if(msg.type && msg.type === 'taborder_list') {
                _window.fav.receive_taborder(msg);
            } else {
                _window.fav.receive_request(msg);
            }

        } else {
            data.push(msg);
        }
    });

    extensionPanel.onShown.addListener(function tmp(panelWindow) {
        extensionPanel.onShown.removeListener(tmp); // Run once only
        _window = panelWindow;

        // Release queued data
        var msg;
        while (msg = data.shift()) 
            _window.fav.receive_request(msg);
        // Just to show that it's easy to talk to pass a message back:
        _window.respond = function(msg) {
            port.postMessage(msg);
        };
    });
});

这是我的background.js：

var ports = [];
chrome.runtime.onConnect.addListener(function(port) {
    if (port.name !== "fav") return;
    ports.push(port);
    // Remove port when destroyed (eg when devtools instance is closed)
    port.onDisconnect.addListener(function() {
        var i = ports.indexOf(port);
        if (i !== -1) ports.splice(i, 1);
            chrome.windows.getCurrent(function(win) {
                chrome.tabs.getAllInWindow(win.id, function(tabs) {
                    var activeTab;
                    $(tabs).each(function(i,v) {
                        if(v.active === true) {
                            activeTab = tabs[i]['id'];
                        }
                    });
                    chrome.tabs.sendRequest(activeTab, {greeting: 'all_off'});
                });
            });      
    });
    port.onMessage.addListener(function(msg) {
        // Received message from devtools. Do something:
        console.log('Received message from devtools page', msg);

        chrome.windows.getCurrent(function(win) {
            chrome.tabs.getAllInWindow(win.id, function(tabs) {
                var activeTab;
                $(tabs).each(function(i,v) {
                    if(v.active === true) {
                        activeTab = tabs[i]['id'];
                    }
                });
                chrome.tabs.sendRequest(activeTab, msg)
            });
        });
    });
});
// Function to send a message to all devtools.html views:
function notifyDevtools(msg) {
    ports.forEach(function(port) {
        port.postMessage(msg);
    });
}

function listen_from_content(request, sender, sendResponse)
{
    ports.forEach(function(port) {
        port.postMessage(request);
    });
    sendResponse('hello');
}

chrome.runtime.onMessage.addListener(listen_from_content);

我意识到那里有一个forEach，这就是它将消息发送到每个标签的原因，但是我还没有找到一种方法只将它发送到请求面板。

最后，这是我从面板向后台发送消息的方式：

respond({name: 'fav', greeting: 'analyze'});

谢谢！

编辑：

我最终在打开的窗口中循环，并为每个端口分配了它的标签ID。

chrome.windows.getCurrent(function(win) {
  var activeTab;
  $(tabs).each(function(i,v) {
    if(v.active === true) {
      activeTab = tabs[i]['id'];
    }
  ports.activeTab = activeTab;
  ports.push(port);
});

这是在我的background.js中，在“chrome.runtime.onConnect”方法上。

Chrome devtools扩展程序仅将消息从后台发送到当前打开的标签

0 个答案: