Présentation de l'architecture

Les extensions sont des groupes 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 dans Google Chrome. Les extensions sont conçues à l'aide d'une technologie Web et peuvent utiliser les mêmes API que celles fournies par le navigateur au Web ouvert.

Les extensions offrent de nombreuses possibilités fonctionnelles. Ils peuvent modifier le contenu Web que les utilisateurs voient et interagir avec, ou étendre et modifier le comportement du navigateur lui-même.

Elles peuvent être la passerelle qui permet de faire du navigateur Chrome le navigateur le plus personnalisé.

Fichiers d'extension

Les extensions varient en fonction du type de fichier et de la quantité de répertoires, mais elles doivent toutes inclure un [manifest][docs-manifest]. Certaines extensions basiques, mais utiles, peuvent se composer uniquement du fichier manifeste et de son icône dans la barre d'outils.

Le fichier manifeste, intitulé manifest.json, fournit au navigateur des informations sur l'extension, telles que 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 située dans la barre d'outils du navigateur. Les icônes de la barre d’outils permettent d’accéder facilement et d’informer les utilisateurs des extensions installées. La plupart des utilisateurs interagissent avec une extension qui utilise un pop-up en cliquant sur l'icône.

Cette extension Vérificateur de messages Google utilise une action de navigateur:

Capture d'écran de l'extension Vérificateur de messages Google

Cette extension Mappy utilise une action de page et un script de contenu:

Capture d'écran de l'extension Mappy

Faire référence à des fichiers

Vous pouvez faire référence aux fichiers d'une extension à l'aide d'une URL relative, 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 est l'emplacement du fichier dans le dossier supérieur de l'extension. Il correspond à l'URL relative.

Lorsque vous travaillez sur une extension non empaquetée, l'ID de l'extension peut changer. Plus précisément, l'ID d'une extension non empaquetée change si elle est chargée à partir d'un autre répertoire. L'ID changera de nouveau lorsque l'extension sera empaquetée. Si le code d'une extension repose sur une URL absolue, elle peut utiliser la méthode chrome.runtime.getURL() pour éviter de coder en dur l'ID lors du développement.

Architecture

L'architecture d'une extension dépend de ses fonctionnalités, 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. Elle reste inactive jusqu'à ce qu'un événement soit déclenché, puis exécute la logique demandée. Un script d'arrière-plan efficace n'est chargé que lorsqu'il est nécessaire et déchargé lorsqu'il devient inactif.

Éléments de l'interface utilisateur

L'interface utilisateur d'une extension doit être pertinente et minimale. L'UI doit personnaliser ou améliorer l'expérience de navigation sans la perturber. La plupart des extensions disposent d'une action de navigateur ou d'une action de page, mais peuvent contenir d'autres formes d'interface utilisateur, telles que des menus contextuels, l'utilisation de l'omnibox ou la création d'un raccourci clavier.

Les pages d'interface utilisateur des extensions, telles qu'une fenêtre pop-up, peuvent contenir des pages HTML ordinaires avec une logique JavaScript. Les extensions peuvent également appeler tabs.create ou window.open() pour afficher des fichiers HTML supplémentaires présents dans l'extension.

Une extension utilisant une action de page et un pop-up peut utiliser l'API de contenu déclaratif pour définir des règles dans le script d'arrière-plan pour déterminer quand le pop-up est disponible pour les utilisateurs. Lorsque ces conditions sont remplies, le script d'arrière-plan communique avec le pop-up pour que les utilisateurs puissent cliquer sur son icône.

Fenêtre de navigateur contenant une action de page dans un pop-up

Scripts de contenu

Les extensions qui lisent ou écrivent sur des pages Web utilisent un script de contenu. Le script de contenu contient du code JavaScript qui s'exécute dans les contextes d'une page chargée dans le navigateur. Les scripts de contenu lisent et modifient le DOM des pages Web visitées par le navigateur.

Fenêtre de navigateur avec une action de page et un script de contenu

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.

Affiche un chemin de communication entre le script de contenu et l&#39;extension parente

Page d'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 celle qui correspond à leurs besoins.

Utilisation des API Chrome

En plus d'avoir accès aux mêmes API que les pages Web, les extensions peuvent utiliser des API spécifiques aux extensions, qui créent une intégration étroite avec le navigateur. Les extensions et les pages Web peuvent toutes deux accéder à la méthode window.open() standard pour ouvrir une URL, mais les extensions peuvent spécifier la fenêtre dans laquelle l'URL doit être affichée en utilisant la méthode tabs.create de l'API Chrome.

Méthodes synchrones ou asynchrones

La plupart des méthodes d'API Chrome sont asynchrones: elles sont renvoyées immédiatement sans attendre la fin de l'opération. Si une extension doit 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, voire beaucoup plus tard, une fois la méthode renvoyée.

Si l'extension doit accéder à une nouvelle URL de l'onglet actuellement sélectionné par l'utilisateur, elle doit 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 est synchrone, elle peut se présenter comme 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 est renvoyée sans attendre la fin de l'opération et ne renvoie pas de 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 exécute la ligne 2, mais seulement une fois 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 n'effectue aucune action 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 l'URL de manière synchrone en tant que string et n'effectue aucune autre tâche asynchrone.

Plus d'informations

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

Différents composants d'une extension ont souvent besoin de communiquer entre eux. Différentes pages HTML peuvent se trouver à 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 la transmission de messages.

Enregistrement des données et mode navigation privée

Les extensions peuvent enregistrer des données à l'aide de l'API storage ou de l'API de stockage Web HTML5, ou en effectuant des requêtes serveur afin d'économiser des données. Lorsque l'extension doit enregistrer un élément, déterminez d'abord si elle 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 garantit que la fenêtre ne laissera aucune piste. Lorsqu'il s'agit de données provenant de fenêtres de navigation privée, les extensions doivent tenir cette promesse. Si une extension enregistre normalement l'historique de navigation, n'enregistrez pas l'historique à partir des fenêtres de navigation privée. Toutefois, les extensions peuvent stocker vos préférences de paramètres à partir de n'importe quelle fenêtre, 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 terminé le tutoriel de démarrage, les développeurs devraient être prêts à créer leurs propres extensions. Approfondissez vos connaissances sur l'univers Chrome personnalisé grâce aux ressources suivantes.