Présentation de l'architecture

Les extensions sont des dossiers compressés de fichiers HTML, CSS, JavaScript, d'images et d'autres fichiers utilisés sur le Web. plate-forme, qui personnalisent l'expérience de navigation dans Google Chrome. Les extensions sont créées à l'aide du Web et peut utiliser les mêmes API que celles que le navigateur fournit au Web ouvert.

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

Considérez les extensions comme la porte d'entrée pour faire du navigateur Chrome le navigateur le plus personnalisé.

Fichiers d'extension

Les extensions varient par les types de fichiers et le nombre de répertoires, mais elles doivent toutes avoir une [manifest][docs-manifest]. Certaines extensions de base, mais utiles, peuvent se composer uniquement du fichier manifeste et son icône de barre d’outils.

Le fichier manifeste, intitulé manifest.json, fournit au navigateur des informations sur l'extension, telles que comme les fichiers les plus importants et les fonctionnalités que l'extension 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 tenir les utilisateurs informés des extensions installées. La plupart des utilisateurs interagissent avec une extension qui utilise un pop-up en cliquant sur l'icône.

L'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 sur la page et du contenu script:

Capture d'écran de l'extension Mappy

Faire référence à des fichiers

Les fichiers d'une extension peuvent être désignés par une URL relative, tout comme les fichiers d'un code HTML ordinaire .

<img src="images/my_image.png">

De plus, chaque fichier est également accessible au moyen 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. Pour afficher les ID de toutes les extensions chargées, accédez à l'URL chrome://extensions. PATH_TO_FILE correspond à l'emplacement du fichier sous dossier racine de l'extension. elle correspond à l'URL relative.

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

Architecture

L'architecture d'une extension dépendra de ses fonctionnalités, mais de nombreuses extensions robustes incluent plusieurs composants:

Script en arrière-plan

Le script en arrière-plan est le gestionnaire d'événements de l'extension. il contient les écouteurs pour les événements de navigateur importants pour l'extension. Il reste inactif jusqu'au déclenchement d'un événement, exécute la logique indiquée. Un script d'arrière-plan efficace n'est chargé que lorsque c'est nécessaire. 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 pour autant détourner l'attention de l'utilisateur. La plupart des extensions disposent d'un navigateur action ou action sur la page, mais peuvent contenir d'autres formes d'UI, comme les menus contextuels, l'utilisation de l'omnibox ou la création d'un raccourci clavier.

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

Une extension utilisant une action sur la page et un pop-up peut utiliser la fonction déclarative content pour définir des règles dans le script en arrière-plan lorsque le pop-up est à la disposition des utilisateurs. Lorsque les conditions sont remplies, le script en arrière-plan communique avec le pop-up. pour rendre son icône cliquable pour les utilisateurs.

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

Scripts de contenu

Les extensions qui lisent ou écrivent des pages Web utilisent un script de contenu. La 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 consulté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 stocker des valeurs à l'aide de l'API storage.

Indique 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. Ces options permettent d'activer les fonctionnalités et d'autoriser les utilisateurs à à choisir la fonctionnalité la plus adaptée à 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 API spécifiques aux extensions qui créent une intégration étroite avec le navigateur. Extensions et les pages Web peuvent à la fois 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 s'afficher à l'aide de l'API Chrome ; tabs.create.

Méthodes asynchrones et méthodes synchrones

La plupart des méthodes de l'API Chrome sont asynchrones: elles renvoient immédiatement un résultat, sans attendre l'opération. pour terminer. Si une extension a besoin de connaître le résultat d'une opération asynchrone, elle peut transmettre une de rappel dans la méthode. Le rappel est exécuté ultérieurement, potentiellement bien plus tard, après l'événement .

Si l'extension devait permettre d'accéder à une nouvelle URL dans l'onglet actuellement sélectionné de 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 était synchrone, elle pourrait ressembler à l'exemple ci-dessous.

//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 le résultat. et ne renvoie pas de valeur. Une méthode est asynchrone lorsque le paramètre de rappel est 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é dans query() est appelé, puis exécute la ligne 2, mais uniquement après avoir obtenu des informations sur la l'onglet actuellement sélectionné est disponible. Cela se produit quelque temps après le retour de query(). Bien que update() est asynchrone. Le code n'utilise pas de paramètre de rappel, car l'extension ne le fait pas. 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 sous forme de string et n'effectue aucune autre tâche asynchrone.

Plus de détails

Pour plus d'informations, consultez la documentation de référence de l'API Chrome et regardez ce qui suit vidéo.

Communication entre les pages

Les différents composants d'une extension doivent souvent 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 d'invoquer des fonctions sur les autres pages et de manipuler leurs DOM. En outre, tous les composants peut accéder aux valeurs stockées à l'aide de l'API storage et communiquer via transmission de messages.

Économie de données et mode navigation privée

Les extensions peuvent enregistrer des données à l'aide de l'API storage, le stockage Web HTML5 API ou en effectuant des requêtes serveur qui permettent d'économiser des données. Lorsque l'extension doit enregistrer quelque chose, vérifiez d'abord si elle provient d'une fenêtre de navigation privée. Par défaut, les extensions ne s'exécutent pas dans des fenêtres de navigation privée.

En mode navigation privée, vous êtes sûr que la fenêtre ne laissera aucune trace. Lorsqu’il s’agit de données provenant de les extensions devraient respecter cet engagement. Si une extension enregistre normalement la navigation historique, ne pas enregistrer l'historique depuis les fenêtres de navigation privée. Toutefois, les extensions peuvent stocker des paramètres depuis 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 la Un objet tabs.Tab ou windows.Window

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 Premiers pas, procédez comme suit : les développeurs doivent être prêts à écrire leurs propres extensions ! Plongez au cœur du monde de personnaliser Chrome avec les ressources suivantes.