Comment écrire une extension de base et créer un navigateur Chrome Add-on

Chrome est facilement le navigateur Web le plus populaire de la planète. Selon les statistiques StatSunter pour partager le navigateur sur le marché, le navigateur Chrome prend Énorme pourcentage 65% du marché Des navigateurs de bureau à la fin de 2017.

Avec ce genre de force de positionnement du marché, il est devenu Conception et extension de Chrome sur le navigateur Chrome Occupe une priorité. La même chose vaut pour les plugins: Chrome offre la plus grande base d'utilisateurs pour les utilisateurs, avec des dizaines de milliers de plugins, de thèmes et d'applications sur le Chrome Web Store.

Comment écrire une extension de base et créer une extension sur le navigateur Chrome - explications

 Si vous souhaitez une assistance dans ce sens, vous pouvez créer votre propre extension Chrome. Vous aurez juste besoin de quelques compétences de base en développement Web (HTML, CSS et JavaScript), ainsi que d'une petite cuillerée de JSON pour tout lier.

Nous examinerons l'infrastructure requise pour créer une extension Chrome dans ce message. Pour un examen approfondi des options disponibles, voir Guide des extensions de développeur Chrome

Ecrire une extension de base sur Chrome

Pour ce didacticiel, nous allons créer une extension Chrome de base qui affiche une fenêtre contextuelle simple lorsque vous cliquez dessus. Nous aurons besoin de deux fichiers sont importants: le code ( « icon.png »), et un fichier HTML ( « popup.html ») et l'importante déclaration ( « manifest.json »). Tous ces fichiers seront disponibles dans le répertoire avec le nom de votre add-on. Dans ce cas, appelé "Bonjour tout le monde".

Comment écrire une extension de base et créer une extension sur le navigateur Chrome - explications

L'extension Chrome est définie par sa déclaration. Cet extrait de json Chrome vous montre comment interpréter l'extension, les fichiers à télécharger et comment interagir avec l'utilisateur.

Le fichier manifeste de notre extension de base ressemble à ceci:

{

    "manifest_version": 2,

    "name": "Hello World!", 

    "description": "My first Chrome extension.",

    "browser_action": {

        "default_icon": "icon.png",

        "default_popup": "popup.html"

    },

    "permissions": [

        "activeTab"

     ]

}

Ce manifeste placera une icône dans la barre d'outils utilisateur qui, une fois chargée, chargera le contenu du fichier nommé "popup.html"Il a dit. Les éléments suivants sont des contenus rares sur le reste du contenu:

manifest_version Chrome indique la version de codec avec laquelle vous travaillez. Pour les ajouts récents, vous devrez définir ce paramètre sur 2.

prénom Affiche le nom que l'extension apparaîtra dans la boutique Chrome et "chrome: // extensions".

la description Affiche le texte descriptif affiché sur "chrome: // extensions".

action du navigateur L'icône se charge dans la barre d'outils. Il permet également de répondre à la saisie de l'utilisateur en affichant un conseil, une fenêtre contextuelle ou un badge. Découvrez Liste complète de tout "Browser_action" qui peut être fait.

default_icon Affiche le chemin d'accès à l'icône à partir du répertoire d'extension.

default_popup Il affiche le chemin d'accès au fichier qui sera téléchargé lorsque vous cliquez sur l'icône d'ajout.

autorisations Définit le domaine fonctionnel pour le guidage. activeTab est le plus courant, permettant l'accès aux onglets complémentaires à l'avant le plus. Google fournit une liste Toutes les autorisations que vous pouvez demander Une extension

Si vous voulez plonger profondément dans tout ce que vous pouvez annoncer Ajouter une déclaration Chrome, Voir Google Docs dans les données complémentaires.

Ecrire Chrome Ajouter basique: pop-ups

Maintenant que nous avons écrit notre déclaration, nous pouvons voir ce qui sera introduit dans notre add-on. Cela est dû au fichier "popup.html" qui sera affiché lorsque l'extension est chargée. Voici ce que nous allons utiliser pour ce projet:

<!doctype html>

<html>

    <head>

        <title>Hello World</title>

    </head>

    <style type="text/css">

body {

            margin: 5px;

        }

h1 {

    font-size: 15px;

    text-align: center;

        }

    </style>

    <body>

        <h1>Hello World!</h1>

    </body>

</html>

Comme vous pouvez le voir, cela va créer du texte de style CSS. Si vous souhaitez ajouter du code JavaScript ou CSS externe à votre extension, vous devez écrire des scripts dans le manifeste, sous la clé content_scripts. Une fois que vous avez référencé cette option dans la déclaration, vous pouvez télécharger ces scripts comme vous le feriez normalement.

Écrire Chrome Ajouter basique: Télécharger sur Chrome

Après avoir écrit le code de base pour nous ajouter et trouver le code approprié, nous pouvons le télécharger dans Chrome.

1. Allez dans "chrome: // extensions" et lancez "Developer Mode" en cochant la case en haut à gauche.

Comment écrire une extension de base et créer une extension sur le navigateur Chrome - explications

2. Cliquez sur le bouton "Charger l'extension déballée ..." et sélectionnez la destination de l'extension.

Comment écrire une extension de base et créer une extension sur le navigateur Chrome - explications

3. Après avoir téléchargé l'extension, vous verrez son icône dans la barre de menu.

Comment écrire une extension de base et créer une extension sur le navigateur Chrome - explications

4. Cliquez sur Ajouter pour voir son effet (très simple).

Comment écrire une extension de base et créer une extension sur le navigateur Chrome - explications

Conclusion: Développer l'extension Chrome

Une fois que vous avez terminé l'ajout et êtes prêt à publier, vous devez créer un compte Chrome App Developer. Ce n'est pas un processus complètement simple, mais Google fournit des instructions complètes Pour publier une extension Chrome ici.

Évidemment, il y a beaucoup de choses que vous pouvez faire avec l'ajout de Chrome, mais cela dépasse légèrement la portée de cette participation. Si vous voulez en savoir plus sur toutes les extensions Chrome, consultez le guide Add-ons Développeurs de logiciels Chrome de Google.

source
Aller au bouton supérieur