Premiers pas

Les extensions sont constituées de composants différents, mais cohérents. Les composants peuvent inclure des éléments des scripts, 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 à l'aide de technologies de développement Web: HTML, CSS et JavaScript. Une les composants de l'extension dépendent de ses fonctionnalités et peuvent ne pas nécessiter toutes les options.

Dans ce tutoriel, nous allons créer une extension qui permettra à l'utilisateur de modifier la couleur d'arrière-plan sur developer.chrome.com. Il utilisera de nombreux composants de base pour présenter une démonstration de leurs relations.

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

L'extension terminée est disponible ici.

Créer le fichier manifeste

Les extensions commencent par leur fichier manifeste. Créez un fichier nommé manifest.json et incluez le le code suivant.

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

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

1. Ouvrez la page "Gestion des extensions" en accédant à chrome://extensions.
   • Vous pouvez également accéder à la page "Gestion des extensions" en cliquant sur le menu Chrome, Plus d'outils, puis sélectionnez Extensions.
2. Activez le mode développeur en cliquant sur le bouton bascule à côté de Mode développeur.
3. Cliquez sur le bouton LOAD UNPACKED (Charger UNPACKED), puis sélectionnez le répertoire de l'extension.

Et voilà ! L'extension a bien été installée. Comme aucune icône n'était incluse dans manifeste, une icône générique sera créée pour l'extension dans la barre d'outils.

Ajouter une instruction

Bien que l'extension ait été installée, elle ne comporte aucune instruction. Présentez un script en arrière-plan. en créant un fichier nommé background.js et en le plaçant dans la du répertoire d'extensions.

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

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "manifest_version": 2
}

L'extension est désormais consciente qu'elle inclut un script d'arrière-plan non persistant et analyse le enregistré pour les événements importants qu’il doit écouter.

Dès qu'elle sera installée, cette extension aura besoin d'informations provenant d'une variable persistante. Commencez par y compris un événement d'écoute pour runtime.onInstalled dans le script d'arrière-plan. Au cœur de la onInstalled, l'extension définit une valeur à l'aide de l'API storage. Cela permettra plusieurs composants d'extension pour accéder à cette valeur et la mettre à jour.

chrome.runtime.onInstalled.addListener(function() {
  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log("The color is green.");
  });
});

La plupart des API, y compris l'API storage, doivent être enregistrées sous le champ "permissions" dans le fichier manifeste pour que l'extension les utilise.

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

Revenez à la page de gestion des extensions, puis cliquez sur le lien Actualiser. Un nouveau champ, Inspecter vues, devient disponible via un lien bleu, page en arrière-plan.

Cliquez sur le lien pour afficher le journal de console du script d'arrière-plan, "The color is green.".

Présenter une interface utilisateur

Les extensions peuvent présenter plusieurs formes d'interface utilisateur, mais celle-ci utilisera un pop-up. Créez un fichier nommé popup.html et ajoutez-le au répertoire. Ce utilise un bouton pour modifier la couleur d'arrière-plan.

<!DOCTYPE html>
<html>
  <head>
    <style>
      button {
        height: 30px;
        width: 30px;
        outline: none;
      }
    </style>
  </head>
  <body>
    <button id="changeColor"></button>
  </body>
</html>

Tout comme le script d'arrière-plan, ce fichier doit être désigné comme pop-up dans le fichier manifeste sous page_action

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "permissions": ["storage"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "page_action": {
    "default_popup": "popup.html"
  },
  "manifest_version": 2
}

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

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "permissions": ["storage"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "page_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"
    }
  },
  "manifest_version": 2
}

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

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "permissions": ["storage"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "page_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"
  },
  "manifest_version": 2
}

Si l'extension est actualisée à ce stade, l'icône affiche une icône en nuances de gris, mais elle ne contient pas les éventuelles différences de fonctionnalité. Comme page_action est déclaré dans le fichier manifeste, c'est au pour indiquer au navigateur quand l'utilisateur peut interagir avec popup.html.

Ajoutez des règles déclarées au script d'arrière-plan avec l'API declarativeContent dans le Événement d'écouteur runtime.onInstalled.

chrome.runtime.onInstalled.addListener(function() {
  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log('The color is green.');
  });
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [new chrome.declarativeContent.PageStateMatcher({
        pageUrl: {hostEquals: 'developer.chrome.com'},
      })
      ],
          actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
  });
});

L'extension a besoin d'une autorisation pour accéder à l'API declarativeContent dans son fichier manifeste.

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

Le navigateur affichera désormais une icône d'action en couleur dans la barre d'outils du navigateur lorsque les utilisateurs navigueront vers une URL contenant "developer.chrome.com". Lorsqu'elle est en couleur, les utilisateurs peuvent cliquer dessus pour afficher popup.html.

