omnibox.onInputEntered
當用戶選擇了你的擴充套件程式新增到位址列下拉列表中的某個建議項時觸發。
使用此事件來處理使用者的選擇,通常是開啟相應的頁面。事件監聽器將接收
- 使用者的選擇
- 一個
omnibox.OnInputEnteredDisposition:使用它來確定是在當前標籤頁、新前臺標籤頁還是新後臺標籤頁中開啟新頁面。
語法
js
browser.omnibox.onInputEntered.addListener(listener)
browser.omnibox.onInputEntered.removeListener(listener)
browser.omnibox.onInputEntered.hasListener(listener)
事件有三個函式
addListener(listener)-
向此事件新增監聽器。
removeListener(listener)-
停止監聽此事件。
listener引數是要移除的監聽器。 hasListener(listener)-
檢查
listener是否已為此事件註冊。如果正在監聽,則返回true,否則返回false。
addListener 語法
監聽器函式將接收兩個引數:一個字串 text,以及一個 omnibox.OnInputEnteredDisposition。
引數
文字-
String。這是使用者選擇的omnibox.SuggestResult物件中content屬性的值。 disposition-
OnInputEnteredDisposition。一個omnibox.OnInputEnteredDisposition列舉,指示擴充套件程式是在當前標籤頁、新前臺標籤頁還是新後臺標籤頁中開啟頁面。
示例
此示例將使用者的輸入解釋為 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。