omnibox.onInputChanged
當用戶在位址列輸入關鍵字並按下空格鍵開始與擴充套件程式互動後，每次使用者更改輸入時都會觸發此事件。
您將使用此事件向地址欄的下拉列表中填充建議。事件監聽器接收
- 當前的使用者輸入（不包括關鍵字本身或其後的空格）
- 一個函式，監聽器可以呼叫該函式並傳入一個
omnibox.SuggestResult物件陣列，每個物件代表一個建議。最多顯示前六個建議。
語法
js
browser.omnibox.onInputChanged.addListener(listener)
browser.omnibox.onInputChanged.removeListener(listener)
browser.omnibox.onInputChanged.hasListener(listener)
事件有三個函式
addListener(listener)-
向此事件新增監聽器。
removeListener(listener)-
停止監聽此事件。
listener引數是要移除的監聽器。 hasListener(listener)-
檢查
listener是否已為此事件註冊。如果正在監聽，則返回true，否則返回false。
addListener 語法
監聽器函式接收兩個引數：一個字串 `text`，以及一個函式 `suggest`。
引數
文字-
String。位址列中當前的鍵盤輸入，不包括擴充套件關鍵字本身或關鍵字之後的空格。使用此值來決定在下拉列表中顯示哪些建議。 suggest-
Function。事件監聽器可以呼叫此函式來為位址列的下拉列表提供建議。該函式期望接收一個omnibox.SuggestResult物件陣列，每個物件代表一個建議。最多顯示前六個建議。
示例
此示例將使用者的輸入解釋為 CSS 屬性名，併為匹配輸入的每個 CSS 屬性填充一個 omnibox.SuggestResult 物件到下拉列表中。`SuggestResult` 的 `description` 屬性是屬性的全名，`content` 是該屬性的 MDN 頁面連結。
該示例還監聽 omnibox.onInputEntered 事件，並根據 omnibox.OnInputEnteredDisposition 引數開啟與所選項對應的 MDN 頁面。
js
browser.omnibox.setDefaultSuggestion({
description: "Type the name of a CSS property",
});
/*
Very short list of a few CSS properties.
*/
const props = [
"animation",
"background",
"border",
"box-shadow",
"color",
"display",
"flex",
"flex",
"float",
"font",
"grid",
"margin",
"opacity",
"overflow",
"padding",
"position",
"transform",
"transition",
];
const baseURL = "https://mdn.club.tw/en-US/docs/Web/CSS/";
/*
Return an array of SuggestResult objects,
one for each CSS property that matches the user's input.
*/
function getMatchingProperties(input) {
const result = [];
for (const prop of props) {
if (prop.startsWith(input)) {
console.log(prop);
const suggestion = {
content: `${baseURL}${prop}`,
description: prop,
};
result.push(suggestion);
} else if (result.length !== 0) {
return result;
}
}
return result;
}
browser.omnibox.onInputChanged.addListener((input, suggest) => {
suggest(getMatchingProperties(input));
});
browser.omnibox.onInputEntered.addListener((url, disposition) => {
switch (disposition) {
case "currentTab":
browser.tabs.update({ url });
break;
case "newForegroundTab":
browser.tabs.create({ url });
break;
case "newBackgroundTab":
browser.tabs.create({ url, active: false });
break;
}
});
擴充套件程式示例
瀏覽器相容性
載入中…
注意：此 API 基於 Chromium 的 chrome.omnibox API。