La dernière étape de l'interface utilisateur pop-up consiste à ajouter de la couleur au bouton. Créez et ajoutez un fichier appelé popup.js par le code suivant dans le répertoire de l'extension.

let changeColor = document.getElementById('changeColor');

chrome.storage.sync.get('color', function(data) {
  changeColor.style.backgroundColor = data.color;
  changeColor.setAttribute('value', data.color);
});

Ce code récupère le bouton à partir de popup.html et demande la valeur de couleur à l'espace de stockage. Ensuite, applique la couleur comme arrière-plan du bouton. Ajoutez un tag de script à popup.js dans popup.html

<!DOCTYPE html>
<html>
...
  <body>
    <button id="changeColor"></button>
    <script src="popup.js"></script>
  </body>
</html>

Actualisez l'extension pour afficher le bouton vert.

Logique du calque

L'extension sait maintenant que le pop-up doit être disponible pour les utilisateurs de developer.chrome.com et affiche un bouton de couleur, mais nécessite une logique pour une action supplémentaire de l'utilisateur. Remplacer popup.js par incluez le code suivant.

let changeColor = document.getElementById('changeColor');
...
changeColor.onclick = function(element) {
  let color = element.target.value;
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.executeScript(
        tabs[0].id,
        {code: 'document.body.style.backgroundColor = "' + color + '";'});
  });
};

Le code mis à jour ajoute un événement onclick au bouton, ce qui déclenche une injection de code script de contenu. La couleur d'arrière-plan de la page est alors remplacée par celle du bouton. En utilisant L'injection programmatique permet d'insérer des scripts de contenu appelés par l'utilisateur, au lieu d'insérer automatiquement dans les pages Web.

Le fichier manifeste a besoin de l'autorisation activeTab pour permettre à l'extension d'accéder temporairement aux l'API tabs. Cela permet à l'extension d'appeler tabs.executeScript.

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

L'extension est désormais entièrement fonctionnelle. Actualisez l'extension, actualisez cette page, ouvrez la fenêtre pop-up et cliquez sur le bouton pour qu'il devienne vert ! Toutefois, certains utilisateurs peuvent vouloir remplacer l'arrière-plan par couleur différente.

Proposer des options aux utilisateurs

Actuellement, l'extension permet uniquement aux utilisateurs de changer l'arrière-plan en vert. Inclure une option permet aux utilisateurs de mieux contrôler les fonctionnalités de l'extension et de personnaliser davantage leur navigation. expérience.

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

<!DOCTYPE html>
<html>
  <head>
    <style>
      button {
        height: 30px;
        width: 30px;
        outline: none;
        margin: 10px;
      }
    </style>
  </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 fichier manifeste,

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

Actualisez l'extension, puis cliquez sur DÉTAILS.

Faites défiler la page d'informations vers le bas et sélectionnez Options d'extension pour afficher la page des options. apparaît vide.

La dernière étape consiste à ajouter la logique d'options. Créez un fichier nommé options.js dans le répertoire de l'extension. à l'aide du code suivant.

let page = document.getElementById('buttonDiv');
const kButtonColors = ['#3aa757', '#e8453c', '#f9bb2d', '#4688f1'];
function constructOptions(kButtonColors) {
  for (let item of kButtonColors) {
    let button = document.createElement('button');
    button.style.backgroundColor = item;
    button.addEventListener('click', function() {
      chrome.storage.sync.set({color: item}, function() {
        console.log('color is ' + item);
      })
    });
    page.appendChild(button);
  }
}
constructOptions(kButtonColors);

Quatre options de couleur sont proposées, puis générées sous forme de boutons sur la page d'options avec l'événement "onclick". pour les auditeurs. Lorsque l'utilisateur clique sur un bouton, la valeur de la couleur est mise à jour dans la liste globale de l'extension. stockage. Étant donné que tous les fichiers de l'extension extraient les informations de couleur du stockage global, aucun autre les valeurs doivent être mises à jour.

Passez à l'étape suivante

Félicitations ! Le répertoire contient désormais une extension Chrome entièrement fonctionnelle, quoique simple,

Étape suivante

• La présentation de l'extension Chrome contient quelques informations qui vous permettront d'obtenir des informations plus détaillées sur les l'architecture des extensions en général, ainsi que certains concepts spécifiques que les développeurs doivent connaître ; .
• Découvrez les options de débogage des extensions dans le tutoriel de débogage.
• Les extensions Chrome vous donnent accès à des API performantes, en plus de celles disponibles sur le Web ouvert. Le modèle chrome.* de la documentation sur les API.
• Le guide du développeur contient des dizaines de liens supplémentaires vers des documents pertinents pour la création avancée d'extensions.