Modules

Suggestions de la barre d'adresse

En utilisant l'API omnibox, WebExtensions peut personnaliser les suggestions proposées dans la liste déroulante de la barre d'adresse du navigateur lorsque l'utilisateur entre un mot-clé.

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

Cela permet à votre WebExtension, par exemple, de rechercher une bibliothèque d'ebooks gratuits ou comme dans l'exemple ci-dessus, un dépôt d'exemples de code.

Spécification de la personnalisation Omnibox

Vous dites à votre WebExtension qu'il va personnaliser les suggestions de la barre d'adresse en incluant la clé omnibox et la définition du mot-clé de déclenchement dans son fichier manifest.json :

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

Dans le fichier JavaScript d'arrière-plan WebExtension, en utilisant omnibox.setDefaultSuggestion(), vous pouvez éventuellement définir la première suggestion à afficher dans la liste déroulante de la barre d'adresse. Utilisez ceci pour donner un indice sur l'utilisation de la fonction :

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

Vous pouvez ensuite ajouter le code pour fournir le contenu personnalisé en écoutant  omnibox.onInputStarted, qui est envoyé lorsque l'utilisateur a tapé le mot-clé et un espace, et  omnibox.onInputChanged, qui est expédié chaque fois que l'utilisateur met à jour l'entrée de la barre d'adresse. Vous pouvez ensuite remplir les suggestions, dans ce cas, créer une recherche de https://searchfox.org/mozilla-central utilisant le terme entré par l'utilisateur :

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

Si la WebExtension définit une suggestion par défaut en utilisant omnibox.setDefaultSuggestion(), alors cela apparaîtra en premier dans la liste déroulante.

 

La WebExtension peut ensuite écouter l'utilisateur en cliquant sur l'une des suggestions, en utilisant omnibox.onInputEntered. Si la suggestion par défaut est cliquée, le terme personnalisé de l'utilisateur est renvoyé, sinon la chaîne de la suggestion est renvoyée. En outre, les informations sur les préférences du navigateur de l'utilisateur pour la gestion des nouveaux liens sont transmises. Dans le code ci-dessous, le terme personnalisé de l'utilisateur est employé pour créer une recherche différente, l'URL suggérée est ouverte:

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

Exemples

Le depot webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qui utilise la personnalisation de omnibox

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : hellosct1
 Dernière mise à jour par : hellosct1,