Question

我有一个要搜索的自定义Chrome开发工具扩展面板。该面板和搜索是通过此代码（在devtools.js中）设置的。

chrome.devtools.panels.create("SF Assist", "assets/logo64.png", "panel.html", function (panel) {
panel.onSearch.addListener(function (event) {
    alert('search');
});

}）;

这将加载panel.html，而html将加载panel.js，后者将构建选项卡的内容。 Panel.js与被检查的选项卡进行通信，并向后拉很多信息。当用户在开发面板中进行搜索时，上面的代码将钩住onSearch事件。数据在panel.js中，但是挂钩在上面。如何从此代码与我的panel.js通信？

Answer 1

如评论中所述，devtools.js和panel.js之间的通信是通过消息传递。需要将消息传递添加到devtools，panel.js已经具有用于与后台脚本进行通信的侦听器设置。

devtools.js

chrome.devtools.panels.create("SF Assist", "assets/logo64.png", "panel.html", function (panel) {
    chrome.runtime.onConnect.addListener(function (port) {
        console.log('dev tools connect listener', port);
        var extensionListener = function (message, sender, sendResponse) {
            console.log('dev tools listener received message', message, port);
        }
        port.onMessage.addListener(extensionListener);

        var searchPanel = function (event, queryString) {
            console.log('dev tools search', event, queryString);
            port.postMessage(...);
        }
        panel.onSearch.addListener(searchPanel);
    });
});

在Chrome扩展面板中处理搜索

1 个答案: