Question: How can I handle the `onSearch` event in my chrome devtools extension panel, which will fire when hitting `Ctrl` + `F` and typing some query string.

In my panel's background page I can listen for that event, but I don't know how to access it within the panel itself neither how to respond with the number of matches to get the search navigation working like in Elements Panel:
[![Element Panel's Search](https://i.stack.imgur.com/Ykje5.jpg)](https://i.stack.imgur.com/Ykje5.jpg)

This functionality is very poorly documented on this link:
<https://developer.chrome.com/extensions/devtools_panels>

Answer: 
Maybe it is not clear, but still documented by the link you specified.

You can set listener when creating a dev panel: 

```
chrome.devtools.panels.create("My Dev Panel", null, "panel.html", function(panel) {
    panel.onSearch.addListener(function(action, querySearch) {
        // action - May be: 
        //   "performSearch", "cancelSearch", "nextSearchResult", "previousSearchResult"
        // querySearch - search text
    });
});

```

Btw, I suggest you to use debounce function for search implementation, because `onSearch` event fires on each key down.
You can use the `chrome.runtime` api to pass the message to your main script.
<https://developer.chrome.com/docs/extensions/mv3/messaging/>

```js
panel.onSearch.addListener((action, queryString) => {
  chrome.runtime.sendMessage({
    type: "search",
    payload: { action, queryString },
  });
});

```

Then inside your HTML page

```js
chrome.runtime.onMessage.addListener((event) => {
  console.log(event);
});

```