omnibox輸入組件,主要是允許使用者在網址列,輸入特定的關鍵字(並按下tab),來啟動你的Extension,接著你能籍由監聽使用者的輸入行為來實作操作邏輯。
{
"name": "Aaron's omnibox extension",
"version": "1.0",
//必需指定一個啟用你擴充功能的關鍵字
"omnibox": { "keyword" : "OI" },
"icons": {
"16": "16-full-color.png"
},
"background": {
"persistent": false,
"scripts": ["background.js"]
}
}
Chrome允許你設定個關鍵字(case-insensitive 大小寫沒差)
使用者在輸入關鍵字後, 按下tab
鍵,網址列便會顯示安裝檔中址定的icon與你的app名稱,以提示使用者進入Extension的輸入模式。(如下圖)
Chrome提供以下事件供我們使用:
關於事件的完整操作,可以查看中文文件
為了增加使用者的互動經驗,Chrome允許我們在使用者開始輸入內容的時後,提供健議的輸入清單,如下圖
程式的實作邏輯上,便是利用onInputChanged
裡的回調方法,回調方法中將提供使用者目前的輸入結果,以及最重要的suggestion()
方法,供你回傳建議的輸入清單。我們來看看以下事件角本的程式碼片段:
chrome.omnibox.onInputChanged.addListener(function(text,suggest) {
suggest(suggestResults);
});
要特別注意的事,suggestion()
的輸入參數是一個陣列,而這個陣列中的所有子元素,是擁有content以及description屬性的物件,就像這樣:
var suggestResultOne = {
"content" : "Some content",
"description" : "Description"
};
var suggestResults = [suggestResultOne];
但僅僅是這樣還不夠,我們希望上上面的示圖以樣,能針對使用者的輸入,去推荐不同的輸入清單,那要怎麼實作能?讓我們看一下完整的範例。
事件腳本的程式碼片段:
//預設值
var suggestResultOne = {
"content" : "Some content",
"description" : "Description"
};
var suggestResults = [suggestResultOne];
//先列出使用者可能會輸入的字母
var descriptions = {
"a" : ["actions","alarms","apps",],
"b" : ["background-page","bookmarks","browser-action"],
"c" : ["commands","content-script","context-menu"],
"d" : ["dashboard","declarativeContent"],
"e" : ["event-script","examples"],
"h" : ["history"],
"i" : ["incognito","inject"],
"m" : ["management page","manifest","match pattern","messaging"],
"o" : ["omnibox"],
"p" : ["page-action","permissions","plugins","popup"],
"r" : ["resources panel","runtime"],
"s" : ["sources panel","store","storage"],
"t" : ["tabs","themes"]
};
//當使用者輸入的字符合上列時,將所有的建議清單裝成一個陣列回傳
//如果沒有符合就回傳預設值
function getSuggestResults(key) {
var results = [];
if(!descriptions[key] || !key) return suggestResults;
for(var i=0;i<descriptions[key].length;i++) {
var suggestResult = {};
suggestResult["content"] = descriptions[key][i];
suggestResult["description"] = "Search '" + descriptions[key][i] + "' on developer.chrome.com";
results[i] = suggestResult;
}
return results;
}
//監聽事件,處理建議清單
chrome.omnibox.onInputChanged.addListener(function(text,suggest) {
suggest(getSuggestResults(text));
});
這樣以來當使用輸入a 時,我們在介面上顯示可搜尋以a為首的相關字串,並協助使用者自動完成輸入。
接著我們來實作當使用者完成輸入並按下enter的操作邏輯,請看以下事件腳本的程式碼片段:
var searchService = "https://www.google.com/search?q=chrome+extensions+developers+";
//方法:用指定網址打開新視窗
function CreateWindow(url) {
var windowCreateData = {"url" : ""};
windowCreateData.url = url;
chrome.windows.create(windowCreateData);
}
//當使用者按下Enter,將使用者的輸入給果組合成google搜尋的網址(作為網址參數),並用新視窗打開
chrome.omnibox.onInputEntered.addListener(function(text,disposition) {
console.log("<InputEntered> Text: " + text);
CreateWindow(searchService + text);
});
注意到上面的程式碼中使用了chrome.windows.create
,開啟一個新的視窗,並將新視窗的網址,指定成想要搜尋的關鍵字作用網址參數的方式給google查詢。
結果展示:
這裡使用的是電子書中的範例,完整的範例參考第三章節的HelloOmniboxInput
網址列輸入組件允許使用者輸入一個指定關鍵字,並按下tab啟動擴充功能的輸入模式。
籍由這個輸入模式,開發者可以監聽使用者的輸入,來實作各種操作邏輯。
開發者可以提供建議輸入的清單,協助使用者完成操作。
主觀來說,我覺得他的應用範圍不廣,除了搜尋功能的優化外,以字典查詢為例:已經有更好用的右鍵功能選單,而作為一個功能的觸發,也比不上快捷鍵輸入組件來來的快速或是比彈出視窗顯示操作UI來的直覺。
就像在組成部份中我們提到的,還有一個內容UI的輸入組件還沒介紹到,但因為內容UI組件的實作,牽扯到了腳本之間的溝通,所以在介紹最後一個輸入組件之前,下一個段落我們將先探討腳本之間的訊息溝通方式。