omnibox.onInputEntered
当用户从您的扩展添加到地址栏下拉列表中的建议中选择一个时触发。
使用此事件处理用户的选择,通常是打开相应的页面。事件侦听器将传递
- 用户的选择
- a
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
。
参数
text
-
String
。这是用户选择的omnibox.SuggestResult
对象的content
属性的值。 disposition
-
OnInputEnteredDisposition
。一个omnibox.OnInputEnteredDisposition
枚举,指示扩展程序应在当前标签页中打开页面,还是在新前台标签页中打开,或者在新后台标签页中打开。
浏览器兼容性
BCD 表格仅在浏览器中加载
示例
此示例将用户的输入解释为 CSS 属性名称,并使用一个 omnibox.SuggestResult
对象为与输入匹配的每个 CSS 属性填充下拉列表。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.org.cn/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。