Comment créer une extension Chrome

Alors que de nos jours, il semble y avoir une extension pour tout, il n'est pas impossible pour quelqu'un de lutter pour trouver une extension de navigateur pour un usage ou un besoin particulier. Est-ce compliqué d'en construire un ? Vous trouverez ci-dessous un guide étape par étape sur la création d'une extension Chrome :

Étape 1 : Exigences

Deux notes avant de commencer :

• Bien que cela puisse sembler évident pour la plupart, il est important de créer votre extension dans Google Chrome lui-même.
• Testez votre travail au fur et à mesure que vous progressez dans ce processus. Il est plus facile de corriger les erreurs de codage au fur et à mesure que de revenir en arrière une fois que vous avez terminé.

Avant de commencer, vous devrez décider de la fonction de l'extension. A quoi servira-t-il ? Concentrez-vous sur les intérêts et les problèmes de votre public afin de pouvoir définir clairement le type de solution que vous pouvez proposer.

Une fois que vous avez couvert cela, vérifiez la conception. Chaque extension téléchargée sur la boutique Google Chrome nécessite une icône. Vous pouvez le créer vous-même ou sous-traiter la conception. Une fois que vous avez votre icône, vous pouvez commencer à créer votre extension.

Étape 2 : Blocs de construction

Comme tout logiciel, l'extension sera composée de plusieurs fichiers. Donc, la première chose que vous devez faire est de créer un répertoire qui hébergera tous vos fichiers d'extension.

Un répertoire est un emplacement où stocker des fichiers sur votre ordinateur. Tout système d'exploitation avec une structure de fichiers hiérarchique, comme MS-DOS, OS/2 ou Linux, a un répertoire de fichiers.

Pourquoi avez-vous besoin d'un répertoire? Ainsi, lorsque Chrome charge votre extension, vous pouvez extraire les fichiers du bon dossier.

fichier manifest.json

Ensuite, vous devez créer le fichier manifeste de votre extension.

Un manifeste est un fichier qui indique au système d'exploitation comment démarrer un programme . Les paramètres d'un fichier manifeste sont toujours spécifiés à l'aide du langage XML. Les manifestes sont souvent utilisés pour inclure des paramètres tels que les privilèges, informer le système d'exploitation de la version d'une DLL que le programme utilisera.

Dans le cas de votre extension, le fichier manifeste donnera à Chrome les instructions pour charger l'extension.

Création de votre fichier manifeste

Dans Chrome, créez un fichier nommé manifest.json et ajoutez-le à votre répertoire. Ajoutez le code dont vous avez besoin à votre fichier manifeste. Ajoutez ensuite le code suivant :

{

"name": "Exemple de démarrage",

"description": "Créer une extension !",

"version": "1.0",

"manifest_version": 3

}

Les autorisations de l'extension dépendent de la fonction d'extension. Vous pouvez trouver une liste de toutes les autorisations et leur signification dans la documentation de l'extension Chrome.

Page contextuelle

Si votre site a besoin d'un popup, vous devez l'ajouter à votre code.

1. Attribuez le nom du fichier avec browser_action dans le fichier manifeste.
2. Créez la page contextuelle avec HTML ou CSS. Vous pouvez ajouter des images avec SVG.
3. Utilisez JavaScript pour ajouter des fonctionnalités à la fenêtre contextuelle. Désignez le fichier JavaScript et liez-le dans votre fichier contextuel. Par example:
4. Vous pouvez créer des fonctionnalités et avoir accès au DOM contextuel. Voici un exemple de la façon de le faire.

document.addEventListener("DOMContentLoaded", () => {

var bouton = document.getElementById("soumettre")

bouton.addEventListener("clic", (e) => {

console.log(e)

})

})

Scénario de contenu

La section content_script définit où l'extension doit fonctionner. Si vous souhaitez que l'extension fonctionne sur tous les sites, vous devez écrire :

"script_contenu": [

{

"correspond" : ["<all_urls>"],

"css": ["fond.css"],

"js": ["fond.js"]

}

],

Si vous souhaitez que l'extension fonctionne sur un seul site, comme Facebook, par exemple, vous devez ajouter ["https://facebook.com/*"]

