CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extensiongoogle-chrome-devtools
Möhre
Möhre

Reputation: 939

How to handle chrome extension panel's onSearch event?

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

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

Upvotes: 4

Views: 489

Answers (2)

wazzaday
wazzaday

Reputation: 9664

You can use the chrome.runtime api to pass the message to your main script. https://developer.chrome.com/docs/extensions/mv3/messaging/

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

Then inside your HTML page

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

Upvotes: 0

Denis L
Denis L

Reputation: 3292

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.

Upvotes: 1

Related Questions