Développement d'extensions de Google Chrome

Ce tutoriel vous guide dans la création d'une extension Google Chrome de base à l'aide de HTML, CSS et JavaScript. Nous allons créer un cueilleur de langues simples, apprentissage des concepts de développement d'extension de clés en cours de route.

ce que vous apprendrez:

• Activation du mode développeur de Chrome pour tester et déboguer.
• Création du manifest Menu contextuel pour l'interaction des utilisateurs.
• Ajout et gestion des langues dans l'extension.
• Publier votre extension au Chrome Web Store (nécessite un enregistrement et des frais).

1. Configuration du mode développeur Chrome:

Commencez par activer le mode développeur dans Chrome. Cela vous permet de charger et de tester votre extension pendant le développement. Accédez à cela en cliquant sur les trois points verticaux (plus d'outils) dans le coin supérieur droit de Chrome, en sélectionnant "plus d'outils" & gt; "Extensions", puis permettant le "Mode développeur" commutateur à bascule en haut à droite.

2. Le fichier manifest.json :

Créez un nouveau dossier (par exemple, "LanguagePicker") pour votre projet. À l'intérieur, créez manifest.json avec ce code:

 {"name": "Language Picker", "Description": "A Simple Language Sélection Extension", "Version": "1.0", "Manifest_Version": "Permissons": {"Service_Worker": "Background.js"}, "Permissons": ["STOCHER"], "Action": js.js "}," Permissions ": [" Storage "]," Action ". "Default_popup": "popup.html"}} 

Ce fichier raconte à Chrome votre extension: son nom, description, la version, le script d'arrière-plan ( background.js ), les autorisations requises (accès au stockage), et le fichier html popup ( 3. Ajout d'icônes de drapeau de langue:

Créez un sous-répertoire "Flags" dans votre dossier de projet. Téléchargez cinq images de drapeau (par exemple, anglais, chinois, italien, etc.) et enregistrez-les sous English.png , chinois.png , etc.

4. Le background.js travailleur du service:

Créer background.js avec ce code:

 Langue = 'URL (Flags / English.png)'; chrome.runtime.oninstalled.addListener (() = & gt; {chrome.storage.sync.set ({language}); console.log (`Langue par défaut définie $ {langue}`);}); Création du menu Popup (<code> popup.html </code> et <code> popup.css </code>):   <p> Create <code> popup.html </code>: </p> <pre class="brush:php;toolbar:false"> & lt ;! DocType html & gt;  <a-head> <title> Picker de langue  Title> <link rel="Stylesheet" href="popup.css">  head> </title> <div id="FlagoPtions">  <script src="popup.js">  </ body>  </ pre> <p> <code> popup.css :  <pre class="brush:php;toolbar:false"> .Container {width: 300px; } bouton {hauteur: 30px; Largeur: 30px; Aperçu: aucun; Border: aucun; Border-Radius: 50%; marge: 10px; République de fond: sans répétition; Position d&#39;arrière-plan: Centre; taille arrière: contenir; } .currentFlag {/ * Ajouter un style pour l&#39;indicateur actuellement sélectionné * /} </ pre> <p> <strong> 6. Popup JavaScript (<code> popup.js ):   <p> Créer <Code> popup.js  (Il s&#39;agit d&#39;une version simplifiée, nécessitant un développement plus approfondi pour les fonctionnalités complètes):  <pre class="brush:php;toolbar:false"> // ... (Javascript Code pour créer dynamiquement des boutons pour les signaux de langue et les clics similaires, ce qui est un exemple d&#39;origine mais si simplifié pour la bivalité ` La section contiendrait le JavaScript pour générer dynamiquement les boutons de la langue à partir du tableau «AutreLangs», gérer les événements de clic pour modifier la langue sélectionnée et mettre à jour l&#39;interface utilisateur en conséquence. Chargement et test: ** Dans `chrome: // extensions /`, cliquez sur «Chargement déballé», sélectionnez votre dossier de projet et testez votre extension. ** 8. Publication (Advanced): ** Inscrivez-vous en tant que développeur Chrome Web Store (nécessite des frais) pour publier votre extension. Cette version rationalisée fournit un chemin plus clair et plus concis pour créer une extension chromée de base. N&#39;oubliez pas de remplir le code `popup.js` manquant basé sur la logique présentée dans l&#39;exemple original et plus détaillé. </script>
</div></a-head>

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!