Поиск ручки в панели расширения Chrome

Question

У меня есть пользовательская панель расширения инструментов Chrome dev, в которой я хочу искать. Панель и поиск настраиваются этим кодом (в 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, на панели.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);
    });
});