Apprendre à Créer une extension Google

 Les extensions sont constituées de composants différents, mais cohérents. Les composants peuvent inclure des scripts d'arrière - plan , des scripts de contenu , une page d'options , des éléments d'interface utilisateur et divers fichiers logiques. Les composants d'extension sont créés avec des technologies de développement Web : HTML, CSS et JavaScript. Les composants d'une extension dépendent de sa fonctionnalité et peuvent ne pas nécessiter toutes les options.

Ce tutoriel va créer une extension qui permet à l'utilisateur de changer la couleur d'arrière-plan de la page actuellement focalisée. Il utilisera de nombreux composants de la plate-forme d'extension pour donner une démonstration introductive de leurs relations.

Pour commencer, créez un nouveau répertoire pour contenir les fichiers de l'extension.

L'extension terminée peut être téléchargée ici .


Créer le manifeste

Les extensions commencent par leur manifeste . Créez un fichier appelé manifest.jsonet incluez le code suivant.

{
  "name": "Getting Started Example",
  "description": "Build an Extension!",
  "version": "1.0",
  "manifest_version": 3
}

Le répertoire contenant le fichier manifeste peut être ajouté en tant qu'extension en mode développeur dans son état actuel.

  1. Ouvrez la page Gestion des extensions en accédant à chrome://extensions.
    • Vous pouvez également ouvrir cette page en cliquant sur le bouton de menu Extensions et en sélectionnant Gérer les extensions en bas du menu.
    • Vous pouvez également ouvrir cette page en cliquant sur le menu
      • Chrome, en survolant Plus d'outils, puis en sélectionnant Extensions
    • Activez le mode développeur en cliquant sur l'interrupteur à bascule à côté du mode développeur .
    • Cliquez sur le bouton Charger décompressé et sélectionnez le répertoire d'extension.
      • Charger une extension décompressée
  2. Ta-da ! L'extension a été installée avec succès. Comme aucune icône n'a été incluse dans le manifeste, une icône générique sera créée pour l'extension.

  4. Ajouter des fonctionnalités

    L'extension est maintenant installée, mais elle ne fait rien pour le moment car nous ne lui avons pas dit quoi faire ni quand le faire. Corrigons cela en ajoutant du code pour stocker une valeur de couleur d'arrière-plan.

    Enregistrez le script d'arrière-plan dans le manifeste

    Les scripts d'arrière-plan, comme de nombreux autres composants importants, doivent être enregistrés dans le manifeste. L'enregistrement d'un script d'arrière-plan dans le manifeste indique à l'extension quel fichier référencer et comment ce fichier doit se comporter.

    {
      "name": "Getting Started Example",
      "description": "Build an Extension!",
      "version": "1.0",
      "manifest_version": 3,
      "background": {
        "service_worker": "background.js"
      }
    }

    Chrome sait maintenant que l'extension inclut un service worker. Lorsque vous rechargez l'extension, Chrome recherche dans le fichier spécifié des instructions supplémentaires, telles que des événements importants qu'il doit écouter.

    Créer le script d'arrière-plan

    Cette extension aura besoin des informations d'une variable persistante dès son installation. Commencez par inclure un événement d'écoute runtime.onInstalleddans le script d'arrière-plan. À l'intérieur de l' onInstalledécouteur, l'extension définira une valeur à l'aide de l' API de stockage . Cela permettra à plusieurs composants d'extension d'accéder à cette valeur et de la mettre à jour. Dans le répertoire de l'extension, créez un fichier nommé background.jset ajoutez le code suivant.

    // background.js

    let color = '#3aa757';

    chrome.runtime.onInstalled.addListener(() => {
      chrome.storage.sync.set({ color });
      console.log('Default background color set to %cgreen', `color: ${color}`);
    });

    Ajouter l'autorisation de stockage


  6. La plupart des API, y compris l' API de stockage , doivent être enregistrées dans le "permissions"champ du manifeste pour que l'extension puisse les utiliser.

    {
      "name": "Getting Started Example",
      "description": "Build an Extension!",
      "version": "1.0",
      "manifest_version": 3,
      "background": {
        "service_worker": "background.js"
      },
      "permissions": ["storage"]
    }

    Inspecter le script d'arrière-plan

    Revenez à la page de gestion des extensions et cliquez sur le lien Recharger . Un nouveau champ, Inspecter les vues , devient disponible avec un lien bleu, service worker .

    Inspecter les vues

    Cliquez sur le lien pour afficher le journal de la console du script d'arrière-plan, " Default background color set to green"

    Introduire une interface utilisateur

    Les extensions peuvent avoir plusieurs formes d' interface utilisateur ; celui-ci utilisera une fenêtre contextuelle . Créez et ajoutez un fichier nommé popup.htmldans le répertoire de l'extension. Cette extension utilise un bouton pour changer la couleur d'arrière-plan.

    <!DOCTYPE html>
    <html>
      <head>
        <link rel="stylesheet" href="button.css">
      </head>
      <body>
        <button id="changeColor"></button>
      </body>
    </html>

    Comme le script d'arrière-plan, ce fichier doit être déclaré dans le manifeste pour que Chrome le présente dans la fenêtre contextuelle de l'extension. Pour ce faire, ajoutez un actionobjet au manifeste et définissez-le popup.html comme fichier default_popup.

