Les extensions de navigateur sont de petits programmes qui peuvent modifier et améliorer les fonctionnalités d'un navigateur Web. Ils peuvent être utilisés pour diverses tâches, telles que le blocage des publicités, la gestion des mots de passe, l'organisation des onglets, la modification de l'apparence et du comportement des pages Web, et bien plus encore.
La bonne nouvelle est que les extensions de navigateur ne sont pas difficiles à écrire. . Ils peuvent être créés à l'aide des technologies Web avec lesquelles vous êtes déjà familiarisé – HTML, CSS et JavaScript – exactement comme une page Web classique. Toutefois, contrairement aux pages Web classiques, les extensions ont accès à un certain nombre d’API spécifiques à un navigateur, et c’est là que le plaisir commence.
Dans ce didacticiel, je vais vous montrer comment créer une extension simple pour Chrome. qui modifie le comportement de la nouvelle page à onglet. Pour la partie JavaScript de l'extension, j'utiliserai le cadre Vue.js, car nous permettra de fonctionner rapidement et de travailler avec beaucoup de plaisir.
[1965 Le code de ce tutoriel est disponible sur GitHub .
Voulez-vous apprendre Vue.js de fond en comble? Obtenez une collection complète de livres Vue couvrant les bases, les projets, les astuces, les outils et plus avec SitePoint Premium. Inscrivez-vous maintenant pour seulement 9 dollars par mois .
Notions de base d'une extension Chrome
L'élément central de toute extension Chrome est un fichier manifeste et un script d'arrière-plan . . Le fichier manifeste est au format JSON et fournit des informations importantes sur une extension, telles que sa version, ses ressources ou les autorisations requises. Un script d'arrière-plan permet à l'extension de réagir à des événements spécifiques du navigateur, tels que la création d'un nouvel onglet.
Pour illustrer ces concepts, commençons par écrire une extension Chrome “Hello, World!”.
Créer un nouveau dossier appelé hello-world-chrome et deux fichiers: manifest.json et background.js :
mkdir salut-monde-chrome
cd bonjour-monde-chrome
touchez manifest.json background.js
Ouvrez manifest.json et ajoutez le code suivant:
{
"name": "Hello World Extension",
"version": "0.0.1",
"manifest_version": 2,
"Contexte": {
"scripts": ["background.js"],
"persistante": faux
}
}
Les noms version et manifest_version sont tous des champs obligatoires. Les champs name et version peuvent correspondre à vos besoins. la version du manifeste doit être définie sur 2 (à partir de Chrome 18).
La clé background nous permet d'enregistrer un script d'arrière-plan, répertorié dans un tableau après le . scripts clé. La clé persistante doit être définie sur false sauf si l'extension utilise chrome.webRequest API pour bloquer ou modifier les requêtes réseau.
Ajoutons maintenant le code suivant. pour background.js pour que le navigateur vous dise bonjour lors de l'installation de l'extension:
chrome.runtime.onInstalled.addListener (() => {
alert ('Bonjour, le monde!');
});
Enfin, installons l’extension. Ouvrez Chrome et entrez chrome: // extensions / dans la barre d'adresse. Vous devriez voir une page affichant les extensions que vous avez installées.
Comme nous voulons installer notre extension à partir d'un fichier (et non du Chrome Web Store), nous devons activer le mode Developer à l'aide de la bascule. le coin supérieur droit de la page. Cela devrait ajouter une barre de menu supplémentaire avec l'option Charger sans emballage . Cliquez sur ce bouton et sélectionnez le dossier hello-world-chrome que vous avez créé précédemment. Cliquez sur Ouvrir pour voir l'extension installée et afficher une fenêtre contextuelle «Bonjour le monde!»
Félicitations! Vous venez de créer une extension Chrome.
Remplacement du nouvel onglet de Chrome
La prochaine étape consistera à recevoir notre extension lorsque nous ouvrirons un nouvel onglet. Pour ce faire, utilisez l’API Override Pages .
Remarque: avant de progresser, veillez à désactiver toutes les extensions qui remplacent la nouvelle page à onglet de Chrome. Ce comportement ne peut être modifié qu’une seule fois à la fois.
Nous allons commencer par créer une page à afficher à la place de la nouvelle page à onglet. Appelons-le tab.html . Cela doit résider dans le même dossier que votre fichier manifeste et votre script d'arrière-plan:
Ma page d'onglet nouveau!
Ma page d'onglet neuf!
Vous pouvez mettre n'importe quel contenu ici
Nous devons ensuite indiquer l'extension à propos de cette page. Nous pouvons le faire en spécifiant une clé chrome_url_overrides dans notre fichier manifeste, comme suit:
"chrome_url_overrides": {
"newtab": "tab.html"
}
Enfin, vous devez recharger l'extension pour que les modifications prennent effet. Vous pouvez le faire en cliquant sur l'icône reload de l'extension Hello World sur la page des extensions de Chrome.
Maintenant, lorsque vous ouvrez un nouvel onglet, devrait être accueilli par votre message personnalisé.
Ajout de Vue à l’extension
Nous avons maintenant une implémentation très basique de notre extension opérationnelle, il est temps de réfléchir à ce à quoi le reste des fonctionnalités souhaitées ressemblera. . Lorsqu'un utilisateur ouvre un nouvel onglet, j'aimerais l'extension suivante:
- Récupérez une blague de la magnifique icanhazdadjoke.com .
- Affichez cette blague sous une forme agréable à l'utilisateur. 19659036] Affiche un bouton permettant à l'utilisateur de mettre en favori la blague. Cela permettra d'économiser la blague sur
chrome.storage .
- Afficher un bouton permettant à l'utilisateur de répertorier les blagues favorites.
Vous pouvez, bien sûr, faire tout cela avec du code JavaScript simple ou une bibliothèque. comme jQuery – et si c'est ce que vous préférez, n'hésitez pas!
Toutefois, pour les besoins de ce didacticiel, je vais implémenter cette fonctionnalité à l'aide de Vue et de l'impressionnant vue-web-extension .
L'utilisation de Vue me permet d'écrire plus rapidement et plus efficacement un code mieux organisé. Et comme nous le verrons plus loin, la plate-forme fournit plusieurs scripts qui simplifient certaines tâches courantes lors de la création d'une extension Chrome (comme le rechargement de l'extension à chaque modification).
vue-web-extension -boilerplate
Cette section suppose que Node et npm sont installés sur votre ordinateur. Si ce n’est pas le cas, vous pouvez soit vous rendre sur la page d’accueil du projet et récupérer les fichiers binaires pertinents pour votre système, soit vous pouvez utiliser un gestionnaire de versions . Je recommanderais d'utiliser un gestionnaire de versions.
Nous aurons également besoin de Vue CLI et du paquet @ vue / cli-init :
npm install -g @vue / cli
npm install -g @ vue / cli-init
Ceci fait, prenons une copie du modèle:
vue init kocal / vue-web-extension new-tab-page
Cela ouvrira un assistant qui vous posera un tas de questions. Pour garder ce didacticiel concentré, j'ai répondu comme suit:
? Nom du projet new-tab-page
? Description du projet Une extension web Vue.js
? Auteur James Hibbard
? Licence MIT
? Utiliser le polyfill d'extension Web de Mozilla? Non
? Fournir une page d'options? Non
? Installer une vue-routeur? Non
? Installer Vuex? Non
? Installer axios? Oui
? Installer ESLint? Non
? Installer plus jolie? Non
? Installer automatiquement les dépendances? npm
Vous pouvez adapter vos réponses en fonction de vos préférences, mais vous devez surtout choisir d'installer axios . Nous allons utiliser ceci pour récupérer les blagues.
Ensuite, accédez au répertoire du projet et installez les dépendances:
cd new-tab-page
npm installer
Ensuite, nous pouvons construire notre nouvelle extension à l'aide de l'un des scripts fournis par le client:
npm run watch: dev
Ceci créera l'extension dans un dossier dist à la racine du projet pour le développement et surveillera les modifications.
Pour ajouter l'extension à Chrome, suivez le même processus décrit ci-dessus, en vous assurant sélectionner le dossier dist comme répertoire d’extension. Si tout se déroule comme prévu, vous devriez recevoir le message «Hello world!» Lors de l’initialisation de l’extension.
Configuration du projet
Prenons une minute pour parcourir notre nouveau projet et voir ce que nous a fourni le modèle standard. La structure actuelle du dossier devrait ressembler à ceci:
.
├── dist
└──
├── node_modules
└──
├── package.json
├── package-lock.json
├── scripts
├── build-zip.js
└── remove-evals.js
├── src
├── background.js
├── icônes
│ ├── icon_128.png
│ ├── icon_48.png
│ └── icon.xcf
├── ├── manifest.json
└── popup
├── ├── App.vue
├── ├── popup.html
└── popup.js
└── webpack.config.js
Comme vous pouvez le constater, à partir du fichier de configuration situé à la racine du projet, le passe-partout utilise un pack Web sous le capot. C’est génial, car cela nous donne Rechargement de module à chaud pour notre script d’arrière-plan.
Le dossier src contient tous les fichiers que nous allons utiliser pour l’extension. Le fichier manifeste et background.js doivent vous être familiers, mais notez également un dossier popup contenant un composant Vue. Lorsque le passe-partout construit l'extension dans le dossier dist il dirige tous les fichiers .vue via le vue-loader et génère un paquet JavaScript que le navigateur peut comprendre.
Le dossier src se trouve également dans un dossier icons . Si vous regardez dans la barre d’outils de Chrome, vous devriez voir une nouvelle icône pour notre extension (également appelée action de navigateur ). Ceci est tiré de ce dossier. Si vous cliquez dessus, vous devriez voir une fenêtre pop-up ouverte qui affiche «Hello world!». Elle est créée par popup / App.vue .
Enfin, notez les scripts . ] dossier contenant deux scripts – un pour supprimer eval les utilisations conformes à la politique de sécurité du contenu du Chrome Web Store et un pour emballer votre extension dans un fichier .zip, nécessaire lors de son téléchargement sur le Web Chrome Store.
Il existe également divers scripts déclarés dans le fichier package.json . Nous utiliserons npm run watch: dev pour développer l'extension, puis npm run build-zip pour générer un fichier ZIP à télécharger sur le Chrome Web Store.
Utilisation d'un composant Vue pour la nouvelle page d'onglets
Commencez par retirer l'énorme énoncé d'alerte de background.js .
Créons maintenant un nouvel onglet . dans le dossier src pour héberger le code de notre nouvelle page à onglet. Nous allons ajouter trois fichiers à ce nouveau dossier - App.vue tab.html, tab.js :
mkdir src / tab
appuyez sur src / tab / {App.vue, tab.html, tab.js}
Ouvrez tab.html et ajoutez ce qui suit:
Nouvel onglet
Rien de spécial ne se passe ici. Ceci est une simple page HTML qui contiendra notre instance Vue.
Ensuite, dans tab.js ajoutez:
importez Vue depuis 'vue';
importer l'application depuis './App';
nouveau Vue ({
el: '#app',
rendre: h => h (App)
});
Ici, nous importons Vue, passons un sélecteur pour l'élément que nous souhaitons le remplacer par notre application, puis lui demandons de rendre notre composant App .
Enfin, dans App. vue :
Avant de pouvoir utiliser cette nouvelle page à onglet, nous devons mettre à jour le fichier manifeste:
{
"name": "new-tab-page",
...
"chrome_url_overrides": {
"newtab": "tab / tab.html"
}
}
Et nous devons également demander à la chaudière de compiler nos fichiers et de les copier dans le dossier dist afin qu'ils soient disponibles pour l'extension.
Alter webpack.config. js aime bien, mettant à jour les clés entrées et :
entrée: {
'background': './background.js',
'popup / popup': './popup/popup.js',
'onglet / onglet': './tab/tab.js'
}
plugins: [
...
new CopyWebpackPlugin([
{ from: 'icons', to: 'icons', ignore: ['icon.xcf']},
{de: 'popup / popup.html', à: 'popup / popup.html', transformer: transformHtml},
{de: 'tab / tab.html', à: 'tab / tab.html', transform: transformHtml},
...
})
Vous devez redémarrer la tâche npm run watch: dev pour que ces modifications prennent effet. Une fois que vous avez terminé, rechargez le poste et ouvrez un nouvel onglet. La page "Ma nouvelle page d'onglet" devrait s'afficher.
Récupération et affichage de blagues
Très bien, nous avons remplacé la nouvelle page d'onglet de Chrome et l'avons remplacée. avec une mini application Vue. Faisons maintenant plus que d'afficher un message.
Modifiez la section modèle dans src / tab / App.vue comme suit:
Modifier le paragraphe comme suit:
Enfin, modifiez la section
Si vous exécutez la tâche npm run watch: dev l'extension doit être rechargée automatiquement et une blague devrait s'afficher chaque fois que vous ouvrez une nouvelle page à onglet.
Une fois que vous avez vérifié que tout fonctionne bien, prenons une minute pour comprendre ce que nous avons fait.
Dans le modèle, nous utilisons un v-if . bloquer d’afficher un message de chargement ou une blague, selon l’état de la propriété loading . Initialement, il sera réglé sur true (affichant le message de chargement), puis notre script déclenchera une requête Ajax pour récupérer la blague. Une fois la requête Ajax terminée, la propriété loading sera définie sur false ce qui entraînera la restitution du composant et l'affichage de notre blague.
In the section, nous importons axios, puis déclarons quelques propriétés de données - la propriété susmentionnée de chargement et une propriété blague destinée à contenir la blague. Nous utilisons ensuite le crochet de cycle de vie monté qui se déclenche une fois notre instance Vue montée, pour envoyer une requête Ajax à l'API de plaisanterie [1945984]. Une fois la demande terminée, nous mettons à jour nos deux propriétés de données afin de restituer le composant.
Jusqu'ici, tout va bien.
Persistence des blagues sur le stockage de Chrome
Ensuite, ajoutons quelques boutons pour permettre à l’utilisateur de mettre en favori une blague et d’énumérer les blagues préférées Comme nous allons utiliser l'API de stockage de Chrome pour conserver les blagues, il peut être intéressant d'ajouter un troisième bouton pour supprimer toutes les blagues favorites du stockage.
Ajoutez les boutons au bloc v-else. :
{{blague}}
Rien de trop excitant ici. Notez la manière dont nous lions la propriété disabled désactivée du bouton similaire à une propriété de données de notre instance Vue pour déterminer son état. En effet, un utilisateur ne doit pas pouvoir aimer une blague plus d’une fois.
Ajoutez ensuite les gestionnaires de clics et le likeButtonDisabled à notre section de script:
export default {
Les données () {
revenir {
chargement: vrai,
blague: "",
likeButtonDisabled: false
}
},
méthodes: {
likeJoke () {
chrome.storage.local.get ("blagues", (res) => {
si (! res.jokes) res.jokes = [];
res.jokes.push (this.joke)
chrome.storage.local.set (res);
this.likeButtonDisabled = true;
});
},
logJokes () {
chrome.storage.local.get ("blagues", (res) => {
if (res.jokes) res.jokes.map (joke => console.log (blague))
});
},
Effacer le stockage(){
chrome.storage.local.clear ();
}
},
monté() { ... }
}
Nous avons déclaré ici trois nouvelles méthodes pour gérer les trois nouveaux boutons.
La méthode likeJoke recherche une propriété blagues dans le stockage de Chrome. S'il manque (c'est-à-dire si l'utilisateur n'a pas encore aimé une blague), il l'initialise dans un tableau vide. Ensuite, il pousse la blague actuelle sur ce tableau et l'enregistre de nouveau dans le stockage. Enfin, il définit la likeButtonDisabled propriété de données sur true désactivant ainsi le bouton de même type.
La méthode de logJokes recherche également les blagues . propriété dans le stockage de Chrome. S'il en trouve une, il parcourt toutes ses entrées et les enregistre sur la console.
Espérons que la méthode clearStorage est claire.
Continuez et essayez cette nouvelle fonctionnalité de l'extension. et assurez-vous que cela fonctionne.
Ajouter du polonais à l'extension
Bien, cela semble fonctionner, mais les boutons sont laids et la page un peu claire. . Terminons cette section en ajoutant du vernis à l’extension.
Pour la prochaine étape, installez la bibliothèque vue-awesome . Cela nous permettra d’utiliser certaines icônes de Font Awesome sur notre page et de rendre ces boutons plus jolis:
npm install vue-awesome
Enregistrez la bibliothèque avec notre application Vue dans src / tab / tab.js :
importez Vue depuis 'vue';
importer l'application depuis './App';
importer "vue-awesome / icons";
importer l'icône de "vue-awesome / components / Icon";
Vue.component ("icon", Icon);
nouveau Vue ({
el: '#app',
rendre: h => h (App)
});
Modifiez le modèle de la manière suivante:
Enfin, ajoutons un peu plus de style aux boutons et incluons une image du père préféré de tout le monde :
L'extension devrait recharger. Essayez d'ouvrir un nouvel onglet et vous devriez voir quelque chose comme ceci.
Chargement de l'extension dans le Chrome Web Store
Si vous souhaitez que votre extension soit disponible pour le téléchargement, vous devez faites-le via le Chrome Web Store .
La première chose dont vous aurez besoin pour ce faire est un compte Google, que vous pouvez utiliser pour vous connecter au tableau de bord du développeur . . Les informations relatives à votre développeur vous seront demandées et, avant de publier votre première application, vous devrez payer des frais d'inscription uniques de 5 USD (par carte de crédit).
Vous devez ensuite créer un fichier ZIP pour votre application. . Vous pouvez le faire localement en exécutant le npm run build-zip . Cela créera un dossier dist-zip dans la racine de votre projet, contenant un fichier ZIP prêt à être chargé sur le Web Store.
Pour une extension minimale, c’est tout ce que vous avez vraiment besoin de faire. Cependant, avant de télécharger quoi que ce soit, il est utile de lire le guide officiel Publier dans le Chrome Web Store .
Conclusion
Et voilà, nous avons terminé. Dans ce didacticiel, j’ai mis en évidence les principales parties d’une extension Chrome et expliqué comment utiliser le passe-partout de vue-web-extension pour construire une extension à l’aide de Vue.js. Nous avons terminé en examinant comment télécharger une extension dans Web Store et tout ce qui en découlait.
J'espère que vous avez apprécié ce didacticiel et que vous pouvez l'utiliser pour commencer à créer vos propres extensions Chrome. Faites-moi savoir si vous faites quelque chose de cool .
Source link
