Address bar suggestions

Mit der Verwendung der omnibox API können Erweiterungen die Vorschläge im Drop-down-Feld der Browser-Adressleiste anpassen, wenn der Benutzer ein Schlüsselwort eingibt.

Beispiel, das das Ergebnis der Anpassung der Adressleisten-Vorschläge durch die firefox_code_search WebExtension zeigt.

Dies ermöglicht es Ihrer Erweiterung beispielsweise, in einer Bibliothek kostenloser E-Books zu suchen oder, wie im obigen Beispiel, in einem Repository von Code-Beispielen.

Spezifikation der Omnibox-Anpassung

Informieren Sie Ihre Erweiterung, dass sie die Adressleisten-Vorschläge anpassen wird, indem Sie den omnibox-Schlüssel und die Definition des Auslöser-Schlüsselworts in ihrer manifest.json-Datei einfügen:

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

In der Hintergrund-JavaScript-Datei der Erweiterung können Sie mit omnibox.setDefaultSuggestion() optional den ersten Vorschlag definieren, der im Drop-down der Adressleiste angezeigt wird. Verwenden Sie dies, um einen Hinweis darauf zu geben, wie man die Funktion verwendet:

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

Sie können dann den Code hinzufügen, um den benutzerdefinierten Inhalt bereitzustellen, indem Sie auf omnibox.onInputStarted hören, der ausgelöst wird, wenn der Benutzer das Schlüsselwort und ein Leerzeichen eingetippt hat, und omnibox.onInputChanged, der jedes Mal ausgelöst wird, wenn der Benutzer den Eintrag in der Adressleiste aktualisiert. Sie können dann die Vorschläge auffüllen, in diesem Fall eine Suche in mozilla-central mit dem vom Benutzer eingegebenen Begriff erstellen:

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

Wenn die Erweiterung einen Standardvorschlag mit omnibox.setDefaultSuggestion() festgelegt hat, erscheint dieser zuerst im Drop-down.

Die Erweiterung kann dann auf das Klicken eines Benutzers auf einen der Vorschläge lauschen, indem sie omnibox.onInputEntered verwendet. Wenn auf den Standardvorschlag geklickt wird, wird der benutzerdefinierte Begriff des Nutzers zurückgegeben, andernfalls wird der Zeichenstring des Vorschlags zurückgegeben. Dies übergibt auch Informationen zu den Browser-Einstellungen des Benutzers für das Verhalten neuer Links. Im folgenden Code wird der benutzerdefinierte Begriff des Nutzers verwendet, um eine Suche zu erstellen, andernfalls wird die vorgeschlagene URL geöffnet:

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

Beispiele

Das webextensions-examples-Repository auf GitHub enthält das firefox-code-search-Beispiel, das die Suchleiste anpasst.