J'ai développé une extension Chrome ce week-end parce que je me suis retrouvé à effectuer les mêmes taches à plusieurs reprises et à les automatiser. De plus, je suis un geek qui reste à la maison pour survivre à l'épidémie, donc je consacrerai mon énergie accumulée à la création de choses. J'ai développé des extensions de chrome au fil des ans, et j'espère que cet article vous aidera également à démarrer. Commen?ons!

Créer un fichier manifeste

La première étape consiste à créer un fichier nommé manifest.json et à le placer dans le dossier du projet. Sa fonction est similaire à package.json , qui fournit des informations importantes sur le projet pour le Chrome Web App Store, y compris le nom, la version, les autorisations requises, etc. Voici un exemple:

 {
  "manifeste_version": 2,
  "Nom": "Exemple de nom",
  "version": "1.0.0",
  "Description": "Ceci est un exemple de description",
  "short_name": "Exemple de nom abréviation",
  "Autorisations": ["Activetab", "DecarativeContent", "Storage", "<all_urls> "],
  "content_scripts": [
    {
      "Matches": ["<all_urls> "],
      "css": ["background.css"],
      "js": ["background.js"]
    }
  ],
  "Browser_Action": {
    "default_title": "Exécutez une action lors de l'exécution d'une action",
    "default_popup": "popup.html",
    "default_icon": {
      "16": "ic?nes / icon16.png",
      "32": "Icons / icon32.png"
    }
  }
}</all_urls></all_urls>

Vous remarquerez peut-être certains détails - Premièrement: le nom et la description peuvent être remplis comme vous le souhaitez.

Les autorisations dépendent de ce que l'extension doit effectuer. Dans cet exemple, nous utilisons ["activeTab", "declarativeContent", "storage", "<all_urls> "]</all_urls> , comme cette extension particulière nécessite des informations sur la balise active, doit modifier le contenu de la page, doit accéder à LocalStorage et doit être actif sur tous les sites Web. S'il doit être actif sur un seul site Web, nous pouvons supprimer le dernier index de ce tableau.

La documentation d'extension de Chrome répertorie toutes les autorisations et leur signification.

 "content_scripts": [
  {
    "Matches": ["<all_urls> "],
    "css": ["background.css"],
    "js": ["background.js"]
  }
],</all_urls>

content_scripts définit le site où l'extension doit être active. Si vous voulez un site Web séparé, comme Twitter, vous pouvez l'écrire comme ["https://twitter.com/*"] . Les fichiers CSS et JavaScript sont tout ce dont vous avez besoin pour une extension. Par exemple, mon extension Twitter efficace utilise ces fichiers pour écraser l'apparence par défaut de Twitter.

 "Browser_Action": {
  "default_title": "Exécutez une action lors de l'exécution d'une action",
  "default_popup": "popup.html",
  "default_icon": {
    "16": "ic?nes / icon16.png",
    "32": "Icons / icon32.png"
  }
}

Certains contenus dans browser_action sont également facultatifs. Par exemple, si une extension ne nécessite pas de contexte pour implémenter ses fonctionnalités, vous pouvez supprimer default_title et default_popup . Dans ce cas, seule l'ic?ne de l'extension est nécessaire. Si l'extension n'est valable que sur certains sites Web, Chrome gris l'ic?ne de l'extension lorsqu'il est inactif.

déboguer

Une fois que le fichier manifeste, les fichiers CSS et JavaScript sont prêts, visitez chrome://extensions/ dans la barre d'adresse du navigateur et activez le mode développeur. Cela activera le bouton de charge décompressée pour ajouter le fichier d'extension. Vous pouvez également changer si la version développeur de l'extension est active.

Je recommande fortement de démarrer un référentiel GitHub pour le contr?le de version à ce stade. C'est un excellent moyen de sauver votre travail.

Lors de la mise à jour de l'extension, il doit être rechargé à partir de cette interface. Une petite ic?ne d'actualisation sera affichée à l'écran. De plus, si l'extension subit des erreurs pendant le développement, elle affichera également un bouton d'erreur avec la trace de pile et plus d'informations ici.

Fonction de fenêtre contextuelle

