✅ Programmer et créer des extensions pour Chrome

Table des matières

1. Comment créer et programmer une extension Chrome
2. Exemple d'extensions pour Chrome

Ce tutoriel sera divisé en 3 sections : Une première section où nous expliquerons différents concepts concernant les extensions dans Chrome, leur structure et la création de base d'une extension. Dans la deuxième section, nous nous concentrerons sur la création d'extensions pour ce grand navigateur tel que Google Chrome, en faisant plusieurs exemples pratiques. Enfin, dans la troisième section, nous expliquerons les options avancées lors de la création d'extensions et comment les publier dans la boutique en ligne Google Chrome afin qu'elle soit accessible au grand public.

Que sont les extensions dans Google Chrome ?Les extensions sont de petits programmes qui peuvent modifier et améliorer les fonctionnalités du navigateur, en l'occurrence Chrome. Ceux-ci sont développés à l'aide de technologies Web telles que HTML, Javascript et CSS.

Les extensions ont peu ou pas d'interface utilisateur. Par exemple, l'image ci-dessous montre une icône de cadenas qui, lorsqu'on clique dessus, ouvre une petite interface.

Cette extension particulière est utilisée pour crypter et décrypter vos e-mails avec une clé PGP. Les extensions sont des fichiers regroupés en un seul, que l'utilisateur télécharge et installe. Cet emballage, contrairement aux applications Web normales, n'a pas besoin de dépendre du contenu Web.

Comme indiqué ci-dessus, les extensions vous permettent d'ajouter des fonctionnalités à Chrome sans plonger profondément dans le code natif. De nouvelles extensions peuvent être créées avec des technologies de base avec lesquelles la plupart des programmeurs de développement Web travaillent : HTML, CSS et Javascript.

1. Comment créer et programmer une extension Chrome

Pour commencer, nous allons créer une extension simple qui récupère une image de Google en utilisant l'URL de la page actuelle comme terme de recherche. Nous allons le faire en implémentant un élément d'interface utilisateur que nous appelons chrome.browserAction, ce qui nous permet de placer une icône juste à côté du menu Chrome, sur laquelle vous pouvez cliquer pour un accès rapide. Cliquer sur cette icône ouvrira une fenêtre pop-up contenant une image obtenue à partir de la page actuelle, qui ressemblera à ceci :

Pour commencer notre pratique, nous allons créer un répertoire appelé Visionneuse d'images, à l'intérieur de celui-ci, nous inclurons tous les fichiers avec lesquels nous allons travailler. En tant qu'éditeur de développement, vous pouvez utiliser celui de votre choix, dans mon cas, j'utiliserai Chrome Dev Editor, que vous pouvez télécharger à l'adresse suivante :

Éditeur de développement Chrome

La première chose dont nous aurons besoin est de créer un fichier manifeste appelé manifest.json. Ce manifeste n'est rien de plus qu'un fichier de métadonnées au format JSON qui contient des propriétés telles que le nom, la description, le numéro de version de son extension, etc. À un niveau avancé, nous allons l'utiliser pour déclarer à Chrome ce que l'extension va faire et les autorisations nécessaires pour faire certaines choses.

