omnibox.onInputChanged 编辑

Fired whenever the user changes their input, after they have started interacting with your extension by entering its keyword in the address bar and then pressing the space key.

This is the event you'll use to populate the address bar's drop-down list with suggestions. The event listener is passed:

  • the current user input (not including the keyword itself or the space after it)
  • a callback function which the listener can call with an array of omnibox.SuggestResult objects, one for each suggestion. Only the first six suggestions will be displayed.

Syntax

browser.omnibox.onInputChanged.addListener(listener)
browser.omnibox.onInputChanged.removeListener(listener)
browser.omnibox.onInputChanged.hasListener(listener)

Events have three functions:

addListener(listener)
Adds a listener to this event.
removeListener(listener)
Stop listening to this event. The listener argument is the listener to remove.
hasListener(listener)
Check whether listener is registered for this event. Returns true if it is listening, false otherwise.

addListener syntax

The listener function will be passed two parameters: a string text, and a callback function suggest.

Parameters

text

String. The current user input in the address bar, not including the extension's keyword itself or the space after the keyword. Use this to decide which suggestions to display in the drop-down list.

suggest

Function. A callback function that the event listener can call to supply suggestions for the address bar's drop-down list. The callback function expects to receive an array of omnibox.SuggestResult objects, one for each suggestion. Only the first six suggestions will be displayed.

Browser compatibility

BCD tables only load in the browser

Examples

This example interprets the user's input as a CSS property name and populates the drop-down list with one omnibox.SuggestResult object for each CSS property matching the input. The SuggestResult description is the full name of the property, and the content is the MDN page for that property.

The example also listens to omnibox.onInputEntered, and opens the MDN page corresponding to the selection, according to the  omnibox.OnInputEnteredDisposition argument.

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 = "/wiki/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) {
  var result = [];
  for (prop of props) {
    if (prop.indexOf(input) === 0) {
      console.log(prop);
      let 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;
  }
});

Example extensions

Acknowledgements

This API is based on Chromium's chrome.omnibox API.

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

词条统计

浏览:136 次

字数:6210

最后编辑:8年前

编辑次数:0 次

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文