Les extensions sont constituées de composants différents, mais cohérents. Ces 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 des extensions sont créés à l'aide de technologies de développement Web: HTML, CSS et JavaScript. Les composants d'une extension dépendent de ses fonctionnalités et peuvent ne pas nécessiter toutes les options.
Ce tutoriel va créer une extension qui permet à l'utilisateur de modifier la couleur d'arrière-plan de n'importe quelle page sur developer.chrome.com. De nombreux composants principaux sont utilisés pour présenter 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 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 état actuel.
- Ouvrez la page "Gestion des extensions" en accédant à
chrome://extensions.- Vous pouvez également ouvrir la page "Gestion des extensions" en cliquant sur le menu Chrome, en pointant sur Plus d'outils, puis en sélectionnant Extensions.
- Activez le mode développeur en cliquant sur le bouton bascule situé à côté de Mode développeur.
- Cliquez sur le bouton LOAD UNPACKED (Charger un paquet d'extensions), puis sélectionnez le répertoire d'extensions.
Et voilà ! L'extension a bien été installée. Comme aucune icône n'a été incluse dans le fichier manifeste, une icône générique de barre d'outils sera créée pour l'extension.
Ajouter une instruction
Bien que l'extension ait été installée, elle ne contient aucune instruction. Présentez un script d'arrière-plan en créant un fichier nommé background.js et en le plaçant dans le répertoire de l'extension.
Les scripts d'arrière-plan et de nombreux autres composants importants doivent être enregistrés dans le fichier manifeste. L'enregistrement d'un script d'arrière-plan dans le fichier manifeste indique à l'extension le fichier à référencer et son comportement.
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"manifest_version": 2
}
L'extension sait maintenant qu'elle inclut un script d'arrière-plan non persistant et analyse le fichier enregistré pour détecter les événements importants qu'elle doit écouter.
Cette extension aura besoin des informations d'une variable persistante dès son installation. Commencez par inclure un événement d'écoute pour runtime.onInstalled dans le script d'arrière-plan. Dans l'écouteur onInstalled, l'extension définit une valeur à l'aide de l'API storage. Cela permettra à plusieurs composants d'extension d'accéder à cette valeur et de 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 dans le champ "permissions" du 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 et cliquez sur le lien Actualiser. Un nouveau champ, Inspecter les vues, devient disponible avec un lien bleu, page d'arrière-plan.
Cliquez sur le lien pour afficher le journal de console du script d'arrière-plan, "The color is green."
Introduire une interface utilisateur
Les extensions peuvent avoir différentes formes d'interface utilisateur, mais celle-ci utilisera un pop-up.
Créez un fichier nommé popup.html et ajoutez-le au répertoire. Cette extension 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>
Comme pour le script d'arrière-plan, ce fichier doit être désigné en tant que 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 des images ici, décompressez-le et placez-le dans le répertoire de l'extension. Mettez à 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 concernant les autorisations et le 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 rechargée à ce stade, elle inclura une icône en niveaux de gris, mais elle ne présentera aucune différence de fonctionnalité. Étant donné que page_action est déclaré dans le fichier manifeste, il appartient à l'extension d'indiquer au navigateur quand l'utilisateur peut interagir avec popup.html.
Ajoutez les règles déclarées au script d'arrière-plan avec l'API declarativeContent dans l'é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 doit être autorisée à accéder à l'API declarativeContent dans son fichier manifeste.
{
"name": "Getting Started Example",
...
"permissions": ["declarativeContent", "storage"],
...
}
Le navigateur affiche désormais une icône d'action en couleur sur la page dans la barre d'outils lorsque les utilisateurs accèdent à une URL contenant "developer.chrome.com". Lorsque l'icône 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 nommé popup.js avec le code suivant dans le répertoire d'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 de popup.html et demande la valeur de la couleur à l'espace de stockage. Il applique ensuite la couleur en tant qu'arrière-plan du bouton. Incluez un tag de script pour 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 des couches
L'extension sait maintenant que le pop-up doit être disponible pour les utilisateurs sur developer.chrome.com et affiche un bouton coloré, mais nécessite une logique pour interagir davantage avec l'utilisateur. Mettez à jour popup.js pour inclure 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 un script de contenu injecté de manière programmatique. La couleur de l'arrière-plan de la page sera ainsi identique à celle du bouton. L'injection programmatique permet d'utiliser des scripts de contenu appelés par l'utilisateur au lieu d'insérer automatiquement du code indésirable dans les pages Web.
Le fichier manifeste aura besoin de l'autorisation activeTab pour autoriser l'extension à accéder temporairement à 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 le pop-up et cliquez sur le bouton pour le faire passer au vert. Cependant, certains utilisateurs peuvent vouloir modifier la couleur de l'arrière-plan.
Proposer des options aux utilisateurs
Pour le moment, l'extension permet uniquement aux utilisateurs de faire passer l'arrière-plan au vert. L'inclusion d'une page d'options permet aux utilisateurs de mieux contrôler les fonctionnalités de l'extension et de personnaliser davantage leur expérience de navigation.
Commencez par créer un fichier nommé options.html dans le répertoire 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>
Ensuite, enregistrez 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 et sélectionnez Options d'extension pour afficher la page d'options. Toutefois, elle est vide.
La dernière étape consiste à ajouter la logique d'options. Créez un fichier nommé options.js dans le répertoire d'extensions à 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 ensuite générées sous forme de boutons sur la page d'options avec des écouteurs d'événements clickserver. Lorsque l'utilisateur clique sur un bouton, la valeur de couleur est mise à jour dans l'espace de stockage global de l'extension. Étant donné que tous les fichiers de l'extension extraient les informations de couleur du stockage global, aucune autre valeur n'a besoin d'être mise à jour.
Passez à l'étape suivante
Félicitations ! Le répertoire contient désormais une extension Chrome entièrement fonctionnelle, mais simpliste.
Étape suivante
- La page de présentation des extensions Chrome fait quelques modifications et fournit de nombreuses informations sur l'architecture des extensions en général, ainsi que sur certains concepts spécifiques que les développeurs voudront connaître.
- Découvrez les options disponibles pour déboguer des extensions dans le tutoriel de débogage.
- Les extensions Chrome permettent d'accéder à de puissantes API qui vont bien au-delà de celles disponibles sur le Web ouvert. Le Chrome*. documentation sur les API, qui décrit chaque 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.