Créer une extension de navigateur avec Vite TS

Commençons cet exercice en nous concentrant sur la configuration de la structure d'extension la plus élémentaire, une structure qui comprend uniquement un fichier manifeste et un service worker. Le manifeste agit comme un fichier de configuration, spécifiant ce que l'extension est autorisée à faire, tandis que le service worker gère les tâches en arrière-plan, répondant principalement aux événements du navigateur. Dans ce cas, il enregistre lorsque l'extension est installée.

{
  "name": "Simple",
  "version": "0.0.1",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  }
}

manifest.json

console.log("Initialized background script!");

chrome.runtime.onInstalled.addListener((object) => {
  console.log("Installed background script!");
});

background.js

Le service worker peut être aussi complexe que nécessaire, mais nous allons rester simple pour l'instant car le but de cette tâche est de transformer cette simple extension de deux fichiers en un projet Vite.

Alors pourquoi utiliser Vite ? Principalement parce que j'ai décidé de travailler avec TypeScript, ce qui améliorera considérablement la qualité, la maintenabilité et la productivité du code. En plus d'offrir une auto-documentation, TypeScript me permet de détecter les erreurs liées au type au moment de la compilation plutôt qu'au moment de l'exécution, améliorant ainsi l'expérience globale de développement.

Vite

Bien qu'un projet Node avec TypeScript suffirait à compiler mon code TS dans le JavaScript vanilla requis par mon extension, j'ai opté pour Vite. Vite, en particulier avec son bundler Rollup, offre des fonctionnalités étendues telles que le tremblement d'arbre et la minification des bundles. De plus, l'écosystème de plugins robuste de Vite me permettrait d'intégrer facilement React si je décide de créer des composants d'interface utilisateur pour l'extension à l'avenir.

Dans cet esprit, commençons par créer le projet Vite à l'aide de son modèle vanilla-ts.

npm create vite@latest simple-extension -- --template vanilla-ts

Après avoir exécuté la commande et installé les dépendances, vous aurez un petit projet Web configuré avec TypeScript. Cependant, comme cette configuration ne correspond pas tout à fait à ce dont nous avons besoin, nous allons commencer par un peu de nettoyage. Tout d’abord, supprimez le fichier index.html du dossier racine, car il n’est plus nécessaire. Ensuite, supprimez tous les fichiers du dossier src à l'exception de vite-env.d.ts, qui fournit des définitions de type pour les fonctionnalités spécifiques à Vite. Enfin, supprimez tout ce qui se trouve dans le dossier public.

⚠️ Si vous rencontrez des erreurs dans votre fichier tsconfig concernant des options de compilateur inconnues, assurez-vous que votre éditeur utilise la même version TypeScript installée pour le projet.

Ensuite, créez un nouveau fichier dans le dossier src nommé background.ts et copiez-y le code du fichier background.js d'origine.

Vous remarquerez bientôt que TypeScript nécessite un contexte supplémentaire pour fonctionner correctement, car il ne reconnaît pas l'objet Chrome sans les types appropriés. Pour résoudre ce problème, installez @types/chrome pour fournir les définitions de type nécessaires pour Chrome.

{
  "name": "Simple",
  "version": "0.0.1",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  }
}

Une fois installées, les erreurs TypeScript disparaissent. Cependant, vous remarquerez peut-être un message d'avertissement dans le rappel onInstalled. Cela est dû aux propriétés de peluchage que Vite a configurées pour nous dans notre configuration TypeScript.

console.log("Initialized background script!");

chrome.runtime.onInstalled.addListener((object) => {
  console.log("Installed background script!");
});

tsconfig.json

Puisque nous définissons un objet qui n’est pas utilisé, allons-y et supprimons-le. Cela devrait être tout ce dont nous avons besoin, alors maintenant nous pouvons compiler le projet.

npm create vite@latest simple-extension -- --template vanilla-ts

Il semble y avoir un problème : la configuration par défaut de Vite tente toujours d'utiliser certains des fichiers que nous venons de supprimer comme point d'entrée de code.

npm i -D @types/chrome

Nous devons personnaliser notre configuration Vite pour fonctionner en mode Bibliothèque. Voici la configuration minimale requise pour ce projet.

/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true

vite.config.ts

Dans la configuration ci-dessus, nous définissons simplement l'entrée du projet sur ./src/background.ts et ajustons le nom du fichier de sortie sur [name].js. Par défaut, Vite ajoute un hachage aux noms de fichiers pour les versions de production (par exemple, background-[hash].js), mais nous avons besoin d'une correspondance exacte du nom de fichier pour que notre manifest.json fonctionne correctement.

En parlant de manifest.json, où doit-il se trouver ? Cette partie est simple : tout fichier qui doit être copié tel quel, sans transformations, dans le dossier de sortie doit être placé dans le dossier public. Maintenant, si nous reconstruisons le projet, nous trouverons notre extension de navigateur à deux fichiers compilée dans le dossier dist.

npm run build

Installation

Vérifions maintenant que tout fonctionne comme prévu. Si vous n'avez jamais testé une extension de navigateur localement auparavant, suivez simplement ces étapes simples :

1. Ouvrez la page Extensions en saisissant chrome://extensions dans un nouvel onglet.
2. Activez le mode développeur en activant le commutateur Mode développeur.
3. Cliquez sur Charger décompressé et sélectionnez le répertoire d'extension, qui est le dossier dist généré par Vite. Et c'est tout ! L'extension est maintenant installée. Si vous cliquez sur le lien du service worker, les DevTools de ce service worker s'ouvriront, où vous pourrez consulter les journaux générés par notre travailleur en action.

simple-vite-extension

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!