Comment créer votre première extension Chrome

Les extensions de chrome sont de petits logiciels qui personnalisent l'expérience de navigation. Ils permettent aux utilisateurs d’adapter les fonctionnalités et le comportement de Chrome à leurs besoins et à leurs préférences. Ils reposent sur des technologies Web telles que HTML, JavaScript et CSS.

Extension de chrome

Les extensions Chrome constituent un moyen simple de manipuler les pages comme vous le souhaitez. Ils sont également utilisés pour étendre les fonctionnalités d'une page Web en écrivant un code personnalisé qui exécutera le processus requis.

Pour commencer, vous devez comprendre comment configurer la base de votre base de code d'extension. Pour un démarrage plus facile, voici l'aperçu officiel de Chrome: https://developer.chrome.com/extensions/overview

Supposons que vous ayez besoin d’une page tierce pour exécuter un morceau de code afin d’exécuter une certaine commande., Vous avez le code prêt comme extension. Mais comment pouvez-vous dire au navigateur qu'il s'agit de votre extension et qu'elle doit être importée? Pour décrire complètement le fonctionnement des extensions, voyons un exemple avec une extension pour Asana.

Structure de fichier

1. Fichier Manifest.json

Tout d’abord, vous devez créer un manifest.json fichier. Que fait ce fichier et que devriez-vous y écrire? Fondamentalement, le manifest.json fichier dans notre fichier de configuration indique comment le navigateur charge différentes autorisations et ressources. Ici, vous indiquez au navigateur la version que vous chargez, le nom de l’extension, son auteur et sa description. Ceux-ci peuvent être consultés dans le navigateur lorsque l'extension est chargée correctement.

Vous devez ajouter les lignes de code suivantes dans votre manifest.json fichier:

{
"name": "DX Asana Goodies",
"version": "1.1",
"author": "Mariyan Dimitrov & Martin Spatovaliyski",
"description": "extension for the cool teammates!",
"manifest_version": 2,
"web_accessible_resources": (
"resources/**"
),
"content_scripts": ({
"js": ("jQuery.js", "popup.js"),
"css": ("style.css"),
"matches": ( "https://app.asana.com/*" )
}),
"default_icon": {
"16": "img/16.png",
"32": "img/32.png",
"128": "img/128.png"
},
"icons": {
"16": "images/salimeyes16.png",
"32": "images/salimeyes32.png",
"48": "images/salimeyes48.png",
"128": "images/salimeyes128.png"
}
}

2. Importer une extension

L'extension nécessite une icône de navigateur visible, vous avez donc besoin des éléments suivants:

default_icon – Cette propriété est responsable de l'icône que l'utilisateur voit dans sa barre d'outils d'extension lorsque l'extension est active.

Icônes – Il s’agit de la propriété responsable de l’icône que l’utilisateur voit s’il accède au Extensions de chrome page et importer votre plugin.

3. content_scripts – Chargement de tous les actifs de votre extension

L'extension utilise également des scripts et ils doivent être ajoutés en tant que:

js / css – Tous les styles et scripts pouvant être inclus: l'ordre de chargement des scripts sera suivi de l'ordre des scripts (comme décrit, nous voulons que jQuery soit chargé en premier et notre code JavaScript personnalisé en second lieu).

allumettes – Vous indiquez ici pour quel (s) site (s) les ressources doivent être chargées.

le scripts de contenu commence à se charger dès qu’une correspondance est trouvée à partir du allumettes tableau. Dans notre exemple, cela ne sera chargé que sur app.asana.com. Une chose à noter cependant, les fichiers JavaScript sont chargés sur interactif / DOM état prêt.

4. Ressources accessibles

Parfois, vous voudrez peut-être que votre extension charge des ressources telles que des images, des fichiers mp3 ou tout autre type de fichier. Où devriez-vous stocker ces mp3, images, etc.?

Pour charger et donner accès aux ressources, vous devez dire au fichier manifest.json que ces fichiers sont réellement là et peuvent être utilisés. Vous faites cela en ajoutant le code suivant dans votre fichier JSON. En utilisant **, vous demandez à votre extension de rechercher tous les fichiers dans le répertoire. Ressources dossier récursivement.

 {
"web_accessible_resources": (
"resources/**"
)
}

La prochaine étape consiste à utiliser les ressources liées et cela se fait en utilisant la fonction chrome.extension.getURL ();. Dans notre cas, nous pourrions en fait assigner le fichier mp3 à une variable et l’utiliser plus tard comme ceci:

let musicURL = chrome.extension.getURL (‘/ ressources /’ + memeName + ‘/music.mp3’);
let music = new Audio (musicURL);
music.play ();

Chargement de l'extension créée

Lorsque vous commencez à développer votre extension, vous devez l'inclure dans votre navigateur et voir comment elle se comporte lorsque vous écrivez des lignes de code. Pour ce faire, procédez comme suit:

1. Ouvrez le Extension Manager page en allant à chrome: // extensions.
   Vous pouvez également l'ouvrir en cliquant sur le menu Chrome, en survolant Plus d'outils, puis en sélectionnant Extensions.
2. Activer Mode développeur en cliquant sur l'interrupteur à côté du mode développeur.
3. Clique le Charge déballée bouton situé dans le coin supérieur gauche de notre fenêtre et sélectionnez le dossier de l'extension.
4. Activez votre extension en cliquant sur le bouton bascule situé dans le coin inférieur droit de votre carte d'extension.

Débogage de l'extension chargée

Lorsque votre extension est opérationnelle, vous devez l’essayer et la déboguer. Cela signifie que vous devez recharger l’extension à chaque fois que vous effectuez une modification, en particulier lorsque vous modifiez la manifest.json fichier. De cette manière, vous modifiez le comportement de l’extension et les ressources qui doivent y être chargées.

Pour faciliter le débogage, Google a judicieusement créé une fonctionnalité permettant de recharger l'extension à tout moment en cliquant sur la flèche circulaire située dans le coin inférieur droit de notre carte d'extension. chrome: // extensions.

Plusieurs fois dans votre travail, vous ferez des erreurs et vous devrez en tirer des leçons. Toutes les erreurs (à la suite de cette implémentation) seront consignées dans la console de votre navigateur Chrome, ce qui conservera un backlog avec elles.

Plus de FAQ

• Ai-je besoin de l'autorisation de Google / Chrome pour exécuter une extension?
  • Ce sont des extensions personnalisées que nous exécutons localement. C'est comme changer le code HTML d'un site localement. Cela n'enfreint aucune règle.
• Existe-t-il des extensions payantes?
  • Oui, il y a beaucoup d'extensions payées. Certains d'entre eux sont un achat unique et certains d'entre eux sont avec un plan d'abonnement.

Les extensions Chrome personnalisent l'expérience de votre navigateur et le rendent plus productif. Ils sont faciles à construire et à ajouter, et très amusants à développer.

Posez votre question sur les extensions Chrome ici. Les développeurs de Auteur front-end seront heureux de partager leur expérience avec vous.