{
  "name": "Getting Started Example",
  "description": "Build an Extension!",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage"],
  "action": {
    "default_popup": "popup.html"
  }
}

Le code HTML de cette fenêtre contextuelle fait référence à un fichier CSS externe nommé button.css. Ajoutez un autre fichier au répertoire de l'extension, nommez-le de manière appropriée et ajoutez le code suivant.

button {
  height: 30px;
  width: 30px;
  outline: none;
  margin: 10px;
  border: none;
  border-radius: 2px;
}

button.current {
  box-shadow: 0 0 0 2px white,
              0 0 0 4px black;
}

La désignation des icônes de la barre d'outils est également incluse actiondans le default_iconschamp. Téléchargez le dossier images ici , décompressez-le et placez-le dans le répertoire de l'extension. Mettez à jour le manifeste pour que l'extension sache comment utiliser les images.

{
  "name": "Getting Started Example",
  "description": "Build an Extension!",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "/images/get_started16.png",
      "32": "/images/get_started32.png",
      "48": "/images/get_started48.png",
      "128": "/images/get_started128.png"
    }
  }
}

Les extensions affichent également des images sur la page de gestion des extensions, l'avertissement des autorisations et le favicon. Ces images sont désignées dans le manifeste sous icons.

{
  "name": "Getting Started Example",
  "description": "Build an Extension!",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "/images/get_started16.png",
      "32": "/images/get_started32.png",
      "48": "/images/get_started48.png",
      "128": "/images/get_started128.png"
    }
  },
  "icons": {
    "16": "/images/get_started16.png",
    "32": "/images/get_started32.png",
    "48": "/images/get_started48.png",
    "128": "/images/get_started128.png"
  }
}

Par défaut, les extensions apparaissent dans le menu des extensions (la pièce du puzzle). Épingler l'extension affichera l'icône dans la barre d'outils.

Épingler l'extension à la barre d'outils

Si l'extension est rechargée à ce stade, elle inclura l'icône fournie plutôt que l'espace réservé par défaut, et cliquer sur l'action ouvrira une fenêtre contextuelle qui affichera un bouton affichant la couleur par défaut.

Surgir

La dernière étape de l'interface utilisateur contextuelle consiste à ajouter de la couleur au bouton. Créez et ajoutez un fichier nommé popup.jsavec le code suivant dans le répertoire de l'extension.

// Initialize button with user's preferred color
let changeColor = document.getElementById("changeColor");

chrome.storage.sync.get("color", ({ color }) => {
  changeColor.style.backgroundColor = color;
});

Ce code saisit le bouton popup.htmlet demande la valeur de couleur du stockage. Il applique ensuite la couleur comme arrière-plan du bouton. Incluez une balise de script popup.jsdans popup.html.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="button.css">
  </head>
  <body>
    <button id="changeColor"></button>
    <script src="popup.js"></script>
  </body>
</html>

Rechargez l'extension pour afficher le bouton vert.

Logique de couche

L'extension a maintenant une icône personnalisée et une fenêtre contextuelle, et elle colore le bouton contextuel en fonction d'une valeur enregistrée dans le stockage de l'extension. Ensuite, il faut une logique pour une interaction ultérieure avec l'utilisateur. Mettez popup.jsà jour en ajoutant ce qui suit à la fin du fichier.