Le format du fichier manifeste est le suivant :

 {// Obligatoire "manifest_version": 2, "name": "My Extension", "version": "versionString", // Recommandé "default_locale": "es", "description": "Une description en texte brut", " icons ": {…}, // Sélectionnez un (ou aucun)" browser_action ": {…}," page_action ": {…}, // Facultatif" author ":…," automation ":…," background " : {// Recommandé "persistent": false}, "background_page":…, "chrome_settings_overrides": {…}, "chrome_ui_overrides": {"bookmarks_ui": {"remove_bookmark_shortcut": true, "remove_button": true}}, " chrome_url_overrides ": {…}," commandes ": {…}," content_capabilities ":…," content_scripts ": [{…}]," content_security_policy ":" policyString "," convert_from_user_script ":…," copresence ":… , "current_locale":…, "devtools_page": "devtools.html", "event_rules": [{…}], "externally_connectable": {"matches": ["*: //*.example.com/*" ]}, "file_browser_handlers": […], "file_system_provider_capabilities": {"configurable": true, "multiple_mounts": true, "source": "network"}, " homepage_url ":" http: // chemin / vers / page d'accueil "," import ": [{" id ":" aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa "}]," incognito ":" spanning or split "," input_components ":…," key " : "publicKey", "minimum_chrome_version": "versionString", "nacl_modules": […], "oauth2":…, "offline_enabled": true, "omnibox": {"keyword": "aString"}, "optional_permissions" : ["tabs"], "options_page": "options.html", "options_ui": {"chrome_style": true, "page": "options.html"}, "permissions": ["tabs"], " platformes ":…," plugins ": […]," requirements ": {…}," sandbox ": […]," short_name ":" Short_Name "," signature ":…," correcteur orthographique ":…, "storage": {"managed_schema": "schema.json"}, "system_indicator":…, "tts_engine": {…}, "update_url": "http: //path/to/updateInfo.xml", "version_name ":" aString "," web_accessible_resources " : […]}

Ensuite, je décrirai la fonction qui remplit les étiquettes les plus importantes :

En requis :

version_manifeste : C'est la version du manifeste, elle est représentée par un entier qui spécifie la version du format de fichier. À partir de Chrome 18, les développeurs doivent spécifier le nombre 2.

patate douce: C'est le nom que portera votre extension. Celui-ci doit être composé d'un maximum de 45 caractères, le nom est l'élément de définition principal de l'extension et c'est un champ obligatoire. Il est affiché aux endroits suivants :

a) Dans la boîte d'installation.
b) Dans l'interface utilisateur où l'extension est administrée.
c) Dans la boutique virtuelle Chrome.

version: Il doit être composé d'un à quatre nombres entiers séparés par des points qui identifient la version de l'extension. Voici quelques exemples de versions valides :

"Version 1"
"Version": "1.0"
"Version": "2.10.2"
"Version": "3.1.2.4567"

Conseillé:

default_locale : Spécifie le sous-répertoire de _locales (langues) qui contient les chaînes par défaut pour cette extension. Vous devez mettre toutes les chaînes visibles par l'utilisateur dans un fichier appelé messages.json. Chaque fois que vous incluez une nouvelle langue, vous devez ajouter un nouveau fichier messages.json sous le répertoire _locales / localecode où localecode est le code de langue, tout comme en est l'anglais et est pour la langue espagnole.

Un exemple d'extension internationalisée prenant en charge l'anglais (en), l'espagnol (es) et le coréen (ko) serait le suivant :

la description: Il comprend une chaîne en texte brut (sans HTML ou autre format) avec un maximum de 132 caractères qui décrit la fonctionnalité de l'extension.

Icônes: Permet d'ajouter une ou plusieurs icônes représentant l'extension. Une icône 128x128px doit toujours être fournie. Il sera utilisé lors de l'installation et dans le Chrome Web Store. Les extensions doivent également fournir une icône 48x48, qui est utilisée dans la page de gestion des extensions Chrome (chrome : // extensions). Vous pouvez également spécifier une icône 16x16 à utiliser comme favicon pour les pages d'une extension.

Les icônes doivent généralement être au format PNG, car il offre le meilleur support pour la transparence. Cependant, ils peuvent être dans n'importe quel format pris en charge par WebKit, y compris BMP.webp, GIF.webp, ICO et JPEG.webp. Voici un exemple de la spécification des icônes :

 "icons": {"16": "icon16.png.webp", "48": "icon48.png.webp", "128": "icon128.png.webp"},

Exemple

Sélectionnez-en un (ou aucun) :

