Comment écrire un script d’arrière-plan pour l’extension Chrome | de Matt Croak Code | janvier 2023

Créer la connexion entre l’utilisateur et l’extension. (Manifeste Version 3)

J’ai fouillé dans les extensions Chrome pendant mon temps d’arrêt et ça a déclenché beaucoup d’idées en préparation maintenant que je sais comment les faire ! L’une des parties les plus difficiles de leur apprentissage était de comprendre ce qu’était un script d’arrière-plan – et comment en écrire un efficace.

Extensions chromées sont des programmes logiciels basés sur des technologies Web (telles que HTML, CSS et JavaScript) qui permettent aux utilisateurs de personnaliser l’expérience de navigation Chrome. Vous pouvez en créer un et le charger dans la page des extensions (chrome://extensions/) si le mode développeur est activé. Mais avant d’en arriver là, commençons à construire notre extension !

Tout d’abord, créez un dossier appelé extension-boilerplate. Ce sera notre projet d’extension Chrome. Le premier fichier de ce projet sera le manifest.json dossier.

{
"name": "Extension Boilerplate",
"description": "Starter code for chrome extension.",
"version": "1.0.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
}
}

C’est la base de notre extension.

Ensuite, créez un vide background.js fichier dans votre projet. Nous y reviendrons dans un instant.

Pour l’instant, accédez à chrome://extensions/ et assurez-vous que le mode développeur est activé. Vous pouvez vérifier s’il est en haut à droite. Une fois le mode développeur activé, vous devriez voir quelques options sur le côté gauche.

L’une de ces options consiste à Charger déballé.

Cliquez sur Charge déballée, puis sélectionnez le répertoire de votre extension actuelle. Cela chargera le code de votre extension et vous permettra de le tester. Une fois que vous l’avez chargé, accédez à vos extensions dans la barre d’outils et cliquez sur la pièce du puzzle. Faites défiler vers le bas jusqu’à ce que vous trouviez votre extension, puis épinglez-la à votre barre d’outils.

Génial! Maintenant que tout est configuré, nous pouvons commencer à travailler sur notre script d’arrière-plan.

Un script d’arrière-plan est essentiellement la partie de votre extension qui connecte le navigateur à l’extension elle-même.

Par exemple, supposons que vous souhaitiez déclencher une alerte dans la fenêtre actuelle lorsque vous cliquez sur une extension. Ce que vous feriez, c’est que vous écririez un script d’arrière-plan qui détecte que l’extension a été cliquée. Lors de la détection, vous pouvez envoyer un message côté client pour lui dire de faire quelque chose en exécutant un script côté client.

Plus sur cela plus tard.

Le manifeste

Dans les versions antérieures du manifeste, vous pouviez indiquer votre script d’arrière-plan avec quelque chose comme ci-dessous.

"background": {
"scripts": ["background.js"],
"persistent": false
},

Dans la version 3 (la dernière version au moment de la rédaction), vous devez écrire ce qui suit.

"background": {
"service_worker": "background.js"
},

Le JavaScript (arrière-plan)

Maintenant travaillons sur background.js.

Dans ce fichier, nous pouvons accéder à l’extension en utilisant le chrome.action API. Cette API nous permettra de contrôler le bouton de la barre d’outils qui représente notre extension. L’API nous donne accès à quelques options.

Pour notre cas, nous nous concentrerons uniquement sur onClicked un pour l’instant. Comme son nom l’indique, cela nous permettra d’exécuter quelque chose dans le script d’arrière-plan lorsque nous cliquons sur l’icône (une petite image que j’ai incluse dans extension-boilerplate/assets/icon.png).

On peut ajouter une fonction à exécuter sur le onClick action en ajoutant un écouteur d’événement. Voir ci-dessous.

chrome.action.onClicked.addListener(tab => { 
const {url} = tab;
console.log(`Loading: ${url}`); 
});

