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 物件。SuggestResultdescription 屬性是屬性的全名,而 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。