// When the button is clicked, inject setPageBackgroundColor into current page
changeColor.addEventListener("click", async () => {
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: setPageBackgroundColor,
  });
});

// The body of this function will be executed as a content script inside the
// current page
function setPageBackgroundColor() {
  chrome.storage.sync.get("color", ({ color }) => {
    document.body.style.backgroundColor = color;
  });
}

Le code mis à jour ajoute un clickécouteur d'événement au bouton, ce qui déclenche un script de contenu injecté par programme . Cela transforme la couleur d'arrière-plan de la page de la même couleur que le bouton. L'utilisation de l'injection programmatique permet des scripts de contenu invoqués par l'utilisateur, au lieu d'insérer automatiquement du code indésirable dans les pages Web.

Le manifeste aura besoin de l' activeTabautorisation d'autoriser l'extension à accéder temporairement à la page actuelle et scriptingd'utiliser la executeScriptméthode de l'API de script .

{
  "name": "Getting Started Example",
  ...
  "permissions": ["storage", "activeTab", "scripting"],
  ...
}

L'extension est maintenant pleinement fonctionnelle ! Rechargez l'extension, actualisez cette page, ouvrez la fenêtre contextuelle et cliquez sur le bouton pour la faire passer au vert ! Cependant, certains utilisateurs peuvent vouloir changer l'arrière-plan en une couleur différente.

des trucs

Les extensions ne peuvent pas injecter de scripts de contenu sur les pages internes de Chrome comme "chrome://extensions". Assurez-vous d'essayer l'extension sur une vraie page Web telle que https://google.com .

Donner des options aux utilisateurs

L'extension permet actuellement uniquement aux utilisateurs de changer l'arrière-plan en vert. L'inclusion d'une page d'options donne aux utilisateurs plus de contrôle sur les fonctionnalités de l'extension, en personnalisant davantage leur expérience de navigation.

Commencez par créer un fichier dans le répertoire nommé options.htmlet incluez le code suivant.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="button.css">
  </head>
  <body>
    <div id="buttonDiv">
    </div>
    <div>
      <p>Choose a different background color!</p>
    </div>
  </body>
  <script src="options.js"></script>
</html>

Enregistrez ensuite la page d'options dans le manifeste,

{
  "name": "Getting Started Example",
  ...
  "options_page": "options.html"
}

Rechargez l'extension et cliquez avec le bouton droit sur l'icône de l'extension dans la barre d'outils, puis sélectionnez Options . Vous pouvez également cliquer sur DÉTAILS, faire défiler la page des détails vers le bas et sélectionner Options d'extension .

Faites un clic droit pour ouvrir la page des options

La dernière étape consiste à ajouter la logique des options. Créez un fichier nommé options.jsdans le répertoire de l'extension avec le code suivant.

let page = document.getElementById("buttonDiv");
let selectedClassName = "current";
const presetButtonColors = ["#3aa757", "#e8453c", "#f9bb2d", "#4688f1"];

// Reacts to a button click by marking the selected button and saving
// the selection
function handleButtonClick(event) {
  // Remove styling from the previously selected color
  let current = event.target.parentElement.querySelector(
    `.${selectedClassName}`
  );
  if (current && current !== event.target) {
    current.classList.remove(selectedClassName);
  }

  // Mark the button as selected
  let color = event.target.dataset.color;
  event.target.classList.add(selectedClassName);
  chrome.storage.sync.set({ color });
}

// Add a button to the page for each supplied color
function constructOptions(buttonColors) {
  chrome.storage.sync.get("color", (data) => {
    let currentColor = data.color;
    // For each color we were provided…
    for (let buttonColor of buttonColors) {
      // …create a button with that color…
      let button = document.createElement("button");
      button.dataset.color = buttonColor;
      button.style.backgroundColor = buttonColor;

      // …mark the currently selected color…
      if (buttonColor === currentColor) {
        button.classList.add(selectedClassName);
      }

      // …and register a listener for when that button is clicked
      button.addEventListener("click", handleButtonClick);
      page.appendChild(button);
    }
  });
}

// Initialize the page by constructing the color options
constructOptions(presetButtonColors);

