Mise en route Construire une extension Chrome - Google Chrome
Nous le ferons en mettant en place un élément d'interface que nous appelons une action du navigateur. ce qui nous permet de placer une icône cliquable juste à côté de l'Omnibox de Chrome pour un accès facile. En cliquant sur cette icône ouvrira une fenêtre pop-up rempli d'une image dérivée de la page en cours, ce qui ressemble à quelque chose comme ceci:
Si vous souhaitez suivre à la maison (et vous devriez!), Créez un nouveau répertoire brillant sur votre ordinateur, et pop ouvrez votre éditeur de texte favori. Allons-y!
Allez-y et enregistrer les données dans un fichier nommé manifest.json dans le répertoire que vous avez créé, ou télécharger une copie de manifest.json à partir du dépôt de l'échantillon.
Vous avez sans doute remarqué que manifest.json a à deux fichiers de ressources lors de la définition de l'action du navigateur: icon.png et popup.html. Les deux ressources doivent exister à l'intérieur du paquet d'extension, donc nous allons les créer maintenant:
popup.html sera rendu dans la fenêtre pop-up qui est créé en réponse à un clic sur l'action du navigateur d'un utilisateur. Il est un fichier HTML standard, tout comme vous êtes habitué du développement web, vous donnant règne plus ou moins libre sur ce que l'affichage de pop-up. Télécharger une copie de popup.html à partir du dépôt de l'échantillon. et enregistrez-le dans le répertoire que vous travaillez.
Vous devriez maintenant avoir quatre fichiers dans votre répertoire de travail: icon.png. manifest.json. popup.html. popup.js. L'étape suivante consiste à charger les fichiers dans Chrome.
Charger l'extension
Extensions que vous téléchargez à partir du Chrome Web Store sont emballés comme des fichiers .crx, ce qui est idéal pour la distribution, mais pas si grand pour le développement. Reconnaissant cela, Chrome vous donne un moyen rapide de charger votre répertoire de travail pour les tests. Faisons maintenant.
Assurez-vous que le mode Developer case en haut à droite est cochée.
Cliquez sur Charger l'extension non empaquetée ... pour faire apparaître une boîte de dialogue de sélection de fichier.
Accédez au répertoire dans lequel vos fichiers d'extension en direct, et sélectionnez-le.
Vous pouvez également faire glisser et déposer le répertoire où vos fichiers d'extension en direct sur chrome: // extensions dans votre navigateur pour le charger.
Si l'extension est valide, il sera chargé et actif tout de suite! Si elle est valide, un message d'erreur sera affiché en haut de la page. Corriger l'erreur et essayez à nouveau.
Fiddle avec le code
Maintenant que vous avez votre première extension et en cours d'exécution, nous allons jouer avec les choses afin que vous ayez une idée de ce que votre processus de développement pourrait ressembler. Par exemple, nous allons définir une info-bulle sur le bouton d'action du navigateur.
Selon la documentation browserAction, les info-bulles peuvent être définies en spécifiant la clé default_title dans le fichier manifeste. Ouvrez manifest.json. et ajouter la clé de default_title au browser_action. Assurez-vous que le JSON est valide, donc citer la clé et ajouter une virgule si nécessaire.
Le fichier manifeste est que lorsque l'extension analysé est chargé. Si vous voulez voir les modifications précédentes en action, l'extension doit être rechargé. Visitez la page des extensions (allez au chrome: // extensions ou Outils> Extensions dans le menu Chrome.), Puis cliquez sur Recharger dans votre extension. Toutes les extensions sont également rechargées lorsque la page des extensions est rechargée, par exemple après avoir frappé F5 ou Ctrl - R.
Et ensuite?
La vue d'ensemble Extension Chrome sauvegarde un peu, et remplit beaucoup de détails sur l'architecture des extensions en général, et quelques concepts spécifiques que vous aurez envie de connaître l'avenir. Il est la meilleure prochaine étape de votre voyage vers la maîtrise de l'extension.
Personne n'écrit le code parfait du premier coup, ce qui signifie que vous aurez besoin d'en apprendre davantage sur les options disponibles pour le débogage de vos créations. Notre tutoriel de débogage est parfait pour cela, et mérite d'être lu attentivement.
extensions Chrome ont accès aux puissantes API ci-dessus et au-delà de ce qui est disponible sur le web ouvert: les actions du navigateur ne sont que la pointe de l'iceberg. Notre chrome. * Documentation API vous guidera à travers chaque API à son tour.
Enfin, le guide du développeur a des dizaines de liens supplémentaires vers des morceaux de la documentation que vous pourriez être intéressé.
Contenu disponible sous la licence CC-By 3.0