webext-omnibox-highlight

WebExtension Omnibox Highlight

A module to handle the differences between Chrome and Firefox implementations of the omnibox WebExtension API because using omnibox.SuggestResult doesn't handle matching for you correctly.

Usage

There are 3 methods available.

• match
• url
• dim

Here's an example of usage:

chrome.omnibox.onInputChanged.addListener(handleInputChanged);
 
function handleInputChanged(text, addSuggestions) {
  const headers = new Headers({ Accept: 'application/json' });
  const options = { method: 'GET', headers };
  const q = encodeURIComponent(text);
  const url = `http://mozilla.org/?q=${q}`;
  const request = new Request(url, options);
 
  fetch(request).then(handleResponse).then(addSuggestions);
}
 
function handleResponse(response) {
  return new Promise(resolve => {
    response.json().then(json => {
      return resolve(
        pages.map(json => {
          return {
            content: page.url,
            // match will highlight the matches found in this string
            description: match(page.title, json.query)
          };
        })
      );
    });
  });
}

TODO

NOTE: that you should use a library like xml-escape to handle the required escaping before passing into these functions.