Heureusement, cela est très simple si l'extension doit utiliser une fenêtre contextuelle qui appara?t à partir de l'ic?ne d'extension. Après avoir spécifié le nom de fichier avec browser_action dans le fichier manifeste, vous pouvez utiliser n'importe quel HTML et CSS que vous aimez créer la page, y compris les images (j'ai tendance à utiliser en ligne SVG).

Nous devrons peut-être ajouter des fonctionnalités à la fenêtre contextuelle. Cela peut nécessiter un JavaScript, alors assurez-vous de spécifier le fichier JavaScript dans le fichier manifeste et de le lier également dans votre fichier contextuel comme suit:

Dans ce fichier, créez d'abord la fonction, nous accéderons au DOM popup comme ceci:

 document.addeventListener ("DomContentloaded", () => {
  var bouton = document.getElementById ("soumettre");

  Button.AdDeventListener ("cliquez", (e) => {
    console.log (e);
  });
});

Si nous créons un bouton dans le fichier popup.html , attribuez-lui un ID appelé submit , puis renvoyez un journal de console, vous remarquerez peut-être qu'en fait, rien n'est enregistré dans la console. En effet, nous sommes dans des contextes différents, ce qui signifie que nous devons cliquer avec le bouton droit sur la fenêtre contextuelle et ouvrir un ensemble différent de Devtools.

Maintenant, nous pouvons accéder aux journaux et à déboguer! Mais n'oubliez pas que si quelque chose est défini dans LocalStorage, il n'existe que dans le Devtools LocalStorage de l'extension; Pas le navigateur de l'utilisateur localstorage. (J'ai rencontré ce problème la première fois que je l'ai essayé!)

Exécutez des scripts à l'extérieur de l'extension

Tout cela est bon, mais que se passe-t-il si nous voulons exécuter un script qui peut accéder aux informations actuelles de l'onglet? Voici quelques fa?ons de le faire. J'appelle habituellement une fonction distincte à l'intérieur de l'écouteur d'événements DOMContentLoaded :

Exemple 1: activer le fichier

 fonction exampleFunction () {
  chrome.tabs.executescript (() => {
    chrome.tabs.ExECUtesScript ({file: "content.js"});
  });
}

Exemple 2: Exécutez seulement une petite quantité de code

Cette approche est excellente si vous n'avez besoin que d'exécuter une petite quantité de code. Cependant, comme il faut tout passer en tant que cha?ne ou modèle littéral, il devient rapidement difficile à gérer.

 fonction exampleFunction () {
  chrome.tabs.ExECUtesScript ({
    Code: `Console.log ('Salut là-bas);`
  });
}

Exemple 3: Activez les paramètres de fichier et de réussite

N'oubliez pas que les extensions et les onglets s'exécutent dans différents contextes. Cela rend les paramètres de passage entre eux pas faciles. Nous nicherons les deux premiers exemples ici, passant du code dans le deuxième fichier. Je stocke tout ce dont j'ai besoin dans une seule option, mais pour que cela fonctionne, nous devrons cha?ner l'objet.

 Fonction ExempleFunction (Options) {
  chrome.tabs.exectuescript (
    {code: "var options =" ??json.stringify (options)},
    fonction() {
      chrome.tabs.ExECUtesScript ({file: "content.js"});
    }
  ));
}

ic?ne

Même si le fichier manifeste définit uniquement deux ic?nes, nous avons besoin de deux autres pour soumettre officiellement l'extension au Chrome Web Store: une ic?ne carrée de 128 pixels, et une ic?ne que j'appelle icon128_proper.png , qui est également de 128 pixels, mais a un rembourrage entre les bords de l'image et de l'ic?ne.

N'oubliez pas que quelle que soit l'ic?ne utilisée, elle doit être belle dans les modes clairs et sombres du navigateur. Je trouve généralement mon ic?ne sur le projet de nom.

Soumettre à Chrome Web App Store

Maintenant, nous pouvons aller à la console de développeur de boutique en ligne Chrome pour soumettre l'extension! Cliquez sur le bouton nouveau projet et faites glisser et déposez le fichier de projet compressé dans le téléchargeur.

Chrome posera ici quelques questions sur les extensions et demandera des informations sur les autorisations demandées dans l'extension et pourquoi ces autorisations sont nécessaires. AVERTISSEMENT: la demande d'autorisations "activetab" ou "onglets" prendra plus de temps pour s'assurer que le code n'effectue aucun abus.

C'est ?a! Cela devrait vous préparer à commencer à construire des extensions de navigateur Chrome! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!