Comment créer une extension Chrome à partir de zéro en 3 étapes
Les extensions de navigateur, souvent perçues comme de simples modules complémentaires, sont en réalité des outils puissants qui enrichissent l'expérience de navigation. Elles permettent d'ajouter des fonctions personnalisées et sophistiquées aux fonctionnalités de base de votre navigateur.
Mais qu'est-ce qui distingue une extension d'une application web traditionnelle ? La réponse réside dans l'accès qu'elle a aux API du navigateur, lui offrant un contrôle étendu sur son comportement et son interface.
Grâce à une extension, vous pouvez :
- Personnaliser l'apparence de votre navigateur et de ses onglets.
- Ajouter des raccourcis clavier pour des actions spécifiques.
- Effectuer une surveillance précise de votre activité en ligne.
Google Chrome propose une plateforme dédiée, le Chrome Web Store, où les développeurs peuvent partager leurs créations. La conception d'une extension peut sembler complexe, mais elle repose sur des fondations simples : HTML, CSS et JavaScript.
Effectivement, vous pouvez développer une extension Chrome à l'aide de technologies web accessibles. Voici un guide pratique pour vous lancer !
Concevoir une extension Chrome
Ce tutoriel vous guidera dans la création d'une extension Chrome capable d'analyser l'historique de votre navigation et de le présenter via une fenêtre contextuelle.
Fichiers nécessaires
Le fichier clé pour une extension Chrome est le fichier manifest.json. Le reste du code est similaire à celui d'une application web classique.
Création du fichier manifest.json
Ce fichier définit la configuration et les fonctionnalités de l'extension. Voici un exemple de structure type :
{
"manifest_version": 3,
"name": "Historique",
"description": "Afficher l'historique de navigation",
"version": "0.1",
"action": {
"default_popup": "index.html"
}
}
La dernière version du fichier manifeste est la v3, qui, selon les informations de Chrome, apporte des améliorations en matière de sécurité, de confidentialité et de performance. Elle permet également l'utilisation de technologies web telles que les service workers et les promesses.
Le fichier manifeste contient une propriété "action" qui spécifie le fichier HTML à ouvrir lors du clic sur l'icône de l'extension. Une propriété "default_icon" permet de définir l'icône par défaut.
Développement de l'application
L'application, qui sera présentée à l'utilisateur sous forme de popup, est un élément essentiel. Il s'agit d'une application web standard.
Vous devez créer un fichier d'entrée, référencé dans la propriété "default_popup" du manifeste. Dans notre exemple, nous utilisons "index.html".
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Extension Chrome</title> <link rel="stylesheet" href="https://wilku.top/how-to-create-a-chrome-extension-from-scratch-in-3-steps/style.css"> </head> <body> <h2>Historique de Navigation</h2> <ul class="list"></ul> <script src="./app.js"></script> </body> </html>
Une feuille de style est utilisée pour la mise en forme et un fichier JavaScript est lié pour gérer les fonctionnalités.
function searchHistory() {
chrome.history.search({
text: '',
startTime: new Date("2023-10-01").getMilliseconds()
}, (results) => {
for (const result of results) {
let liItem = document.createElement("li")
let link = document.createElement("a")
link.innerText = result.title
link.href = result.url
liItem.appendChild(link)
document.querySelector(".list").appendChild(liItem)
}
})
}
document.addEventListener("DOMContentLoaded", () => {
searchHistory()
})
Ce script utilise l' API d'historique de Chrome pour interroger l'historique de navigation et l'afficher. Au clic sur l'icône, l'événement DOMContentLoaded déclenche la fonction "searchHistory".
La méthode "search" de l'API requiert un paramètre "text" (texte de recherche pour filtrer l'historique). Une chaîne vide renvoie tout l'historique.
Le paramètre "startTime" filtre les résultats selon une date de début. Par exemple, une semaine ne renverra que l'historique de cette période. Ce paramètre est facultatif et la valeur par défaut est 24 heures.
L'API utilise une fonction de rappel qui contient les résultats dans un tableau. Vous pouvez ensuite parcourir ce tableau pour créer la liste à afficher.
for (const result of results) {
let liItem = document.createElement("li")
let link = document.createElement("a")
link.innerText = result.title
link.href = result.url
liItem.appendChild(link)
document.querySelector(".list").appendChild(liItem)
}
L'API d'historique requiert la permission "history" dans le fichier manifeste.
{
"manifest_version": 3,
"name": "Historique",
"description": "Afficher l'historique de navigation",
"version": "0.1",
"action": {
"default_popup": "index.html"
},
"permissions": [
"history"
]
}
Lancement de l'extension
L'étape finale est très simple : cliquez sur les trois points verticaux dans la barre de Chrome et sélectionnez "Gérer les extensions". Vous pouvez également y accéder via chrome://extensions/.
Activez le mode développeur si ce n'est pas déjà fait.
Cliquez ensuite sur "Charger l'extension non empaquetée" et sélectionnez le dossier de votre projet. Votre extension apparaîtra dans la liste.
Pour lancer l'extension, cliquez sur son icône dans la barre d'outils de Chrome.
Et voilà, vous venez de créer une extension Chrome ! Pour d'autres exemples, consultez les exemples officiels de Google Chrome.
Si vous souhaitez publier votre extension sur le Chrome Web Store, suivez ces étapes et payez un droit unique.
Conclusion
Développer une extension Chrome est accessible si vous avez des connaissances de base en développement web. Il suffit d'un fichier manifest et votre application devient une extension.
Maintenant que vous maîtrisez la création d'une extension Chrome, découvrez les meilleures extensions Chrome pour les développeurs.