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.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。