Chrome Extension omnibox - 定制你的搜索框

975 阅读1分钟

使用 omnibox API 可以定制你的搜索框:

如图,在这个 demo 里我们可以在搜索框中直接搜索想要的书籍,然后调取豆瓣的 API 接口,选择一本书,然后选择新建 tab 打开 图灵社区异步社区博文视点

配置

manifest.json,只要添加 omnibox 即可,keyword 则是你想要在搜索框中响应的关键字,本文 demo 使用 book。而 background 也是必不可少的,omnibox 的逻辑都在这里。

开发

逻辑都在 background.js 中,注意 API:

可以在 chrome.omnibox.onInputChangedsuggest 方法中定义输出的内容,参数为数组:

suggest([
  {
    content: text,
    description: 'one'
  },
  {
    content: text,
    description: 'two'
  }
])

还可以在 chrome.omnibox.onInputEntered 中定义选中后的行为,demo 中是打开新 tab 页面:

chrome.omnibox.onInputEntered.addListener(function(text) {
  booksPrefix.forEach((bookUrl) => {
    const url = bookUrl + text
    openTab(url)
  })
})
openTab 函数使用了 tab API,这也是一个重要的 Chrome Extension API,chrome.tabs.create 可以新打开一个 tab。

其他

你可能还发现 background.js 中还有 fetchSuggest 方法,用来从豆瓣接口得到书籍的数据,这个接口会是一个 AJAX 接口。你对前端开发了解的话,就知道我们这是在跨域调取数据,Chrome Extension 是允许跨域的,但是一定要在 manifest.json声明:

"permissions": [
  "https://book.douban.com/"
]

完整 demo 请查看 github.com/welearnmore…