Page des événements

Un événement est un objet qui vous permet d'être averti lorsque quelque chose d'intéressant se produit. Par exemple, vous pouvez utiliser l'événement chrome.alarms.onAlarm pour être averti lorsqu'une alarme est due.

chrome.alarms.onAlarm.addListener(fonction(alarme) {

appendToLog('alarms.onAlarm –'

+ ' nom : ' + alarme.nom

+ ' scheduleTime: ' + alarm.scheduledTime);

});

Vous pouvez en savoir plus sur les pages d'événements dans les documents Chrome

Contenu.js

Les scripts de contenu sont des fichiers JavaScript qui font partie des extensions de navigateur. Les scripts de contenu ont plus de privilèges que le javascript ordinaire.

Étape 3 : Ouvrez un fichier HTML contextuel à partir de la fenêtre contextuelle de l'extension Chrome

Si vous placez un bouton dans votre extension Chrome native, lorsque vous cliquez sur ce bouton, vous pouvez créer une autre fenêtre contextuelle HTML dans un contenu différent. Voici un exemple sur StackOverflow :

Le manifeste.json :

{

"nom": "CheatSheets",

"description": "extension de feuille de triche",

"version": "1.0",

"manifest_version": 3,

"Contexte": {

"service_worker": "background.js"

},

"permissions": ["stockage", "activeTab", "scripting", "onglets"],

"action": {

"default_popup": "popup.html",

"icône_par_défaut": {

"16": "/images/get_started16.png",

"32": "/images/get_started32.png",

"48": "/images/get_started48.png",

"128": "/images/get_started128.png"

}

},

"Icônes": {

"16": "/images/get_started16.png",

"32": "/images/get_started32.png",

"48": "/images/get_started48.png",

"128": "/images/get_started128.png"

}

}

Le popup.html :

<!DOCTYPE html>

<html>

<tête>

<link rel="stylesheet" href="style.css">

</tête>

<corps>

<button id="git_Sheet">feuille de calcul</button>

<script src="popup.js"></script>

</body>

</html>

Et le fichier popup.js :

laissez gitSheet = document.getElementById("git_Sheet"); gitSheet.addEventListener("click", async () => { laisser

= attendre chrome.tabs.query({ active : vrai, currentWindow : vrai }); chrome.scripting.executeScript({ cible : { tabId : tab.id }, fonction : ShowGitSheet, }); }); function ShowGitSheet() { chrome.browserAction.openPopup({ popup : "git_popup.html" }); }

Astuce : utilisez chrome.windows.create({url : '…', type : 'popup'}) au lieu de chrome.browserAction.openPopup si vous souhaitez qu'un autre navigateur que firefox exécute votre extension.

Étape 4 : Vérifiez les erreurs après l'installation de votre extension dans Chrome

Une fois que vous avez terminé l'étape de construction, il est temps de tester l'extension pour vous assurer que Chrome l'exécutera. Pour charger votre extension et commencer le débogage, procédez comme suit :

• Ouvrez chrome://extensions dans votre navigateur Google Chrome.
• Définissez le mode développeur en cochant la case Développeur dans le coin supérieur droit.
• Cliquez sur "Charger l'extension décompressée" et vous verrez votre fichier avec une option pour le sélectionner.
• Si votre extension est valide, elle devrait se charger immédiatement lorsque vous la sélectionnez.
• S'il n'est pas valide, un message d'erreur s'affichera.

Lors de l'écriture de code, les erreurs les plus courantes sont les erreurs de syntaxe. Donc, la première chose est de vérifier à nouveau que toutes vos virgules et parenthèses sont au bon endroit et au bon format.

Ensuite, assurez-vous de cocher la case "activé" afin de pouvoir le voir fonctionner.

Étape 5 : Ajoutez une logique à l'action.

Une bonne règle empirique consiste à placer les appels d'API dans le script d'arrière-plan et la manipulation DOM dans le script de contenu. Voyons un exemple d'ajout d'un script d'arrière-plan :

1. Créez le fichier appelé background.js dans le répertoire des extensions
2. Enregistrer le script d'arrière-plan dans le manifeste