Quatre options de couleur sont fournies puis générées sous forme de boutons sur la page d'options avec des écouteurs d'événement onclick. Lorsque l'utilisateur clique sur un bouton, il met à jour la valeur de couleur dans le stockage de l'extension. Étant donné que tous les fichiers de l'extension extraient les informations de couleur de ce stockage, aucune autre valeur n'a besoin d'être mise à jour.

Passez à l'étape suivante

Toutes nos félicitations! Le répertoire contient désormais une extension Chrome entièrement fonctionnelle, bien que simpliste.

Et après?

  • L' aperçu de l'extension Chrome sauvegarde un peu et fournit de nombreux détails sur l'architecture des extensions en général, et certains concepts spécifiques avec lesquels les développeurs voudront se familiariser.
  • Découvrez les options disponibles pour le débogage des extensions dans le didacticiel de débogage .
  • Les extensions Chrome ont accès à de puissantes API au-delà de ce qui est disponible sur le Web ouvert. La documentation des API chrome.* passera en revue chaque API.
  • Le guide du développeur contient des dizaines de liens supplémentaires vers des documents relatifs à la création d'extensions avancées.



Commentaires

Enregistrer un commentaire

Posts les plus consultés de ce blog

Comment fonctionne l'optimise d'Adam

Image
Introduction en douceur à l'algorithme d'optimisation Adam pour le Deep Learning Le choix de l'algorithme d'optimisation pour votre modèle d'apprentissage en profondeur peut faire la différence entre de bons résultats en minutes, heures et jours. L'  algorithme d'optimisation Adam  est une extension de la descente de gradient stochastique qui a récemment été plus largement adoptée pour les applications d'apprentissage en profondeur dans la vision par ordinateur et le traitement du langage naturel. Dans cet article, vous obtiendrez une introduction en douceur à l'algorithme d'optimisation Adam à utiliser dans l'apprentissage en profondeur. Après avoir lu cet article, vous saurez: Qu'est-ce que l'algorithme Adam et certains avantages de l'utilisation de la méthode pour optimiser vos modèles. Comment fonctionne l'algorithme d'Adam et en quoi il est différent des méthodes associées d'AdaGrad et de RMSProp. Comment l'al
Lire la suite

RESEAU DE NEURONE CONVOLUTIF

Image
Vue d'ensemble Architecture d'un CNN traditionnel Les réseaux de neurones convolutionnels (en anglais  Convolutional neural networks ), aussi connus sous le nom de CNNs, sont un type spécifique de réseaux de neurones qui sont généralement composés des couches suivantes : La couche convolutionnelle et la couche de pooling peuvent être ajustées en utilisant des paramètres qui sont décrites dans les sections suivantes. Types de couche Couche convolutionnelle (CONV) La couche convolutionnelle (en anglais  convolution layer ) (CONV) utilise des filtres qui scannent l'entrée  I I  suivant ses dimensions en effectuant des opérations de convolution. Elle peut être réglée en ajustant la taille du filtre  F F  et le stride  S S . La sortie  O O  de cette opération est appelée  feature map  ou aussi  activation map . Remarque : l'étape de convolution peut aussi être généralisée dans les cas 1D et 3D. Pooling (POOL) La couche de pooling (en anglais  pooling layer ) (POOL) est une o
Lire la suite

Comment utiliser les diagrammes PlantUML dans Visual Studio Code pour Windows 10

Image
Qu'est-ce que PlantUML ? PlantUML est un outil de création de diagramme simple qui utilise un simple langage de texte brut pour générer des diagrammes visuels. Cet outil est incroyable car il vous permet de stocker vos diagrammes sous forme de texte dans le contrôle de source, ce qui vous permet de voir les changements dans vos diagrammes au fil du temps. Exemple de composants de diagramme PlantUML Un diagramme UML Plant simple aura un composant texte et un composant image : Exemple de code PlantUML Bob-> Alice : Hello! Exemple de diagramme visuel PlantUML Le code répertorié ci-dessus est renvoyé à ceci : Ajout de la prise en charge de PlantUML au code Visual Studio Maintenant que nous avons une compréhension de base de ce qu'est PlantUML, ajoutons sa prise en charge dans Visual Studio Code. Installer l'extension PlantUML dans Visual Studio Code Ouvrez l'onglet extensions dans VS Code et recherchez  PlantUML , nous voulons installer l'  extension PlantUML par je
Lire la suite