一、什么是omnibox
omnibox是什么呢，這個干說沒啥意思，一圖抵千言：
上面這幅動圖就是一個omnibox的例子，首先是用戶在地址欄上輸入了一個關鍵詞並按下tab鍵，當檢測到特定的關鍵詞與我們事先指定的關鍵詞相匹配時將調用對應的插件，這個關鍵詞是在manifest.json文件中設置的，按下tab鍵，接下來用戶再輸入的東西將會傳給插件，同時我們知道，一個輸入框會有很多個事件，為了更好的與用戶交互，通常會監聽這些事件來輔助用戶輸入，比如自動完成之類的，在用戶輸入的時候會給出一些搜索建議，從代碼結構上說，這些事件都是掛載在chrome.omniox上的一些回調函數，接下來的重點就是介紹這些事件。
首先在用戶開始輸入的時候，會觸發onInputStarted事件，但這個具體是什么時候算是開始呢，即用戶在按下tab鍵chrome將地址欄搜索交給我們插件，然后輸入第一個字符之后的這一刻，這個叫inputStarted。
然后就是用戶在地址欄上是一個字母一個字母或者一個漢字詞語輸入的，地址欄上輸入的內容會不斷發生變化，這個變化的事件叫做onInputChanged，在onInputChanged中可以為用戶提供一些搜索建議。
當用戶在地址欄上輸入完畢，按下回車時會觸發一個事件，這個事件叫onInputEntered。
當用戶在地址欄上輸了一會兒，但是突然決定不用這個，按ESC打算取消時，有一個事件onInputCancelled。
上面的幾個事件可以用下面這張圖簡單總結：
在onInputChanged方法中可能有很復雜的邏輯，根據不同的情況為用戶提供亂七八糟的搜索建議，但我們向無論什么情況下總有一個建議是首選的，處在搜索建議的第一條，chrome.omnibox.setDefaultSuggestion(object suggestion)設置。
接下來寫一個簡單的例子，初步學習一下omnibox是如何使用的。
首先定義manifest.json，設置插件的關鍵詞：
{
"manifest_version": 2,
"name": "omnibox usage example",
"version": "0.1",
"omnibox": {
"keyword": "foobar"
},
"icons": {
"16": "images/icon.png"
},
"background": {
"persistent": false,
"scripts": ["js/background.js"]
}
}
這里指定的關鍵詞是“foobar”，然后要指定background.js，因為接下來要在background.js中設置監聽事件。
// 當用戶按下tab chrome將輸入交給插件，然后輸入第一個字符之后觸發此事件
chrome.omnibox.onInputStarted.addListener(() => {
console.log("[" + new Date() + "] omnibox event: onInputStarted");
});
// 當用戶的輸入改變之后
// text 用戶的當前輸入
// suggest 調用suggest為用戶提供搜索建議
chrome.omnibox.onInputChanged.addListener((text, suggest) => {
console.log("[" + new Date() + "] omnibox event: onInputChanged, user input: " + text);
// 為用戶提供一些搜索建議
suggest([{
"content": text + " foo",
"description": "是否要查看“" + text + " foo” 有關的內容？"
}, {
"content": text + " bar",
"description":"是否要查看“" + text + " bar” 有關的內容？"
}
]);
});
// 按下回車時事件，表示向插件提交了一個搜索
chrome.omnibox.onInputEntered.addListener((text, disposition) => {
console.log("[" + new Date() + "] omnibox event: onInputEntered, user input: " + text + ", disposition: " + disposition);
});
// 取消輸入時觸發的事件，注意使用上下方向鍵在搜索建議列表中搜搜也會觸發此事件
chrome.omnibox.onInputCancelled.addListener(() => {
console.log("[" + new Date() + "] omnibox event: onInputCancelled");
});
// 當刪除了搜索建議時觸發的
chrome.omnibox.onDeleteSuggestion.addListener(text => {
console.log("[" + new Date() + "] omnibox event: onDeleteSuggestion, text: " + text);
});
// 設置默認的搜索建議，會顯示在搜索建議列表的第一行位置，content省略使用用戶當前輸入的text作為content
chrome.omnibox.setDefaultSuggestion({
"description": "啥也不干，就是隨便試試...."
})
然后調出在地址欄輸入"foobar"，然后按tab，觀察background頁面的輸出：
二、實戰：基於omnibox的XXX
本來打算想一個牛逼哄哄的例子，后來想了半天覺得這個東西實屬雞肋，用戶使用路徑過長，用起來很麻煩，而且這個東西的原理也比較簡單，就幾個簡單的回調方法，所以就不再費心設計例子了。
三、總結
3.1 一個插件能不能指定多個關鍵詞呢？
我們知道omnibox能夠增加我們插件的曝光率，那么我們能不能為自己插件設置多個keyword呢？
官方文檔中好像並沒有說明，那么我們來測試一下，將之前的manifest.json中的keyword修改為一個數組行不行呢：
{
"manifest_version": 2,
"name": "omnibox usage example",
"version": "0.1",
"omnibox": {
"keyword": ["foobar", "barfoo"]
},
"icons": {
"16": "images/icon.png"
},
"background": {
"persistent": false,
"scripts": ["js/background.js"]
}
}
然后重新加載它：
啊哦，好像不太行哎。
3.2 當多個插件的關鍵詞沖突了怎么辦？
另外一種情況就是如果我插件要注冊的關鍵字很火，結果被別人捷足先登了，當那么當用戶的chrome上同時安裝這兩個插件會發生什么事呢？
創建兩個插件，關鍵字都指定為"foobar"，插件1：
{
"manifest_version": 2,
"name": "foobar 1",
"version": "0.1",
"omnibox": {
"keyword": "foobar"
},
"icons": {
"16": "images/icon.png"
},
"background": {
"persistent": false,
"scripts": ["js/background.js"]
}
}
插件2：
{
"manifest_version": 2,
"name": "foobar 2",
"version": "0.1",
"omnibox": {
"keyword": "foobar"
},
"icons": {
"16": "images/icon.png"
},
"background": {
"persistent": false,
"scripts": ["js/background.js"]
}
}
然后安裝這兩個插件，兩個插件都能夠安裝成功：
好吧，跟我預想的沖突檢測好像不太一樣，那我現在在地址欄中鍵入“foobar”看究竟是哪一個起作用吧：
嗯，后安裝的將先安裝的給覆蓋掉了。
相關資料
.