omnibox.onInputChanged

每当用户更改其输入时触发，前提是他们在地址栏中输入扩展关键字并按空格键后开始与你的扩展交互。

这是你用来用建议填充地址栏下拉列表的事件。事件监听器会传递

当前用户输入（不包括关键字本身或其后的空格）
一个函数，监听器可以调用该函数并传入一个包含 omnibox.SuggestResult 对象的数组，每个对象代表一个建议。只有前六个建议会显示。

语法

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。

参数

text: String。地址栏中当前的用户输入，不包括扩展的关键字本身或关键字后的空格。使用此参数来决定在下拉列表中显示哪些建议。
suggest: Function。事件监听器可以调用该函数来为地址栏的下拉列表提供建议。该函数期望接收一个包含 omnibox.SuggestResult 对象的数组，每个对象代表一个建议。只有前六个建议会显示。

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

示例

此示例将用户输入解释为 CSS 属性名称，并为每个与输入匹配的 CSS 属性填充下拉列表，每个属性对应一个 omnibox.SuggestResult 对象。SuggestResult 的 description 属性是该属性的完整名称，content 是该属性的 MDN 页面。

该示例还监听 omnibox.onInputEntered，并根据 omnibox.OnInputEnteredDisposition 参数打开与所选项目对应的 MDN 页面。

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;
  }
});

示例扩展

firefox-code-search

注意：此 API 基于 Chromium 的 chrome.omnibox API。