google-chrome-extension Tutoriel
Démarrer avec google-chrome-extension

Remarques

Exemple minimum absolu

Toute extension Chrome démarre en tant qu'extension décompressée : un dossier contenant les fichiers de l'extension.

Un fichier qu'il doit contenir est manifest.json , qui décrit les propriétés de base de l'extension. La plupart des propriétés de ce fichier sont facultatives, mais voici un fichier manifest.json minimum absolu:

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0"
}

Créez un dossier (par exemple, myExtension ) quelque part, ajoutez manifest.json comme indiqué ci-dessus.

Ensuite, vous devez charger l'extension dans Chrome.

1. Ouvrez la page chrome://extensions/ , accessible par Menu> Plus d'outils> Extensions .
2. Activez le mode développeur avec une case à cocher en haut à droite, si ce n'est déjà fait.
3. Cliquez sur le bouton Charger une extension décompressée ... et sélectionnez le dossier myExtension créé.

C'est tout! Votre première extension est chargée par Google Chrome:

Bien sûr, cela ne fait rien pour le moment, c'est donc un bon moment pour lire un aperçu de l'architecture des extensions pour commencer à ajouter des pièces dont vous avez besoin.

Important: lorsque vous apportez des modifications à votre extension, n'oubliez pas de revenir à chrome://extensions/ et appuyez sur le lien Recharger de votre extension après avoir apporté des modifications. En cas de scripts de contenu, rechargez également la page cible.

Page de fond

Les pages d'arrière-plan sont des pages implicites contenant des scripts d'arrière-plan. Un script d'arrière-plan est un script long et unique permettant de gérer une tâche ou un état. Il existe pour la durée de vie de votre extension et une seule instance à la fois est active.

Vous pouvez le déclarer comme ceci dans votre manifest.json :

"background": {
    "scripts": ["background.js"]
}

Une page d'arrière-plan sera générée par le système d'extension qui inclut chacun des fichiers répertoriés dans la propriété scripts.

Vous avez accès à toutes les API chrome.* Autorisées.

Il existe deux types de pages d'arrière-plan: les pages d'arrière-plan persistantes qui sont toujours ouvertes et les pages d'événements ouvertes et fermées selon les besoins.

Si vous voulez que votre page d'arrière-plan ne soit pas persistante, il vous suffit de définir le paramètre -flag persistent sur false:

"background": {
    "scripts": ["eventPage.js"],
    "persistent": false
}

Ce script d'arrière-plan n'est actif que si un événement est déclenché sur lequel un auditeur est enregistré. En général, vous utilisez un addListener pour l'enregistrement.

Exemple: L'application ou l'extension est d'abord installée.

chrome.runtime.onInstalled.addListener(function() {
   console.log("The Extension is installed!");
});

Scripts de contenu

Un script de contenu est un code d'extension qui s'exécute à côté d'une page normale.

Ils ont un accès complet au DOM de la page Web (et sont, en fait, la seule partie de l'extension pouvant accéder au DOM de la page ), mais le code JavaScript est isolé, un concept appelé Isolated World . Chaque extension a son propre contexte JavaScript de script de contenu invisible pour les autres et la page, empêchant les conflits de code.

Exemple de définition dans manifest.json :

  "content_scripts": [
    {
      "matches": ["http://www.stackoverflow.com/*"],
      "css": ["style.css"],
      "js": ["jquery.js", "myscript.js"]
    }
  ]

Les attributs ont la signification suivante:

Les scripts de contenu peuvent également être injectés à la demande en utilisant chrome.tabs.executeScript , appelé Injection programmatique .

Voir également

• Documentation officielle: Scripts de contenu
• Documentation de débordement de pile: scripts de contenu

Page d'options

Les pages d'options permettent à l'utilisateur de conserver les paramètres de votre extension.

Version 2

Depuis Chrome 40, il est possible d’avoir la page d’option comme dialogue prédéfini sur les extensions chrome: // .

La manière de définir une page d’option dans le manifest.json est la suivante:

"options_ui": {
    "page": "options.html",
    "chrome_style": true
}

Cette page d'options se comportera comme un dialogue, elle s'ouvrira comme une fenêtre contextuelle, où les options.html seront affichées. chrome_style appliquera une feuille de style Chrome pour des raisons de cohérence de style à votre page d'options.

Les options seront automatiquement exposées via le menu contextuel du bouton d'extension ou la page chrome: // extensions .

Vous pouvez également ouvrir la page d'options par programmation , par exemple depuis une interface utilisateur contextuelle:

chrome.runtime.openOptionsPage();

Version 1 ( obsolète )

Exemple de définition dans manifest.json :

"options_page": "options.html"

Il est recommandé d'utiliser la version 2 car le comportement options_ui sera bientôt appliqué aux pages d'options de la version 1.

Espace de rangement

Normalement, les paramètres doivent persister, il est donc recommandé d’utiliser l’API chrome.storage . Les autorisations peuvent être déclarées comme ceci dans le manifest.json :

"permissions": [
   "storage"
]

Documentation officielle

• Page d'options - Version 1
• Page d'options - Version 2
• API de stockage

Créer un nouvel onglet

Dans le code d'extension, vous pouvez utiliser n'importe quelle API chrome.* Si vous préférez les autorisations requises. En outre, certaines API ne fonctionnent qu'à partir de pages d'arrière-plan, et certaines API ne fonctionnent qu'à partir de scripts de contenu.

Vous pouvez utiliser la plupart des méthodes chrome.tabs déclarant des autorisations. Maintenant, nous nous concentrons sur chrome.tabs.create

_{Remarque: Le nouvel onglet sera ouvert sans avertissement popup .}

chrome.tabs.create({
       url:"http://stackoverflow.com",
       selected:false  // We open the tab in the background
})

Vous pouvez en apprendre plus sur l'objet tab, dans le développeur chrome officiel