{

"name": "Exemple de démarrage",

"description": "Créer une extension !",

"version": "1.0",

"manifest_version": 3,

"Contexte": {

"service_worker": "background.js"

}

}

Chrome peut analyser le fichier pour obtenir des instructions supplémentaires lorsque vous rechargez l'extension, telles que des événements.

1. Ajoutez le scénario. Il sera différent selon l'objet de votre extension.

Pour aider votre extension à obtenir des informations lors de son installation, vous devez inclure un événement d'écoute pour runtime.onInstalled dans le script d'arrière-plan. Ensuite, l'écouteur onInstalled st une valeur à l'aide de l'API de stockage, afin que les composants d'extension puissent accéder à la valeur et la mettre à jour.

// background.js

laisser color = '#3aa757';

chrome.runtime.onInstalled.addListener(() => {

chrome.storage.sync.set({ couleur });

console.log('Couleur d'arrière-plan par défaut définie sur %cgreen', `color : ${color}`);

});

En savoir plus sur les prochaines étapes sur le site des développeurs de Google Chrome. Cela inclut la création de votre interface utilisateur et de votre icône et l'établissement d'une logique de couche pour améliorer l'interaction de l'utilisateur.

Comme d'habitude, pour commencer à concevoir votre interface, vous devez enregistrer une action du navigateur dans votre fichier manifeste. Par exemple, si vous utilisez une fenêtre contextuelle, le code pourrait ressembler à ceci :

<!DOCTYPE html>

<html>

<tête>

<link rel="feuille de style" href="bouton.css">

</tête>

<corps>

<bouton id="changeColor"></bouton>

</body>

</html>

Quelles sont les exigences d'une icône ? Pour les images, 16×16 et 32×32 pixels. Toutes les icônes doivent être carrées.

N'oubliez pas d'ajouter vos scripts logiques pour que votre extension sache quoi faire. Par exemple, vous pouvez l'ajouter à la fin du script popup.js.

// Lorsque le bouton est cliqué, injecte setPageBackgroundColor dans la page courante

changeColor.addEventListener("clic", asynchrone () => {

laisser

= attendre chrome.tabs.query({ active : vrai, currentWindow : vrai });

chrome.scripting.executeScript({

cible : { tabId : tab.id },

fonction : setPageBackgroundColor,

});

});

// Le corps de cette fonction sera exécuté comme un script de contenu à l'intérieur du

// page actuelle

fonction setPageBackgroundColor() {

chrome.storage.sync.get("couleur", ({ couleur }) => {

document.body.style.backgroundColor = couleur ;

});

}

fonction setPageBackgroundColor() {

chrome.storage.sync.get("couleur", ({ couleur }) => {

document.body.style.backgroundColor = couleur ;

});

Étape 6 : Essayez votre extension

La prochaine étape consiste logiquement à tester en permanence l'extension afin de vous assurer que tout fonctionne comme il se doit. Si vous externalisez les tests, profitez-en pour vérifier à quel point l'interface est intuitive. Selon les résultats du test, ajustez vos scripts, puis testez à nouveau.

Étape 7 : Soumettez votre extension au Chrome Web Store

Une fois que vous êtes satisfait de votre extension, vous pouvez vous rendre sur la boutique en ligne Chrome et la soumettre.

Dans la boutique des développeurs Chrome, cliquez sur Nouvel élément , puis déposez le fichier de projet dans l'uploader.

Chrome posera quelques questions pour demander des informations sur ses autorisations et pourquoi sont-elles nécessaires.

Exemples d'extensions Google Chrome

Il semble y avoir une extension pour tout. Voici quelques-uns des plus utiles :

• Enregistrer dans Drive
  Cette extension installe une petite icône en haut du navigateur. Il enverra tout ce que vous naviguez sur votre compte Drive afin que vous puissiez le consulter plus tard. Cela fonctionne en prenant des captures d'écran, en enregistrant des images, de l'audio ou de la vidéo.
• Trié
  Ce plugin donne aux utilisateurs un moyen d'organiser leurs boîtes de réception et de prioriser ce qui compte le plus pour eux. Il s'intègre à Gmail et vous permet de glisser-déposer des messages dans des colonnes personnalisées.
• HTTPS partout
  Cette extension améliore la sécurité de votre navigation en changeant n'importe quel site Web de http en HTTPS sécurisé, il est donc crypté et sécurisé.
• Je m'en fiche des cookies
  Chaque site Web vous demandant d'accepter les cookies, cette extension est une bouée de sauvetage. Cela peut ne pas sembler beaucoup, mais appuyez sur le bouton d'accord sur les pop-ups de cookies. Cela vous fera gagner du temps et accélérera votre productivité.
• Test de rapidité
  
  Cette extension utile vous permet de vérifier votre vitesse de connexion lors de vos déplacements. Avec une version de bureau et mobile, vous pouvez vous assurer que votre connexion est optimale avant de télécharger une pièce jointe volumineuse ou de diffuser une vidéo.
  En un clic, Speedtest effectuera un test de connexion rapide sur le réseau que vous utilisez.

Que peut faire votre extension Chrome ?

Les extensions personnalisées sont des programmes logiciels qui exécutent une seule tâche. Cela étant dit, vous pouvez inclure plusieurs fonctionnalités, mais gardez à l'esprit que tout doit fonctionner pour atteindre le même objectif.

Une extension Chrome fonctionne en utilisant des actions de page ou des actions de navigateur :

Action de page : il s'agit d'une action spécifique à certaines pages.

Action du navigateur : est pertinente quelle que soit la page sur laquelle vous vous trouvez.

Assurez-vous que l'interface utilisateur est conviviale et simple à comprendre. Le livrable final sera un package que l'utilisateur pourra télécharger et installer.

5 façons éprouvées de gagner de l'argent avec votre extension

L'objectif principal de votre extension est de générer des revenus. Une fois que vous avez défini votre public cible et comment il utilisera l'extension, vous pouvez élaborer une stratégie pour en tirer de l'argent. Nous avons rédigé un guide détaillé sur la monétisation des extensions. Voici quelques faits saillants :

1. Annonces intégrées à l'application

La publicité intégrée à l'application est l'un des moyens les plus courants de monétiser votre extension. Ce sont des publicités qui apparaissent à un utilisateur lorsqu'il utilise votre extension. Lorsque vous monétisez via la publicité in-app via une solution programmatique, cela fait tourner les publicités. Contrairement aux publicités statiques, cette technique vous aide à maximiser votre potentiel. En utilisant la publicité display, vous pouvez mélanger différents types d'annonces.

Les utilisateurs de CodeFuel maximisent leur rendement et simplifient leur monétisation car le service affiche des publicités pertinentes par rapport à l'intention de l'utilisateur.

2. Annonces de recherche

Il s'agit d'une stratégie où les annonces sont placées sur une page de résultats de moteur de recherche. Étant donné que les annonces apparaissent lorsque la personne recherche quelque chose, cela ne perturbe pas l'expérience utilisateur. Vous pouvez personnaliser les annonces de recherche en fonction de l'intention de l'utilisateur, afin d'améliorer l'expérience utilisateur.

3. Paiements et achats intégrés

Dans ce modèle, l'extension est gratuite, mais certaines fonctionnalités internes sont payantes. Les achats intégrés sont courants parmi les applications de jeu et les extensions. L'utilisateur choisit s'il souhaite ajouter les fonctionnalités payantes supplémentaires.

4. Mises à niveau payantes

De même, dans ce modèle, l'extension de base est offerte gratuitement, mais si l'utilisateur souhaite une version premium, il doit payer pour la version mise à niveau. Il s'agit d'un modèle extrêmement courant, utilisé par des extensions populaires comme Grammarly.

5. Freemium

C'est probablement le modèle de monétisation le plus populaire pour les extensions et les applications. Avec freemium, vous offrez l'extension gratuitement. Comment en gagnez-vous de l'argent ? Vous avez plusieurs options:

1. Vous pouvez proposer un essai gratuit pour une durée limitée.
2. Vous pouvez proposer une version de base gratuite avec des fonctionnalités limitées.

Si vous choisissez ce modèle, tenez compte de ses limites puisque Google a abandonné les extensions payantes.

Les meilleures extensions de sécurité Google Chrome :

La plupart des gens utilisent Chrome pour tout, du shopping à la recherche en passant par la gestion de leurs comptes financiers. Toutes ces données sensibles doivent être protégées. Il existe plusieurs extensions qui peuvent sécuriser ces informations.

1. Sécurité en ligne Avast

Cette extension couvrira la sécurité de votre navigation web avec de multiples fonctionnalités. Sa protection contre les attaques de phishing analyse les éléments de n'importe quelle page Web et détecte si la page est fausse ou suspecte . D'autres fonctionnalités intéressantes incluent l'utilisation d'un système d'évaluation communautaire pour détecter les sites dangereux.

2. Flou

Il existe un certain nombre de gestionnaires de mots de passe disponibles, ce qui est indispensable pour garantir la sécurité de toutes vos informations d'identification. Blur est l'un des plus sécurisés, en raison de ses fonctionnalités de sécurité supplémentaires.

Blur crypte, enregistre et gère vos mots de passe . Il masque également les informations de votre carte de crédit sur les sites d'achat et bloque tous les types de traceurs, y compris ceux qui ne sont pas des cookies.

3. Cliquez et nettoyez

C'est un outil de nettoyage qui efface toutes les traces de votre activité en ligne en un seul clic . Le bouton d'extension effacera tout l'historique en ligne, les cookies, le cache, les URL enregistrées, les bases de données Web SQL et même les fichiers temporaires. Click and Clean a un anti-malware intégré et il peut même être personnalisé pour supprimer certains types de données.

4. Bouton panique

Cette extension vous aide à fermer tout ce que vous avez ouvert en un seul clic. Ceci est utile si vous travaillez sur quelque chose de sensible et qu'une personne non autorisée s'approche. Lorsque vous cliquez sur le bouton de panique, tous les onglets se ferment immédiatement et sont stockés dans le dossier des signets.

5. Fantôme

Si vous souhaitez protéger votre vie privée en ligne ou contrôler les trackers, cette extension peut être la solution. Ghostery vous donne le contrôle sur les trackers afin que vous puissiez décider lesquels bloquer ou débloquer. Il vous permet également de bloquer le suivi d'un type spécifique.

Comment CodeFuel peut vous aider à maximiser le rendement de votre extension

Faites passer la monétisation de votre extension au niveau supérieur avec CodeFuel. Notre plate-forme de monétisation complète fournit une monétisation basée sur l'intention pour vos propriétés numériques, y compris les extensions de navigateur.

La solution s'appuie sur l'apprentissage automatique pour proposer aux utilisateurs des annonces textuelles et d'achat très pertinentes, personnalisées en fonction de l'intention. Contrairement à d'autres solutions, CodeFuel vous offre la possibilité de travailler avec plusieurs réseaux publicitaires tels que Bing et Google AdSense. Commencez dès aujourd'hui à maximiser le rendement de votre extension avec CodeFuel.

Comment réparer une extension Chrome si elle se fige ?

Vous travaillez avec votre extension Chrome et soudain le navigateur se fige. Quelle frustration. Ce n'est pas courant, mais ça arrive. Si Chrome se bloque ou se bloque, vous recevrez un message d'erreur indiquant le type d'erreur, par exemple, une erreur de proxy ou la page Web n'est pas disponible.

L'aide de Chrome répertorie un certain nombre de conseils de dépannage :

• Fermer les autres onglets et applications
• Redémarrez le navigateur
• Rechercher les logiciels malveillants
• Testez le réseau pour les problèmes
• Si votre extension est à l'origine d'un conflit avec Chrome , suivez ces instructions :

1. En haut à droite, cliquez sur Plus Réglages.
2. En bas, cliquez sur Avancé .
3. Cliquez sur Réinitialiser et nettoyer Mettez à jour ou supprimez les applications incompatibles.
   Si vous ne voyez pas cette option, il n'y a pas de problème d'application.
4. Décidez si vous souhaitez mettre à jour ou supprimer chaque application de la liste.
   Ouvrez la boutique d'applications de votre ordinateur et recherchez une mise à jour.

FAQ