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 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:

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

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