Pour développer un plug-in Google, nous devons d'abord comprendre la structure de base et le principe de fonctionnement du plug-in.
Voici les brèves étapes pour écrire un plug-in Google :
1. Déterminez le type de plug-in : Google propose de nombreux types de plug-ins différents, et vous devez choisir le type approprié en fonction des besoins spécifiques du plug-in.
2. Écrivez le fichier manifest.json : Il s'agit du fichier manifeste requis par chaque plug-in, qui définit le nom, la description, le numéro de version et d'autres informations du plug-in.
3. Écrivez le fichier background.js : Ce fichier contient le code du plug-in à exécuter en arrière-plan. Vous pouvez l'utiliser pour enregistrer des auditeurs, gérer des requêtes, etc.
4. Écrivez les fichiers popup.html et popup.js (si nécessaire) : ils sont chargés d'afficher l'interface utilisateur du plug-in et de répondre aux opérations de l'utilisateur.
5. Regroupez tous les codes ci-dessus dans un fichier zip .
6. Ouvrez la page d'extension dans Google Chrome, cliquez sur " Charger l'extension décompressée ", puis sélectionnez le fichier zip que vous avez empaqueté.
Les composants de Google Plugin incluent les composants principaux suivants :
1. Fichier manifeste manifest.json : Ce fichier définit les informations de base du plug-in, notamment le nom, la description, le numéro de version, etc.
2. Fichier Background.js : Ce fichier contient du code JavaScript exécuté en arrière-plan, qui peut être utilisé pour enregistrer des auditeurs, gérer des requêtes, etc.
3. Fichier de scripts de contenu : Ce fichier est le code JavaScript que le plug-in peut injecter dans la page Web actuelle, et peut modifier la structure DOM et le style CSS de la page.
4. Fichiers Popup.html et Popup.js (si nécessaire) : Ils sont chargés d'afficher l'interface utilisateur du plug-in et de répondre aux opérations de l'utilisateur.
5. Fichiers Options.html et Options.js (si nécessaire) : ils sont généralement utilisés pour fournir des options de paramètres permettant aux utilisateurs de modifier le comportement du plugin.
En plus des composants principaux ci-dessus, il existe d'autres composants facultatifs, tels que des fichiers d'icônes, des fichiers de localisation, etc. Les plus importants d'entre eux sont le fichier manifeste et le fichier Background.js, qui suffisent à implémenter les fonctionnalités de base de la plupart des plugins.
Voici un exemple de plugin Google simple qui affiche l'heure actuelle sur une page :
1. Tout d'abord, créez un fichier manifeste nommé « manifest.json » dans le répertoire racine du projet et ajoutez le contenu suivant :
{
"name": "Simple Clock",
"version": "1.0",
"description": "A simple clock extension",
"manifest_version": 2,
"permissions": ["activeTab"],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
Ici, nous spécifions le nom, la version, la description et les autorisations requises du plugin. Des icônes de plug-in et des fenêtres contextuelles sont également définies.
2. Créez un fichier HTML nommé « popup.html » dans le répertoire racine du projet et ajoutez le contenu suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple Clock</title>
<style>
#clock {
font-size: 32px;
font-family: Arial, sans-serif;
text-align: center;
margin: 32px;
}
</style>
</head>
<body>
<div id="clock"></div>
<script src="popup.js"></script>
</body>
</html>
Ici, nous définissons un élément div pour afficher l'heure et ajoutons une balise de script pointant vers "popup.js" en bas de la page.
3. Créez un fichier JavaScript nommé « popup.js » dans le répertoire racine du projet et ajoutez le contenu suivant :
function updateTime() {
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var time = hours + ":" + minutes + ":" + seconds;
document.getElementById("clock").innerHTML = time;
}
setInterval(updateTime, 1000);
Ici, nous avons écrit une fonction JavaScript pour afficher l'heure actuelle et appeler la fonction régulièrement pour mettre à jour l'heure.
4. Créez un fichier icône nommé "icon.png" dans le répertoire racine du projet comme icône du plug-in.
Maintenant, nous avons écrit un simple plug-in Google qui affiche une icône dans le coin supérieur droit du navigateur. En cliquant sur l'icône, une fenêtre apparaîtra affichant l'heure actuelle.
5. Installez le plug-in dans le navigateur Chrome
Ouvrez la page "chrome://extensions/" dans le navigateur Chrome, activez le "Mode développeur" en haut de la page, puis cliquez sur le bouton "Charger l'extension décompressée" et sélectionnez le répertoire racine de notre projet. Cela vous permettra d'installer le plugin.
Maintenant, notre simple plugin Google fonctionne avec succès !