L’argument passé à notre fonction de rappel est le tab chose. Cela représente l’onglet actuel de notre fenêtre Chrome.

Avant de pouvoir tester notre script, nous devons ajouter une autre propriété à notre manifest.json dossier. Cela nous permettra d’utiliser les chrome.action API et donnez-nous accès à service worker. Plus sur cela dans un instant.

Ci-dessous le action propriété que nous ajouterons.

"action":{
"default_title": "Extension Boilerplate",
"default_icon": "assets/icon.png"
}

Cette propriété inclut un titre par défaut pour notre extension ainsi que l’icône par défaut. Cette icône (celle que j’ai mentionnée plus tôt) sera ce sur quoi nous cliquons dans la barre d’outils pour exécuter le script.

Une fois cela fait, revenez à la page des extensions chrome. Recherchez l’extension sur laquelle vous travaillez et cliquez sur l’icône d’actualisation. Cela chargera tous les fichiers mis à jour. Cliquez ensuite sur le service worker lien hypertexte.

Maintenant que vous avez le dernier code d’extension Chrome, et la console du technicien de service s’ouvre, cliquez sur l’extension épinglée et regardez ce qui se passe.

Vous venez de déclencher votre script d’arrière-plan au clic ! Vous pouvez voir l’URL enregistrée dans la console Service Worker. Impressionnant! Mais que voit-on dans la console chrome de la page Web ?

Rien.

En effet, notre script d’arrière-plan, tout en détectant un clic sur notre extension, ne fait pas interagir avec notre côté client. Rappelez-vous, c’est dans le Contexte.

Afin de faire les choses côté client, nous devrons ajouter quelques éléments.

Le côté client

Rappelez-vous comment nous avons dit que nous voulions invoquer (ou exécuter) quelque chose côté client qui déclencherait une alerte dans la fenêtre lorsque l’extension est cliquée ? Vous pouvez le faire en utilisant executeScriptune méthode qui injecte un script dans le contexte d’une cible (comme le côté client d’un navigateur).

Ceci est utile car cela nous permettra d’écrire un script côté client que nous pouvons appeler (ou injecter) à partir de notre script d’arrière-plan. Avant d’entrer dans le vif du sujet, mettons à jour notre manifeste pour autoriser ce qu’on appelle scripting. Ajoutez ce qui suit à votre manifest.json dossier.

"permissions": [
"activeTab",
"scripting"
],
"background": {
"service_worker": "background.js"
},

Sans ces autorisations supplémentaires, nous ne pourrons pas accéder au chrome.scripting API. Une fois que vous avez fait cela, ajoutons le script côté client. Nous l’appellerons, clientside.js. Mettez le code ci-dessous dans votre fichier.

alert('hit clientside!')

Maintenant, nous pouvons ajouter le code d’injection à notre background.js fonction de rappel. Voir ci-dessous.

init = (tab) => {
const {id, url} = tab;
chrome.scripting.executeScript(
{
target: {tabId: id, allFrames: true},
files: ['clientside.js']
}
)
console.log(`Loading: ${url}`); 
}
chrome.action.onClicked.addListener(tab => { 
init(tab)
});

executeScript accepte certaines options d’un objet comme argument. Le premier argument est le target. Nous précisons le target en incluant un objet qui a le tabId et allFrames défini sur vrai.

La propriété suivante dans l’argument est files. De cette façon, nous pouvons injecter un ou plusieurs fichiers côté client. Pour l’instant, nous n’avons qu’un seul fichier mais nous devons encore le mettre dans un tableau.

Maintenant, actualisez votre extension dans la page des extensions chrome. Après avoir actualisé, cliquez sur votre extension dans la barre d’outils. Vous devriez voir quelque chose comme ça.

Alto! Vous avez créé votre première extension chrome avec un script d’arrière-plan conforme à la version 3 du manifeste ! Ce n’est que le début. J’explorerai plus de fonctionnalités des extensions Chrome et je publierai les miennes !