Trouble with Omnibox Suggestions styling (dim, match, url)

[Nico D]

Hi Everyone,

According to the Manifest v3 docs (https://developer.chrome.com/docs/extensions/reference/omnibox/#type-SuggestResult) You can use XML style tags to style omnibox suggestions.

I understand this to mean that something like this should work (See: `description` key):

chrome.omnibox.onInputChanged.addListener((text, suggest) => {
  search(text, { limit: 20 })
    .then((results) => {
      const bookmarkSuggestions = results.map((bookmark) => ({
        content: bookmark.url,
        description: `<url>${bookmark.url}</url> <dim>${bookmark.description}</dim>`,
      }))
      suggest(bookmarkSuggestions)
    })
    .catch((error) => {
      console.error(error)
    })
})

However, in the above case it always just prints the literal text of "<url>https://..." etc.

Is there maybe another way to do this? I've search around extensively and seen a few examples of people doing it this way as well, but I can't get it to work. Maybe its been deprecated with Manifest V3?

Thanks
Nico

[Nico D]

So of course, shortly after posting this, I finally figured it out. 

For me, the xml / html tag solution never worked. 

But defining them in a separate `descriptionStyles` array did.

For example:

chrome.omnibox.onInputChanged.addListener((text, suggest) => {
  search(text, { limit: 20 })
    .then((results) => {
      const bookmarkSuggestions = results.map((bookmark) => ({
        content: bookmark.url,

        description: `${bookmark.title} ${bookmark.desc} (${bookmark.url})`,
        descriptionStyles: [
          { offset: 0, type: 'match', length: bookmark.title.length },
          {
            offset: bookmark.title.length,
            type: 'dim',
            length: bookmark.desc.length + 1,
          },
          {
            offset: bookmark.title.length + bookmark.desc.length + 2,
            type: 'url',
            length: bookmark.url.length + 2,
          },
        ],

      }))
      suggest(bookmarkSuggestions)
    })
    .catch((error) => {
      console.error(error)
    })
})

[Simeon Vincent]

Looks like another developer reported a bug related to XML parsing with the Omnibox API (issue 1330137) and the bugfix is slated to land in Chrome 104. It might be worth checking if you still encounter issues in Canary. If you do, please file a bug report on crbug.com.

Simeon - @dotproto

Chrome Extensions DevRel

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/f3c36101-4935-46c9-855e-04d5f3a0c7e4n%40chromium.org.