位址列建議

使用 omnibox API,擴充套件程式可以在使用者輸入關鍵字時自定義瀏覽器位址列下拉列表中顯示的建議。

Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions.

這使得您的擴充套件程式能夠,例如,搜尋免費電子書庫,或者如上例所示,搜尋程式碼示例儲存庫。

指定 omnibox 自定義

您可以透過在擴充套件程式的 manifest.json 檔案中包含 omnibox 鍵和觸發關鍵字的定義,來告訴您的擴充套件程式它將自定義位址列建議。

json
  "omnibox": { "keyword" : "cs" }

在擴充套件程式的後臺 JavaScript 檔案中,使用 omnibox.setDefaultSuggestion(),您可以選擇定義要在位址列下拉列表中顯示的第一個建議。使用此功能提供有關如何使用該功能的提示。

js
browser.omnibox.setDefaultSuggestion({
  description: `Search the Firefox codebase
    (e.g. "hello world" | "path:omnibox.js onInputChanged")`,
});

然後,您可以透過監聽 omnibox.onInputStarted(當用戶輸入關鍵字和空格時觸發)和 omnibox.onInputChanged(每當使用者更新位址列條目時觸發)來新增提供自定義內容的 C++ 程式碼。然後,您可以填充建議,在這種情況下,可以使用使用者輸入的詞語來構建一個 mozilla-central 搜尋

js
browser.omnibox.onInputChanged.addListener((text, addSuggestions) => {
  let headers = new Headers({ Accept: "application/json" });
  let init = { method: "GET", headers };
  let url = buildSearchURL(text);
  let request = new Request(url, init);

  fetch(request).then(createSuggestionsFromResponse).then(addSuggestions);
});

如果擴充套件程式使用了 omnibox.setDefaultSuggestion() 設定了預設建議,那麼它將首先出現在下拉列表中。

然後,擴充套件程式可以使用 omnibox.onInputEntered 監聽使用者點選其中一個建議。如果點選的是預設建議,則返回使用者的自定義術語;否則,返回建議的字串。這還會傳遞有關使用者處理新連結的瀏覽器偏好的資訊。在下面的程式碼中,使用使用者的自定義術語進行搜尋,否則開啟建議的 URL。

js
browser.omnibox.onInputEntered.addListener((text, disposition) => {
  let url = text;
  if (!text.startsWith(SOURCE_URL)) {
    // Update the URL if the user clicks on the default suggestion.
    url = `${SEARCH_URL}?q=${text}`;
  }
  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;
  }
});

示例

GitHub 上的 webextensions-examples 儲存庫包含 firefox-code-search 示例,該示例自定義了搜尋欄。