action_du_navigateur : Utilisez browser_action pour placer des icônes sur la barre d'outils principale en haut du navigateur Google Chrome, à droite de la barre d'adresse. De plus, vous pouvez ajouter une info-bulle (message flottant), un badge (texte flottant sur l'icône) et une fenêtre contextuelle (fenêtre flottante).

Exemple d'utilisation browser_action :

 {"name": "Mon extension",… "browser_action": {"default_icon": {// optionnel "19": "images / icon19.png.webp", // optionnel "38": "images / icon38.png.webp" // facultatif}, "default_title": "Google Mail", // facultatif; affiche une info-bulle "default_popup" : "popup.html" // facultatif}, …}

page_action : Utilisez cette API pour placer votre icône dans la barre d'adresse.

Exemple d'utilisation :

 {"name": "Mon extension",… "page_action": {"default_icon": {// optionnel "19": "images / icon19.png.webp", // optionnel "38": "images / icon38. png" // optionnel}, "default_title": "Google mail", // optionnel; afficher dans la description "default_popup": "popup.html" // facultatif},…}

Optionnel:

Contexte: Un besoin courant dans les extensions est d'avoir une seule page pour l'exécution de longues séquences pour gérer une tâche ou un statut. Il s'agit d'une page HTML qui s'exécute en conjonction avec l'extension. Il démarre lorsque l'extension commence à s'exécuter et n'en active qu'une seule instance à la fois. Au lieu d'utiliser l'arrière-plan, il est recommandé d'utiliser une page d'événement.

Dans une extension typique avec une page en arrière-plan, l'interface utilisateur, par exemple, browser_action ou page_action, et certaines options de page agissent comme la vue de l'extension. Lorsque la vue a besoin de connaître un état (fermé la fenêtre, mis à jour la page…), elle fait la demande de l'état à la page qui se trouve en arrière-plan. Lorsque la page d'arrière-plan indique qu'il y a eu un changement d'état, elle informe la vue d'être mise à jour ou de prendre des mesures.

Son format est le suivant :

 {"name": "Mon extension",… "background": {"scripts": ["background.js"]},…}

Format

Pages d'événements : Avant de définir l'attribut suivant, il est nécessaire d'expliquer en quoi consistent les pages d'événement. Un besoin courant pour les applications et les extensions est d'avoir un seul script de longue durée pour gérer une tâche ou un état. C'est le but des pages d'événements. Les pages d'événements se chargent uniquement lorsque cela est nécessaire. Lorsqu'il ne fait pas quelque chose activement, il est déchargé du cache, libérant de la mémoire et d'autres ressources système.

Les avantages en termes de performances sont significatifs, en particulier sur les appareils à faible consommation. C'est pourquoi il est recommandé d'utiliser plus de pages d'événements que d'arrière-plan.

La déclaration d'une page d'événement dans le fichier manifeste serait la suivante :

 {"name": "Mon extension", … "background": {"scripts": ["eventPage.js"], "persistent": false}, …}

Comme vous pouvez le voir, la différence avec Background est l'attribut persistant, qui aura un statut faux.

chrome_settings_overrides : Il est utilisé pour écraser certaines configurations sélectionnées dans Chrome. Cette API est uniquement disponible pour Windows.

Certaines de ces configurations peuvent être la page d'accueil (page d'accueil du navigateur, moteur de recherche (le moteur de recherche), etc.

Exemple de configuration :

 {"name": "Mon extension",… "chrome_settings_overrides": {"homepage": "http://www.homepage.com", "search_provider": {"name": "name .__ MSG_url_domain__", "keyword " : "keyword .__ MSG_url_domain__", "search_url": "http: //www.foo.__MSG_url_domain__/s? q = {searchTerms}", "favicon_url": "http: //www.foo.__MSG_url_domain__/favicon. ico" , "suggest_url": "http: //www.foo.__MSG_url_domain__/suggest? q = {searchTerms}", "instant_url": "http: //www.foo.__MSG_url_domain__/instant ? q = {searchTerms}" , " image_url ":" http: //www.foo.__MSG_url_domain__/image? q = {searchTerms} "," search_url_post_params ":" search_lang = __ MSG_url_domain__ "," suggest_url_post_params ":" suggest_lang = __ MSG_url__domain ": instant_lang =__ MSG_url_domain =" instant_url_params_url_domain " __MSG_url_domain__ "," image_url_post_params ":" image_lang = __ MSG_url_domain__ "," alternate_urls ": [" http: //www.moo.__MSG_url_domain__/s} Q =" {search:Terms" .noo.__MSG_url_url_ ? q = {searchTerms} "]," encodage ":" UTF-8 "," is_default ": true}," startup_pages ": [" http://www.st artup.com "]}," default_locale ":" de ", …}

chrome_ui_overrides : Cette propriété de l'extension est utilisée pour écraser certains paramètres de l'interface utilisateur de Chrome. Comme par exemple les marqueurs. Sa configuration est la suivante :

 {"name": "Mon extension",… "chrome_ui_overrides": {"bookmarks_ui": {"remove_button": "true", "remove_bookmark_shortcut": "true"}},…}

Dans ce cas, l'étoile que le navigateur a pour les favoris est supprimée.

chrome_url_overrides : C'est un moyen de remplacer le fichier HTML de l'extension d'une page que le navigateur Google Chrome fournit normalement. De plus, vous pouvez également écraser son code CSS et JavaScript.

Une extension avec cette configuration peut remplacer l'une des pages Chrome suivantes :

Gestionnaire de favoris : C'est la page qui apparaît lorsque l'utilisateur choisit l'option dans le menu du gestionnaire de favoris dans le menu Chrome ou pour Mac, l'élément Gestionnaire de favoris dans le menu Favoris.

AGRANDIR

Histoire (histoire): C'est la page qui apparaît lorsque l'utilisateur choisit l'historique dans le menu Chrome ou, sur le Mac, l'élément affiche l'historique complet dans le menu trouvé dans l'option historique.

AGRANDIR

Nouvel onglet (nouvel onglet) : C'est la page qui apparaît lorsque l'utilisateur crée un nouvel onglet ou une nouvelle fenêtre à partir du navigateur. Vous pouvez également accéder à cette page en plaçant l'adresse suivante dans la barre d'adresse : chrome : // newtab

AGRANDIR

NoterUne seule extension ne peut écraser qu'une seule page. Par exemple, une extension ne peut pas écraser les signets et à son tour la page d'historique.

 {"name": "My extension",… "chrome_url_overrides": {"newtab": "mypage.html" // les options sont newtab, history, bookmarks},…}

commandes : Cette API de commande permet d'ajouter les raccourcis clavier qui déclenchent une action dans votre extension. Par exemple, une action pour ouvrir l'action du navigateur ou envoyer une commande à l'extension.

 {"name": "Mon extension",… "commands": {"toggle-feature-foo": {"suggested_key": {"default": "Ctrl + Shift + Y", "mac": "Command + Shift + Y "}," description ":" Basculer la fonctionnalité foo "}," _execute_browser_action ": {" suggest_key ": {" windows ":" Ctrl + Shift + Y "," mac ":" Commande + Shift + Y ", "chromeos": "Ctrl + Shift + U", "linux": "Ctrl + Shift + J"}}, "_execute_page_action": {"suggested_key": {"default": "Ctrl + Shift + E", "windows ":" Alt + Shift + P "," mac ":" Alt + Shift + P "}}},…}

Dans votre page d'arrière-plan, vous pouvez lier un contrôleur pour chacune des commandes définies dans le manifest.js (sauf pour '_execute_browser_action'O'_execute_page_action') passant par onCommand.addListener.

Par exemple:

 chrome.commands.onCommand.addListener (fonction (commande) {console.log ('Commande enfoncée :', commande);});

content_scripts : Ce sont des fichiers javascript qui sont exécutés dans le contexte de pages Web. En utilisant le modèle standard d'objet de document (DOM), ils peuvent lire les détails des pages Web des visites du navigateur ou y apporter des modifications.

 {"name": "Mon extension",… "content_scripts": [{"matches": ["http://www.google.com/*"], "css": ["mystyles.css"], " js " : [" jquery.js "," monscript.js "]}],…}

content_scripts : Afin de rendre nos extensions plus sécurisées et d'éviter d'éventuels problèmes de scripts intersites, le système d'extension Chrome a intégré le concept général de Politique de sécurité du contenu (CSP). Cela introduit des politiques très strictes qui rendront les extensions plus sécurisées par défaut. En général, CSP fonctionne comme un mécanisme de liste noire et blanche pour les ressources chargées ou exécutées par ses extensions.

 {…, "Content_security_policy": "script-src 'self' https://example.com; object-src 'self'"…}

Ce sont quelques-uns des attributs les plus importants. Pour notre pratique initiale, nous définirons notre fichier manifest.json comme suit :

 {"manifest_version": 2, "name": "Startup example", "description": "Cette extension affiche une image de google images de la page actuelle", "version": "1.0", "browser_action": {" default_icon ":" icon.png.webp "," default_popup ":" popup.html "}," permissions " : [" activeTab "," https://www.googleapis.com/ "]}

Comme vous pouvez le voir dans notre exemple de manifeste, nous avons déclaré un browser_action, l'autorisation activeTab pour voir l'URL de l'onglet actuel, et l'hôte a reçu l'autorisation, de cette manière, l'API Google est accessible pour effectuer la recherche d'images externes.

À leur tour, 2 fichiers de ressources sont trouvés lors de la définition de browser_action : icon.png.webp et popup.html. Les deux ressources doivent exister dans le pack d'extension, créons-les maintenant :

icon.png.webp Il sera affiché à côté de la boîte multifonction, en attendant l'interaction de l'utilisateur. C'est juste un fichier PNG de 19px x 19px.

popup.html s'affichera dans la fenêtre contextuelle créée en réponse au clic de l'utilisateur sur l'icône. Il s'agit d'un fichier HTML standard et son contenu est le suivant :

Popup de l'extension de démarrage

AGRANDIR

2. Assurez-vous que la case à cocher du mode développeur dans le coin supérieur droit est cochée.

3. Cliquez sur Upload Unzipped (Unpacked) Extension pour afficher une boîte de dialogue de sélection de fichier.

AGRANDIR

4. Accédez au répertoire où se trouvent vos fichiers d'extension et sélectionnez-le.

Vous pouvez également faire glisser le répertoire qui contient votre projet et le déposer dans la fenêtre des extensions Chrome. Cela chargera l'extension dans votre navigateur.

De cette façon, nous aurons fait une simple extension pour google Chrome. Dans notre prochain article, nous aborderons la construction d'extensions en conjonction avec des frameworks de développement tels que jquery et Bootstrap, ce qui nous permettra de rationaliser notre développement.

2. Exemple d'extensions pour Chrome

Dans cette section, nous allons réaliser plusieurs exemples qui nous permettront de bien comprendre la plupart des fonctionnalités qui existent lors de la création d'une extension pour Google Chrome.

Exercice 1 - Fond bleu
Dans cet exemple, nous allons créer une extension simple où nous apprendrons comment modifier le contenu des pages que nous chargeons dans notre navigateur. Dans ce cas, nous allons modifier la couleur de fond de la page chargée et la changer en bleu.

Comme je l'ai expliqué dans la première partie de ce tutoriel, vous pouvez utiliser n'importe quel IDE de développement, dans mon cas, j'utiliserai Chrome Dev Editor.

AGRANDIR

Pour commencer, nous allons créer un nouveau répertoire avec le nom Fond bleu et nous allons créer un projet du même nom.

AGRANDIR

A l'intérieur, nous allons créer notre premier fichier manifest.json qui contiendra les définitions de notre extension.

AGRANDIR

Nos archives manifest.json doit contenir le code suivant :

 {"manifest_version": 2, "name": "Blue Background", "description": "Cette extension a changé la couleur de fond de la page actuelle", "version": "1.0", "browser_action": {"default_icon" : "icon.png.webp", "default_title": "Rendre cette page bleue"}, "permissions": ["activeTab"], "background": {"scripts": ["background.js"], "persistent": false }}

Parce que notre extension est simple, elle ne contiendra qu'une icône qui, lorsqu'elle est enfoncée, exécutera une action. Comme vous pouvez le voir dans le fichier manifest.json on définit un nom et sa description, dans le action_du_navigateur Nous définissons l'icône qui s'affichera dans la barre de notre navigateur Google Chrome et un titre qui s'affichera lorsque le pointeur de la souris sera positionné sur ladite icône. Concernant les permissions nous définirons que cela se fera uniquement dans l'onglet actif. Le fichier qui s'exécutera en arrière-plan sera notre fichier background.js qui ne sera pas persistante, puisqu'elle ne sera exécutée que lorsque l'on cliquera sur l'extension.

Nous créons notre icône et l'enregistrons dans le répertoire du projet tel que défini dans manifest.json. Dans ce cas à la racine du projet.

Ensuite, nous créons un fichier JavaScript appelé background.js dans le même répertoire avec le code suivant :

 // appelé lorsque l'utilisateur clique sur l'extension chrome.browserAction.onClicked.addListener (function (tab) {console.log ('Changing' + tab.url + 'to blue!'); chrome.tabs.executeScript ({ code: ' document.body.style.backgroundColor = "blue"'});});

Laissant l'ensemble du projet comme suit :

AGRANDIR

Pour exécuter notre extension, il vous suffit d'appuyer sur le bouton de lecture situé dans la barre supérieure de Chrome Dev Editor.

AGRANDIR

En appuyant dessus, l'extension sera chargée automatiquement dans le navigateur Google Chrome.

Voyons notre extension en action, en cliquant sur l'icône que j'ai faite (fond bleu avec la lettre A en blanc), la page que j'ai chargée dans l'onglet en cours, en l'occurrence mon compte utilisateur dans Solvetic (http: // www .solvetic… .berth-ramncgev /) changera son arrière-plan en bleu. Il est à noter que seule la couleur de l'élément BODY changera, et non les DIV qu'il contient, puisque c'est ainsi que je l'ai défini dans mon background.js.

AGRANDIR

Pratique 2 - MultipleColor
Pour cet exemple, je vais montrer comment rationaliser notre travail à partir de l'IDE de développement et du code. Dans le Éditeur de développement Chrome, nous cliquons sur le bouton +, pour créer un nouveau projet, cette fois nous allons changer le type de projet, en sélectionnant l'option Application JavaScript pour Chrome.

AGRANDIR

Comme vous pouvez le voir, il génère automatiquement toute la structure de notre projet. Avec notre fichier manifest.json avec les définitions les plus courantes.

AGRANDIR

À ce fichier, nous ajouterons une brève description sur l'étiquette la description plaçant le texte que vous voulez, dans mon cas "Extension qui permet de changer la couleur de fond". Pour ce projet nous allons créer 2 icônes, l'une de 16x16 pixels et l'autre de 128x128 pixels, comme vous pouvez le voir dans la structure, celles-ci seront enregistrées dans le répertoire les atouts.

Nous allons ajouter le code suivant sous la balise minimum_chrome_version:

 "permissions": ["tabs", "http: // * / *", "https: // * / *"], "browser_action": {"default_title": "Changer la page en plusieurs couleurs.", " default_popup ":" popup.html "},

Comme vous pouvez le voir, nous définissons un popup ou une vue qui contiendra tout le html que l'utilisateur verra en cliquant sur notre extension. Ensuite, nous ajouterons le code suivant :

 "content_scripts": [{"matches": [""], "css": ["assets / bootstrap / css / bootstrap.min.css"], "js": ["assets / jquery.min.js", "main.js"], "run_at": "document_start"}]

content_scripts- Contient les fichiers JavaScript (js) et de feuille de style (css) qui seront exécutés dans le contexte de la page Web. Il peut contenir les propriétés suivantes :

allumettes: Obligatoire. Spécifique à quelle page le script sera injecté.

exclure_correspondances: Optionnel. Pages qui seront exclues pour que le script ne soit pas injecté.

match_about_blank: Optionnel. Cette valeur est booléenne, et indique si le script sera inséré dans la page blanche (about : blank et about : srcdoc).

css: Optionnel. C'est un arrangement qui indique la liste des fichiers css qui seront insérés dans la page qui est demandée dans le navigateur.

js: Optionnel. C'est un arrangement avec la liste des fichiers JavaScript qui seront insérés dans la page qui est demandée dans le navigateur.

courir vers: Optionnel. C'est une chaîne de texte qui contrôle quand les fichiers js seront chargés. Sa valeur peut être :
document_start: Les fichiers sont injectés après n'importe quel fichier css, mais avant qu'un DOM ne soit construit ou que tout autre script soit exécuté.

document_fin: les fichiers sont injectés immédiatement après la fin du DOM, mais avant que les ressources telles que les images et les cadres ne soient chargées.

document_idle: Le navigateur choisit l'heure d'injection des scripts entre fin_document, et immédiatement après que window.onload déclenche l'événement.Cette option est celle qui est configurée par défaut.

A la fin de notre dossier manifest.json Il devrait être comme suit :

AGRANDIR

Comme vous pouvez le voir, nous avons ajouté quelques nouvelles choses, dans la propriété css Nous avons défini le framework Bootstrap qui ne facilitera pas le développement au niveau du style. Suivi sur la propriété js Nous définissons la bibliothèque JavaScript JQUERY, qui ne nous permettra pas de travailler de manière plus rapide et plus simple tout ce qui a à voir avec JavaScript. Notre fichier index.html devrait ressembler à ceci :

 Popup MultipleColorrougeBleuVertJaune

Dans le fichier index.html, nous faisons simplement les références à nos fichiers Bootstrap, Jquery et main.js. Dans le corps, nous définissons un conteneur d'amorçage avec ses divs qui serviront de boutons pour les différentes options de couleur.

Pour le fichier main.js nous utiliserons l'événement click qui sera exécuté en appuyant sur le bouton de la souris sur chaque classe "col-md-12", en prenant la couleur de fond de l'élément qui a été sélectionné et en l'affectant au corps du page a été ouverte. Ensuite, l'événement window.close() sera exécuté; qui ferme la fenêtre de notre extension. Le code défini pour main.js est le suivant :

 $ (document) .ready (function () {$ (". col-md-12"). click (function () {var color = $ (this) .css ("background-color"); chrome.tabs. executeScript (null, {code: "$ ('body'). css ('background-color', '" + color + "')"}); window.close ();});});

Le résultat lors de l'exécution de notre extension, nous pourrons visualiser l'icône que nous avons créée pour elle dans la barre supérieure.

En cliquant sur notre extension, la fenêtre contextuelle suivante s'affichera :

Et lors de la sélection de l'une des options, le résultat sera le suivant :

AGRANDIR

Pratique 3 - Top histoire
Dans cet exemple, nous appliquerons tout ce qui est vu ci-dessus, nous créerons une extension qui, lorsque nous cliquerons dessus, nous montrera une fenêtre contextuelle avec la liste des pages les plus visitées de notre navigateur, donnant un accès direct à ces pages. La seule différence dans cet exemple est que nous demanderons l'autorisation à l'une des API Chrome d'accéder aux pages les plus consultées depuis Chrome. Le nom de cette API est chrome.topSites.

Pour commencer nous allons Éditeur de développement Chrome et nous avons créé notre projet avec le nom HautHistorique et dans le type de projet, nous sélectionnons l'option JavaScript Chrome App.

Ensuite, notre fichier manifest.json Il devrait être comme suit :

 {"manifest_version": 2, "name": "TopHistorial", "short_name": "TopHistorial", "description": "Afficher la liste des pages les plus consultées dans notre navigateur", "version": "0.0.1", " minimum_chrome_version ":" 38 "," permissions ": [" topSites "]," browser_action ": {" default_icon ":" icon.png.webp "," default_popup ":" popup.html "}," content_scripts ": [{" correspond à " : [" "]," css " : [" assets / bootstrap / css / bootstrap.min.css "]," js ": [" assets / jquery.min.js "," main.js "], "run_at": "document_start"}]}

Comme vous pouvez le voir, nous ajoutons un nouvel attribut au manifeste pour pouvoir obtenir l'autorisation sur l'API Chrome : Déclarer les autorisations, est utilisé dans la plupart des API Chrome de votre extension, vous devez d'abord le déclarer en plaçant le champ autorisations dans votre manifeste. Chaque permission peut être une chaîne de texte appartenant à la liste suivante (divisée en 3 images) :

Concernant notre dossier popup.html Il devrait être comme suit :

 Popup MultipleColor

Nos archives main.js qui contiendra la requête api et la gestion de l'événement click, il sera représenté comme suit :

 $ (document) .ready (function () {function openpage () {chrome.tabs.create ({url: $ (this) .attr ("href")});} function buildPopupDom (mostVisitedURLs) {for (var i = 0; i <mostVisitedURLs.length; i ++) {$ ("# top_list"). Ajouter ('
'+ la plupart des URL visitées [i] .title +'
'); } $ (". links"). bind ("click", openpage); } chrome.topSites.get (buildPopupDom); });

Au niveau structurel, notre projet aurait dû être le suivant :

Lors de l'exécution de notre extension, nous pourrons voir une icône en haut du navigateur, qui dans mon cas la conçoit en bleu, en cliquant dessus, elle ouvre une fenêtre contextuelle avec la liste des pages auxquelles j'ai le plus accédé depuis mon navigateur classé par nombre de visites que j'ai effectuées.

AGRANDIR

Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif