Les extensions sont des ensembles compressés de fichiers HTML, CSS, JavaScript, d'images et d'autres fichiers utilisés sur la plate-forme Web, qui personnalisent l'expérience de navigation Google Chrome. Les extensions sont créées à l'aide de la technologie Web et peuvent utiliser les mêmes API que celles fournies par le navigateur pour le Web ouvert.
Les extensions offrent un large éventail de possibilités fonctionnelles. Elles peuvent modifier le contenu Web que les utilisateurs voient et avec lequel ils interagissent, ou étendre et modifier le comportement du navigateur lui-même.
Considérez les extensions comme la passerelle qui permet de personnaliser au maximum le navigateur Chrome.
Fichiers d'extension
Les extensions varient en termes de types de fichiers et de nombre de répertoires, mais elles doivent toutes comporter un [manifest][docs-manifest]. Certaines extensions de base, mais utiles, peuvent se composer uniquement du fichier manifeste et de son icône de barre d'outils.
Le fichier manifeste, intitulé manifest.json, fournit au navigateur des informations sur l'extension, comme les fichiers les plus importants et les fonctionnalités qu'elle peut utiliser.
{
"name": "My Extension",
"version": "2.1",
"description": "Gets information from Google.",
"icons": {
"128": "icon_16.png",
"128": "icon_32.png",
"128": "icon_48.png",
"128": "icon_128.png"
},
"background": {
"persistent": false,
"scripts": ["background_script.js"]
},
"permissions": ["https://*.google.com/", "activeTab"],
"browser_action": {
"default_icon": "icon_16.png",
"default_popup": "popup.html"
}
}
Les extensions doivent comporter une icône dans la barre d'outils du navigateur. Les icônes de la barre d'outils permettent d'accéder facilement aux extensions et d'informer les utilisateurs de celles qui sont installées. La plupart des utilisateurs interagissent avec une extension qui utilise un pop-up en cliquant sur l'icône.
Cette extension Google Mail Checker utilise une action de navigateur :
Cette extension Mappy utilise une action de page et un script de contenu :
Faire référence à des fichiers
Les fichiers d'une extension peuvent être référencés à l'aide d'une URL relative, tout comme les fichiers d'une page HTML ordinaire.
<img src="images/my_image.png">
De plus, chaque fichier est également accessible à l'aide d'une URL absolue.
chrome-extension://EXTENSION_ID/PATH_TO_FILE
Dans l'URL absolue, EXTENSION_ID est un identifiant unique que le système d'extension génère pour chaque extension. Vous pouvez afficher les ID de toutes les extensions chargées en accédant à l'URL chrome://extensions. PATH_TO_FILE correspond à l'emplacement du fichier dans le dossier racine de l'extension. Il correspond à l'URL relative.
Lorsque vous travaillez sur une extension non empaquetée, son ID peut changer. Plus précisément, l'ID d'une extension décompressée change si l'extension est chargée à partir d'un autre répertoire. L'ID change à nouveau lorsque l'extension est compressée. Si le code d'une extension repose sur une URL absolue, il peut utiliser la méthode chrome.runtime.getURL() pour éviter de coder en dur l'ID pendant le développement.
Architecture
L'architecture d'une extension dépend de sa fonctionnalité, mais de nombreuses extensions robustes incluent plusieurs composants :
Script d'arrière-plan
Le script d'arrière-plan est le gestionnaire d'événements de l'extension. Il contient des écouteurs pour les événements de navigateur importants pour l'extension. Il reste inactif jusqu'à ce qu'un événement soit déclenché, puis exécute la logique indiquée. Un script d'arrière-plan efficace n'est chargé que lorsqu'il est nécessaire et déchargé lorsqu'il est inactif.
Éléments d'interface utilisateur
L'interface utilisateur d'une extension doit être ciblée et minimaliste. L'UI doit personnaliser ou améliorer l'expérience de navigation sans la perturber. La plupart des extensions comportent une action de navigateur ou une action de page, mais peuvent contenir d'autres formes d'UI, telles que des menus contextuels, l'utilisation de l'omnibox ou la création d'un raccourci clavier.
Les pages de l'interface utilisateur des extensions, telles que les pop-ups, peuvent contenir des pages HTML ordinaires avec une logique JavaScript. Les extensions peuvent également appeler tabs.create ou window.open() pour afficher les fichiers HTML supplémentaires présents dans l'extension.
Une extension utilisant une action de page et un pop-up peut utiliser l'API declarativeContent pour définir des règles dans le script d'arrière-plan afin de déterminer quand le pop-up est disponible pour les utilisateurs. Lorsque les conditions sont remplies, le script d'arrière-plan communique avec le pop-up pour rendre son icône cliquable pour les utilisateurs.
Scripts de contenu
Les extensions qui lisent ou écrivent des pages Web utilisent un script de contenu. Le script de contenu contient du code JavaScript qui s'exécute dans le contexte d'une page qui a été chargée dans le navigateur. Les scripts de contenu lisent et modifient le DOM des pages Web visitées par le navigateur.
Les scripts de contenu peuvent communiquer avec leur extension parente en échangeant des messages et en stockant des valeurs à l'aide de l'API storage.
Page des options
Tout comme les extensions permettent aux utilisateurs de personnaliser le navigateur Chrome, la page d'options permet de personnaliser l'extension. Les options peuvent être utilisées pour activer des fonctionnalités et permettre aux utilisateurs de choisir celles qui répondent à leurs besoins.
Utiliser les API Chrome
En plus d'avoir accès aux mêmes API que les pages Web, les extensions peuvent également utiliser des API spécifiques aux extensions qui permettent une intégration étroite avec le navigateur. Les extensions et les pages Web peuvent accéder à la méthode window.open() standard pour ouvrir une URL, mais les extensions peuvent spécifier la fenêtre dans laquelle cette URL doit s'afficher en utilisant plutôt la méthode tabs.create de l'API Chrome.
Méthodes asynchrones et synchrones
La plupart des méthodes de l'API Chrome sont asynchrones : elles renvoient immédiatement une réponse, sans attendre la fin de l'opération. Si une extension a besoin de connaître le résultat d'une opération asynchrone, elle peut transmettre une fonction de rappel à la méthode. Le rappel est exécuté plus tard, potentiellement beaucoup plus tard, après le retour de la méthode.
Si l'extension devait rediriger l'onglet actuellement sélectionné par l'utilisateur vers une nouvelle URL, elle devrait obtenir l'ID de l'onglet actuel, puis mettre à jour l'adresse de cet onglet avec la nouvelle URL.
Si la méthode tabs.query était synchrone, elle pourrait ressembler à ce qui suit.
//THIS CODE DOESN'T WORK
var tab = chrome.tabs.query({'active': true}); //WRONG!!!
chrome.tabs.update(tab.id, {url:newUrl});
someOtherFunction();
Cette approche échouera, car query() est asynchrone. Elle renvoie une réponse sans attendre la fin de l'opération et ne renvoie aucune valeur. Une méthode est asynchrone lorsque le paramètre de rappel est disponible dans sa signature.
// Signature for an asynchronous method
chrome.tabs.query(object queryInfo, function callback)
Pour interroger correctement un onglet et mettre à jour son URL, l'extension doit utiliser le paramètre de rappel.
//THIS CODE WORKS
chrome.tabs.query({'active': true}, function(tabs) {
chrome.tabs.update(tabs[0].id, {url: newUrl});
});
someOtherFunction();
Dans le code ci-dessus, les lignes sont exécutées dans l'ordre suivant : 1, 4, 2. La fonction de rappel spécifiée pour query() est appelée, puis la ligne 2 est exécutée, mais uniquement après que les informations sur l'onglet actuellement sélectionné sont disponibles. Cela se produit quelque temps après le retour de query(). Bien que update() soit asynchrone, le code n'utilise pas de paramètre de rappel, car l'extension ne fait rien avec les résultats de la mise à jour.
// Synchronous methods have no callback option and returns a type of string
string chrome.runtime.getURL()
Cette méthode renvoie de manière synchrone l'URL sous la forme d'un string et n'effectue aucune autre tâche asynchrone.
Plus de détails
Pour en savoir plus, consultez la documentation de référence de l'API Chrome et regardez la vidéo suivante.
Communication entre les pages
Les différents composants d'une extension doivent souvent communiquer entre eux. Différentes pages HTML peuvent se trouver mutuellement à l'aide des méthodes chrome.extension, telles que getViews() et getBackgroundPage(). Une fois qu'une page fait référence à d'autres pages d'extension, la première peut appeler des fonctions sur les autres pages et manipuler leurs DOM. De plus, tous les composants de l'extension peuvent accéder aux valeurs stockées à l'aide de l'API storage et communiquer via le transfert de messages.
Enregistrer des données et le mode navigation privée
Les extensions peuvent enregistrer des données à l'aide de l'API storage, de l'API HTML5 Web Storage ou en effectuant des requêtes de serveur qui entraînent l'enregistrement de données. Lorsque l'extension doit enregistrer quelque chose, vérifiez d'abord si cela provient d'une fenêtre de navigation privée. Par défaut, les extensions ne s'exécutent pas dans les fenêtres de navigation privée.
Le mode navigation privée promet qu'aucune trace ne sera laissée. Lorsqu'elles traitent des données provenant de fenêtres de navigation privée, les extensions doivent respecter cette promesse. Si une extension enregistre normalement l'historique de navigation, ne l'enregistrez pas à partir des fenêtres de navigation privée. Toutefois, les extensions peuvent stocker les préférences de paramètres de n'importe quelle fenêtre, qu'elle soit en mode navigation privée ou non.
Pour détecter si une fenêtre est en mode navigation privée, vérifiez la propriété incognito de l'objet tabs.Tab ou windows.Window concerné.
function saveTabData(tab) {
if (tab.incognito) {
return;
} else {
chrome.storage.local.set({data: tab.url});
}
}
Passez à l'étape suivante
Après avoir lu la présentation et suivi le tutoriel Premiers pas, les développeurs devraient être prêts à écrire leurs propres extensions. Pour en savoir plus sur la personnalisation de Chrome, consultez les ressources suivantes.
- Découvrez les options disponibles pour déboguer les extensions dans le tutoriel sur le débogage.
- Les extensions Chrome ont accès à des API puissantes qui vont au-delà de ce qui est disponible sur le Web ouvert. chrome.* La documentation sur les API vous guidera pour chaque API.
- La présentation du développement d'extensions contient des dizaines de liens supplémentaires vers des éléments de documentation utiles pour la création d'extensions avancées.