Question

我对chrome devtools面板进行了扩展。我可以使用chrome.devtools.inspectedWindow.eval向页面发送消息...但是如何在开发面板中接收消息？具体来说，我需要我的devpanel来挂钩页面上发生的事件。我无法听到我的内容脚本上的事件，也没有后台页面。

我在内容脚本中尝试了chrome.extension.sendMessage，并在开发人员面板脚本中尝试了chrome.extension.onMessage.addListener。但是sendMessage抱怨Port error: Could not establish connection. Receiving end does not exist.

长期存在的问题依然存在：

在内容脚本或背景页面中：

var port = chrome.extension.connect({name: "test"});
port.postMessage({msg: "testing"});

在开发工具面板中javascript：

chrome.extension.onConnect.addListener(function(port) {
    port.onMessage.addListener(function(msg) {
         // never gets here
    });
 });

如何在我的开发工具面板中侦听在我的内容脚本中触发的事件？ Firefox的附加SDK中的这样的图表非常棒：https://addons.mozilla.org/en-US/developers/docs/sdk/latest/static-files/media/content-scripting-overview.png

Answer 1

目标是为通信创建一个通道（“端口”）。只要连接得到正确维护，端口的创建方式无关紧要。

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: 'devtools'});
    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) {
            _window.do_something(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.do_something(msg);
        // Just to show that it's easy to talk to pass a message back:
        _window.respond = function(msg) {
            port.postMessage(msg);
        };
    });
});

现在，面板能够通过端口发送/接收消息。面板的脚本（外部脚本文件，因为CSP）可能如下所示：

`panel.js`

function do_something(msg) {
    document.body.textContent += '\n' + msg; // Stupid example, PoC
}
document.documentElement.onclick = function() {
    // No need to check for the existence of `respond`, because
    // the panel can only be clicked when it's visible...
    respond('Another stupid example!');
};

现在，后台页面的脚本：

`background.js`

var ports = [];
chrome.runtime.onConnect.addListener(function(port) {
    if (port.name !== "devtools") 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);
    });
    port.onMessage.addListener(function(msg) {
        // Received message from devtools. Do something:
        console.log('Received message from devtools page', msg);
    });
});
// Function to send a message to all devtools.html views:
function notifyDevtools(msg) {
    ports.forEach(function(port) {
        port.postMessage(msg);
    });
}

要进行测试，只需在后台页面上运行notifyDevtools('Foo');（例如via the console）。在此演示中，消息将发送到所有devtools。收到后，devtools面板将包含收到的消息。

使用以下方法将扩展名放在一起：

`manifest.json`

{ "name": "Test",
  "manifest_version": 2,
  "version": "1",
  "devtools_page": "devtools.html",
  "background":{"scripts":["background.js"]}
}

`panel.html`

<script src="panel.js"></script> <!-- Doctype etc not added for conciseness-->

`devtools.html`

<script src="devtools.js"></script>

另见

How to modify content under a devtools panel in a Chrome extension?
chrome.devtools API
Message passing: Long-lived connections
Content Security Policy in Chrome extensions（“内联JavaScript（...）”不会被执行。此限制禁止内联<script>块和内联事件处理程序。“）

Chrome Devpanel扩展与背景页面通信

1 个答案: