Si vous vous demandez comment faire une Extension Chrome, extensiondocumentation de Chrome est idéal pour les implémentations de base. Cependant, pour utiliser plus avancéecaractéristiques nécessite beaucoup de googling et de débordement de pile. Faisons une extension Chrome intermédiaire qui interagit avec la page: elle trouvera le premier lien externe sur la page et l’ouvrira dans un nouvel onglet.

manifeste.json

Le manifeste.le fichier JSON indique à Chrome des informations importantes sur votrextension, comme son nom et les autorisations dont il a besoin.,

l’extension la plus basique possible est un répertoire avec un fichiermanifest.json.Créons un répertoire et mettons ce qui suit JSONinto manifest.json:

{ "manifest_version": 2, "name": "My Cool Extension", "version": "0.1" }

c’est le plus basique possible manifest.json, avec tous les champs obligatoires remplis. Le manifest_version doit toujours être 2, car la version 1 n’est pas prise en charge à partir de janvier 2014. Jusqu’à présent, notre extension ne fait absolument rien, mais chargeons-la dans Chrome de toute façon.,

Chargez votre extension dans Chrome

pour charger votre extension dans Chrome, ouvrezchrome://extensions/ dans votre navigateur et cliquez sur « Mode développeur” en haut à droite. Maintenant, cliquez sur « Load unpackedextension… » et sélectionnez le répertoire de l’extension. Vous devriez maintenant Voir votrextension dans la liste.

lorsque vous modifiez ou ajoutez du code dans votre extension, revenez simplement à cette page et chargez la page. Chrome va recharger votre extension.

des scripts de Contenu

Un contenu script est « un fichier JavaScript qui s’exécute dans le contexte de pages web., »Cela signifie qu’un script de contenu peut interagir avec les pages web que le browservisits. Tous les fichiers JavaScript d’une extension Chrome ne peuvent pas le faire; nous verrons plus tard.

nous allons ajouter un contenu script nommé content.js:

// content.js alert("Hello from your Chrome extension!")

Pour injecter le script, nous devons dire à notre manifest.json le fichier à ce sujet.,

l’Ajouter à votre manifest.json fichier:

"content_scripts": , "js": } ]

Ceci dit Chrome pour injecter content.js dans chaque page nous visiter à l’aide de thespecial <all_urls> modèle d’URL. Si nous voulons injecter le script sur seulement certainspages, nous pouvons utiliser des modèles de correspondance. Voici quelques exemples de valeurs pour "matches":

Rechargez votre extension Chrome. Chaque page que vous visitez affiche maintenant une alerte. Enregistrons plutôt la première URL de la page.,

enregistrer l’URL

jQuery n’est pas nécessaire, mais cela facilite tout. Tout d’abord, téléchargez aversion de jQuery à partir du CDN jQuery et placez-le dans le dossier de votre extension. J’ai téléchargé la dernière version minifiée, jquery-2.1.3.min.js. Pour le charger, ajoutez à manifest.jsonavant"content.js"., L’ensemble de votre manifest.json devrait looklike ceci:

{ "manifest_version": 2, "name": "My Cool Extension", "version": "0.1", "content_scripts": , "js": } ] }

Maintenant que nous avons jQuery, nous allons l’utiliser pour vous connecter à l’URL de la première externes linkon la page dans la balise content.js:

// content.js var firstHref = $("a").eq(0).attr("href"); console.log(firstHref);

Notez que nous n’avons pas besoin d’utiliser jQuery pour vérifier si le document est chargé. Par défaut, Chrome injecte des scripts de contenu une fois le DOM terminé.

Essayez – le, vous devriez voir la sortie de votre console sur chaque page que vous visitez.,

Navigateur Actions

Lorsqu’une extension ajoute une petite icône à côté de votre barre d’adresse, c’est un browseraction. Votre extension peut écouter les clics sur ce bouton, puis dosomething.

Placer l’icône.png du tutoriel d’extension de Google dans votre dossier d’extension etajoutez ceci à manifest.json:

"browser_action": { "default_icon": "icon.png" }

Pour utiliser l’action du navigateur, nous devons ajouter le passage de message.

transmission de messages

un script de contenu a accès à la page en cours, mais est limité dans L’accès aux API itcan., Par exemple, il ne peut pas écouter les clics sur l’action du navigateur. Nous avons besoin d’ajouter un type de script différent à notre extension, un script d’arrière-plan,qui a accès à toutes les API Chrome mais ne peut pas accéder à la page en cours. AsGoogle le dit:

les scripts de contenu ont certaines limitations. Ils ne peuvent pas utiliser la balise chrome.* Api, avec l’exception de extension, i18n, runtime et storage.,

ainsi, le script de contenu pourra extraire une URL de la page en cours, mais devra remettre cette URL au script d’arrière-plan pour faire quelque chose d’utile. Pour communiquer, Nous utiliserons ce que Google appelle message passing, ce qui permet aux scripts d’envoyer et d’écouter des messages. C’est le seul moyen pourles scripts de contenu et les scripts d’arrière-plan d’interagir.,

ajoutez ce qui suit pour diremanifest.json à propos du script d’arrière-plan: 

"background": { "scripts": }

maintenant, nous allons ajouterbackground.js:

cela envoie une charge utile JSON arbitraire à l’onglet actuel. Les clés du JSONpayload peuvent être n’importe quoi, mais j’ai choisi "message" pour plus de simplicité. Maintenant, nous devons écouter ce message dans content.js:

notez que tout notre code précédent a été déplacé dans l’écouteur, de sorte qu’il n’est exécuté que lorsque la charge utile est reçue., Chaque fois que vous cliquez sur l’icône browseraction, vous devriez voir une URL se connecter à la console. Si cela ne fonctionne pas, essayez de recharger l’extension, puis de recharger la page.

l’Ouverture d’un nouvel onglet

On peut utiliser la balise chrome.tabs API pour ouvrir un nouvel onglet:

chrome.tabs.create({"url": "http://google.com"});

Mais chrome.tabs ne peut être utilisé par background.js, donc, nous allons devoir ajouter somemore de la transmission de message depuis background.js pouvez ouvrir l’onglet, mais ne pouvez pas prendre theURL., Voici l’idée:

  1. écoutez un clic sur l’action du navigateur dans background.js. Quand il est coché, envoyez un événementclicked_browser_action àcontent.js.
  2. lorsquecontent.js reçoit l’événement, il saisit L’URL du premier lien sur la page. Puis il envoie open_new_tab retour à la balise background.js avec l’URL toopen.
  3. background.js écoute open_new_tab et ouvre un nouvel onglet avec le givenURL quand il reçoit le message.,

cliquer sur l’action du navigateur déclenchera background.js, qui enverra un message à content.js, qui renverra une URL à background.js, qui ouvrira un nouvel onglet avec L’URL donnée.

tout d’Abord, nous devons le dire content.js pour envoyer l’URL de la balise background.js., Changementcontent.js pour utiliser ce code:

Maintenant, nous avons besoin d’ajouter un peu de code pour dire background.js pour écouter l’événement:

Maintenant, lorsque vous cliquez sur le navigateur icône d’action, il ouvre un nouvel onglet avec le firstexternal URL de la page.

conclusion

plein content.js et background.js sont ci-dessus., Voici le manifest.json:

Et voici la structure complète du répertoire: 

. ├── background.js ├── content.js ├── icon.png ├── jquery-2.1.3.min.js └── manifest.json

en savoir plus sur la création d’une extension Chrome

pour plus d’informations, essayez la documentation officielle de L’extension Chrome.