在 Chrome 扩展面板中处理搜索

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

如 cmets 中所述，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);
    });
});