Comment faire une extension Chrome
Si vous vous demandez comment faire une documentation d'extension Chrome, l'extension de Chrome est grande pour les implémentations de base. Toutefois, pour utiliser des fonctionnalités plus avancées nécessite beaucoup de recherche sur Google et le débordement de pile. Faisons une extension Chrome intermédiaire qui interagit avec la page: il trouvera le premier lien externe sur la page et l'ouvrir dans un nouvel onglet.
Le fichier manifest.json indique des informations importantes Chrome de votre extension, comme son nom et sur les autorisations dont il a besoin.
L'extension possible le plus élémentaire est un répertoire avec un fichier manifest.json. Créons un répertoire et mettre le JSON suivante dans manifest.json:
Pour charger votre extension dans Chrome, ouvrez chrome: // extensions / dans votre navigateur et cliquez sur « Mode développeur » en haut à droite. Maintenant, cliquez sur « Load décompressé l'extension ... » et sélectionnez le répertoire de l'extension. Vous devriez maintenant voir votre extension dans la liste.
Lorsque vous modifiez ou ajoutez le code dans votre extension, juste revenir à cette page et recharger la page. Chrome rechargera votre extension.
Ajoutons un script de contenu nommé content.js:
Pour injecter le script, nous devons dire à notre fichier manifest.json à ce sujet.
Ajoutez ceci à votre fichier manifest.json:
Cela dit Chrome d'injecter content.js dans chaque page nous visite à l'aide de la spéciale
Recharger votre extension Chrome. Chaque page que vous visitez apparaît maintenant une alerte. Faisons journal la première URL de la page à la place.
jQuery est pas nécessaire, mais il rend tout plus facile. Tout d'abord, téléchargez une version de jQuery du CDN jQuery et le mettre dans le dossier de votre extension. J'ai téléchargé la dernière version minified, jquery-2.1.3.min.js. Pour le charger, ajoutez-le à manifest.json avant « content.js ». Votre tout devrait ressembler manifest.json ceci:
Maintenant que nous avons jQuery, nous allons l'utiliser pour enregistrer l'URL du premier lien externe sur la page en content.js:
Notez que nous ne avons pas besoin d'utiliser jQuery pour vérifier si le document a été chargé. Par défaut, Chrome scripts de contenu après injecte le DOM est complet.
Try it out - vous devriez voir la sortie de la console sur chaque page que vous visitez.
Lorsqu'une extension ajoute une petite icône à côté de votre barre d'adresse, qui est une action du navigateur. Votre poste peut écouter les clics sur ce bouton puis faire quelque chose.
Mettez le icon.png du tutoriel d'extension de Google dans votre dossier d'extension et ajouter à manifest.json:
Pour utiliser l'action du navigateur, il faut ajouter le passage de messages.
Un script de contenu a accès à la page en cours, mais il est limité dans l'API, il peut accéder. Par exemple, il ne peut pas écouter les clics sur l'action du navigateur. Nous avons besoin d'ajouter un autre type de script pour 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. Comme Google le dit:
scripts de contenu ont certaines limites. Ils ne peuvent pas utiliser les API de chrome. *, À l'exception de l'extension. i18n. exécution. et le stockage.
Ainsi, le script de contenu sera en mesure de tirer une URL de la page en cours, mais il devra remettre cette URL vers le script d'arrière-plan pour faire quelque chose d'utile. Pour communiquer, nous allons utiliser ce que Google appelle le passage de messages. qui permet d'envoyer des scripts et d'écouter les messages. Il est le seul moyen pour les scripts de contenu et les scripts d'arrière-plan pour interagir.
Ajouter ce qui suit pour dire manifest.json sur le script de fond:
Maintenant, nous allons ajouter background.js:
Cela envoie une charge utile JSON arbitraire de l'onglet en cours. Les clés de la charge utile JSON peut être quelque chose, mais j'ai choisi pour la simplicité « message ». Maintenant, nous devons écouter ce message dans content.js:
Notez que tous notre code précédent a été déplacé dans l'auditeur, de sorte qu'il est exécuté uniquement lorsque la charge utile est reçue. Chaque fois que vous cliquez sur l'icône d'action du navigateur, vous devriez voir une URL journalisés à la console. Si cela ne fonctionne pas, essayez de recharger l'extension puis recharger la page.
Nous pouvons utiliser l'API chrome.tabs pour ouvrir un nouvel onglet:
Mais chrome.tabs ne peuvent être utilisés par background.js. donc nous allons devoir ajouter un peu plus le passage de messages depuis background.js peut ouvrir l'onglet, mais ne peut pas saisir l'URL. Voici l'idée:
- Ecoute un clic sur l'action du navigateur dans background.js. Quand il a cliqué, envoyer un événement clicked_browser_action à content.js.
- Lorsque content.js reçoit l'événement, il saisit l'URL du premier lien sur la page. Ensuite, il envoie open_new_tab retour à background.js avec l'URL pour ouvrir.
- background.js écoute open_new_tab et ouvre un nouvel onglet avec l'URL donnée quand il reçoit le message.
En cliquant sur l'action du navigateur déclenchera background.js. qui enverra un message à content.js. qui va envoyer une URL à retour background.js. qui ouvrira un nouvel onglet avec l'URL donnée.
Tout d'abord, nous devons dire content.js envoyer l'URL à background.js. Changer content.js utiliser ce code:
Maintenant, nous devons ajouter un peu de code pour dire background.js écouter cet événement:
Maintenant, lorsque vous cliquez sur l'icône d'action du navigateur, il ouvre un nouvel onglet avec la première URL externe sur la page.
Les content.js complets et background.js sont au-dessus. Voici la pleine manifest.json:
Et voici la structure complète du répertoire: