Ajouter un bouton à la barre d'outils

Un bouton simple

Dans cette section, nous créons une extension qui ajoute un bouton à la barre d'outils. Lorsque l'utilisateur·ice clique sur le bouton, nous ouvrons https://developer.mozilla.org dans un nouveau onglet.

Tout d'abord, créez un nouveau dossier, « bouton », et créez un fichier appelé « manifest.json » à l'intérieur avec le contenu suivant :

{
  "description": "Démonstration des boutons de la barre d'outils",
  "manifest_version": 2,
  "name": "button-demo",
  "version": "1.0",

  "background": {
    "scripts": ["background.js"]
  },

  "browser_action": {
    "default_icon": {
      "16": "icons/page-16.png",
      "32": "icons/page-32.png"
    }
  }
}

Cela définit que nous avons un script en arrière‐plan nommé « background.js », et une action du navigateur (bouton) et une action du navigateur (bouton) dont les icônes vont vivre dans le répertoire « icônes ».

Ensuite, créez le répertoire « icônes » à l'intérieur du répertoire « bouton », et enregistrez-y les deux icônes ci-dessous :

« page-16.png » :

« page-32.png » :

Nous avons deux icônes afin de pouvoir utiliser la plus grande sur les écrans haute densité. Le navigateur se charge de sélectionner la meilleure icône pour l'affichage actuel.

Ensuite, créer « background.js » dans le dossier racine de votre extension, puis donnez lui le contenu suivant :

function ouvrirPage() {
  browser.tabs.create({
    url: "https://developer.mozilla.org",
  });
}

browser.browserAction.onClicked.addListener(ouvrirPage);

Cela écoute l'évènement de clic de l'action du navigateur ; Lorsque l'évènement se déclenche, la fonction ouvrirPage() est exécutée, ce qui ouvre la page définie à l'aide de l'API tabs.

A ce point, l'extension complète doit ressembler à ceci :

button/
    icons/
        page-16.png
        page-32.png
    background.js
    manifest.json

Maintenant installer la WebExtension ^(angl.) et cliquez sur le bouton :

Ajout d'une fenêtre intrusive

Essayons d'ajouter une fenêtre intrusive au bouton. Remplacez le contenu du manifest.json par ceci :

{
  "description": "Démonstration des boutons de la barre d'outils",
  "manifest_version": 2,
  "name": "button-demo",
  "version": "1.0",

  "browser_action": {
    "browser_style": true,
    "default_popup": "popup/choose_page.html",
    "default_icon": {
      "16": "icons/page-16.png",
      "32": "icons/page-32.png"
    }
  }
}

Nous avons apporté deux modifications par rapport à la version d'origine :

• nous avons supprimé la référence à « background.js », car nous allons désormais gérer la logique de l'extension dans le script de la fenêtre intrusive (vous pouvez utiliser à la fois background.js et une fenêtre intrusive, mais nous n'en avons pas besoin dans ce cas précis).
• ajouté "default_popup": "popup/choose_page.html", ce qui indique au navigateur que cette action va désormais afficher une fenêtre intrusive lorsqu'on clique dessus, dont le document se trouve à l'emplacement « popup/choose_page.html ».

Il nous faut donc maintenant créer cette fenêtre contextuelle. Créez un répertoire nommé « popup », puis créez-y un fichier nommé « choose_page.html ». Donnez-lui le contenu suivant :

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="choose_page.css" />
  </head>
  <body>
    <div class="choix-page">developer.mozilla.org</div>
    <div class="choix-page">support.mozilla.org</div>
    <div class="choix-page">addons.mozilla.org</div>
    <script src="choose_page.js"></script>
  </body>
</html>

Vous pouvez voir qu'il s'agit d'une page HTML normale contenant trois éléments HTML <div>, chacun avec le nom d'un site Mozilla à l'intérieur. Il comprend également un fichier CSS et un fichier JavaScript, que nous ajoutons ensuite.

Créez un fichier appelé « choose_page.css » dans le répertoire « popup » et donnez‐lui ce contenu :

html,
body {
  width: 300px;
}

.choix-page {
  width: 100%;
  padding: 4px;
  font-size: 1.5em;
  text-align: center;
  cursor: pointer;
}

.choix-page:hover {
  background-color: #cff2f2;
}

C'est juste un peu d'habillage pour notre fenêtre intrusive.

Ensuite, créez un fichier « choose_page.js » dans le répertoire « popup » et donnez‐le à ces contenus :

document.addEventListener("click", (event) => {
  if (!event.target.classList.contains("choix-page")) {
    return;
  }

  const pageChoisie = `https://${event.target.textContent}`;
  browser.tabs.create({
    url: pageChoisie,
  });
});

Dans notre JavaScript, nous écoutons les clics sur les choix contextuels. Nous vérifions d'abord si le clic a atterri sur l'un des choix de la page ; Sinon, nous ne faisons rien d'autre. Si le clic atterrit sur un choix de page, nous construisons une URL à partir de celui‐ci, et ouvrons un nouvel onglet contenant la page correspondante. Notez que nous pouvons utiliser les API WebExtension dans les scripts contextuels, tout comme nous le pouvons dans les scripts en arrière‐plan.

La structure finale de l'extension doit ressembler à ceci :

button/
    icons/
        page-16.png
        page-32.png
    popup/
        choose_page.css
        choose_page.html
        choose_page.js
    manifest.json

Maintenant rechargez l'extension ^(angl.), cliquez à nouveau sur le bouton, puis essayez de cliquer sur les options proposées dans la fenêtre intrusive :

Actions de page

Les actions de page sont comme les actions du navigateur, mais qui ne sont pertinentes que pour les pages particulières, plutôt que sur le navigateur dans son ensemble.

Alors que les actions du navigateur sont toujours affichées, les actions de la page ne sont affichées que dans les onglets où elles sont pertinentes. Les boutons d'action de la page sont affichés dans la barre d'URL, plutôt que dans la barre d'outils du navigateur.

En apprendre plus

• La clé de manifeste browser_action
• L'API browserAction
• Exemples d'action de navigateur :
  • beastify ^(angl.)
  • Bookmark it! ^(angl.)
  • favourite-colour ^(angl.)
  • open-my-page-button ^(angl.)

• La clé de manifeste page_action
• L'API pageAction
• Exemples d'action de page :
  • chill-out ^(angl.)