Connaissances de base
1. Structure de fichiers plug-in
1.1. manifeste.json
Chaque extension, Installable WebApp et Skin possède un fichier manifeste de format JSON qui stocke des informations importantes liées au plug-in.
Un exemple de configuration de base:
{"Name": "Browser Action Demo", "Version": "1.0", "Permissions": ["Tabs", "http: // * / *", "https: // * / *"], "Browser_Action": {"default_title": "Switch Light", "Default_icon": "icon.png", "Dautfre_popup": "popup.html"}, "fond": {"page": "background.html"}, "manifest_version": 2}1.2. surgir
La fenêtre contextuelle du plug-in, le default_popup dans Browser_Action dans la configuration ci-dessus est cette page.
1.3. Page d'arrière-plan
La plupart des applications incluent une page d'arrière-plan pour effectuer les fonctions principales de l'application.
1.4. Scripts de contenu
Le script de contenu peut permettre l'interaction entre l'application et la page Web, qui fait référence aux scripts JavaScript qui peuvent s'exécuter à l'intérieur des pages qui ont été chargées par le navigateur. Vous pouvez considérer le script de contenu comme faisant partie d'une page Web, ne faisant pas partie de l'application dans laquelle il se trouve.
2. Interaction entre les fichiers
La fonction dans la page d'arrière-plan peut être appelée directement dans la fenêtre contextuelle.
Le script de contenu peut lire et modifier l'arborescence DOM de la page Web actuelle, mais elle ne peut pas modifier l'arborescence DOM de la page d'arrière-plan (arrière-plan) de l'application qu'il est situé.
Interaction entre le script de contenu et l'application: vous pouvez vous envoyer des messages
3. Injecter le fichier JS (contenu scripts) dans la page Web:
Méthode 1: Configurer dans le fichier manifeste.json:
"content_scripts": [{"correspond": ["http://www.google.com/*"], "css": ["mystyles.css"], "js": ["jQuery.js", "myscript.js"]}],Méthode 2, via ExecuteScript ():
Injectez des scripts JavaScript dans la page à exécuter.
chrome.tabs.ExECUtesScript (Integer Tabid, Détails de l'objet, rappel de fonction) chrome.tabs.ExECUtesScript (Tabid, {fichier: "func.js", allFrames: true});Apparence d'interface utilisateur
1. Action du navigateur:
Ajoutez une icône à droite de la barre d'adresse de la barre d'outils Chrome principale.
Remarque: les applications emballées ne peuvent pas utiliser les actions du navigateur
1.1. Configuration dans manifeste.json
Enregistrer l'action du navigateur:
{"Name": "My Extension", ... "Browser_Action": {"Default_Icon": "Images / icon19.png", // Facultatif "Default_Title": "Google Mail", // Facultatif; affiché dans ToolTip "Default_popup": "popup.html" // facultatif}, ...}1.2. Description de l'élément de configuration
(1) Default_icon
Icône 19 * 19px
Modifiez le champ default_icon dans le manifeste de Browser_Action, ou appelez la méthode seticon ().
chrome.browseraction.seticon (détails de l'objet)
Définissez l'icône d'action du navigateur. L'icône peut être un chemin vers une image ou des informations sur les pixels extraites d'un élément de toile. Qu'il s'agisse du chemin d'icône ou de l'imagedata de Canvas, cette propriété doit être spécifiée.
(2) Default_title
Modifiez le champ default_title dans le manifeste Browser_Action, ou appelez la méthode Settitle (). Vous pouvez spécifier une chaîne localisée pour le champ default_title; Cliquez sur l'internationalisation pour voir les détails.
chrome.browseraction.settitle (détails de l'objet)
Définissez le titre de l'action du navigateur, cela sera affiché dans l'influence.
(3) badge
Les actions du navigateur peuvent éventuellement afficher un badge - affichez du texte sur l'icône. Les badges peuvent simplement mettre à jour certaines informations sur l'invite de petite extension pour l'action du navigateur.
Étant donné que l'espace de badge est limité, il ne prend en charge que moins de 4 caractères.
Pour définir le texte et la couleur du badge, vous pouvez utiliser SetBadgetExt () et SetBadgeBackgroundColor () respectivement.
chrome.browseraction.setBadgetExt (détails de l'objet)
Définissez le texte du badge de l'action du navigateur et le badge s'affiche sur l'icône.
SetBadgeBackgroundColorChrome.Browseraction.SetBadgeBackgroundColor (Détails de l'objet)
Réglez la couleur d'arrière-plan du badge.
(4) Default_popup
Conseils de bulles popup
Modifiez le champ default_popup dans le manifeste de Browser_Action pour spécifier le fichier html, ou appelez la méthode setpopup ().
chrome.browseraction.setpopup (détails de l'objet)
Définit un HTML affiché dans une fenêtre contextuelle lorsque vous cliquez sur les actions du navigateur.
1.3. Conseils
Pour le meilleur affichage, suivez les principes suivants:
Confirmez que les actions du navigateur ne sont utilisées que dans des scénarios où la plupart des sites Web ont des exigences fonctionnelles.
Confirmez que les actions du navigateur ne sont pas utilisées dans quelques pages Web qui ont des fonctions. Veuillez utiliser des actions de page pour ce scénario.
Assurez-vous que la taille de votre icône devrait occuper jusqu'à 19x19 pixels. L'icône de l'action du navigateur devrait sembler plus grande et plus lourde que l'icône de l'action de la page.
N'essayez pas d'imiter les icônes de clé de Google Chrome, leurs performances peuvent être problématiques dans différents thèmes, et l'extension devrait être plus accrocheuse.
Essayez d'utiliser le canal alpha et lissez les bords de vos icônes, car de nombreux utilisateurs utilisent des thèmes, vos icônes devraient bien fonctionner dans divers arrière-plans.
Ne continuez pas à clignoter votre icône, c'est très offensant.
2. Menu avec le bouton droit
Vous pouvez choisir d'ajouter un élément de menu avec le bouton droit pour différents types d'objets (tels que des images, des liens, des pages).
Vous pouvez ajouter plusieurs éléments de menu à clic droit au besoin. Les éléments de menu à clic droit multiples ajoutés dans une extension seront automatiquement combinés par Chrome et placés dans le menu secondaire du nom d'extension correspondant.
Le menu de clic droit peut apparaître dans n'importe quel document (ou cadres du document) ou même dans un fichier local (tel que fichier: // ou chrome: //). Si vous souhaitez contrôler l'affichage du menu avec le bouton droit dans différents documents, vous pouvez spécifier DocurUrlPatterns lorsque vous appelez Create () et Update ().
2.1. Configuration dans manifeste.json
Déclarez l'autorisation "ContentMenus" dans le manifeste. Dans le même temps, vous devez spécifier une icône 16x16 à utiliser comme logo de menu avec le bouton droit. Par exemple:
{"Name": "My Extension", ... "Permissions": ["ContextMenus"], "Icons": {"16": "icon-bitty.png", "48": "icon-small.png", "128": "icon-Large.png"}, ...} "3. Notifications de bureau
Informer l'utilisateur que quelque chose d'important s'est produit. Les notifications de bureau seront affichées à l'extérieur de la fenêtre du navigateur. L'image ci-dessous montre l'effet des notifications. Sur différentes plates-formes, l'effet d'affichage des notifications sera légèrement différent.
Utilisez directement un petit morceau de code JavaScript pour créer des notifications, et bien sûr, cela peut également être fait via une page HTML distincte dans le package d'extension.
3.1. Configuration dans manifeste.json
{"Name": "My Extension", ... "Autorisations": ["Notifications"], ...}3.2. Interagir avec la page étendue:
Utilisez GetBackgroundPage () et GetViews () pour créer des interactions dans les notifications et les pages d'extension
// Appelez la méthode de la page étendue dans la notification ... chrome.extension.getbackgroundpage (). Dothing (); // Appelez la méthode de notification à partir de la page d'extension ... chrome.extension.getViews ({type: "notification"}). ForEach (function (win) {win.dootherthing ();});4. Omnibox
L'interface d'application Omnibox vous permet d'enregistrer un mot-clé avec la barre d'adresse de Google Chrome, qui est également appelé Omnibox.
Le champ de mots clés Omnibox doit être inclus dans le manifeste. Une icône avec des pixels de 16x16 doit être spécifiée afin qu'elle soit affichée dans la barre d'adresse lorsque l'utilisateur entre un mot-clé.
4.1. Configuration dans manifeste.json
{"name": "Extension omnibox d'Aaron", "version": "1.0", "omnibox": {"Mot-clé": "aaron"}, "icons": {"16": "16-full-color.png"}, "background_page": "background.html"}}Chrome crée automatiquement des icônes avec 16x16 pixels en mode gris. Vous devez fournir une version en couleur de l'icône afin qu'elle puisse être utilisée dans d'autres scénarios.
5. Page d'options
Pour que les utilisateurs puissent configurer vos extensions, vous devrez peut-être fournir une page d'option. Si vous fournissez une page d'option, un lien sera fourni sur la page de gestion d'extension Chrome: // Extensions. Cliquez sur le lien Options pour ouvrir votre page d'options.
5.1. Configuration dans manifeste.json
{"Name": "My Extension", ... "Options_Page": "Options.html", ...}6. Écraser des pages spécifiques
À l'aide de pages alternatives, vous pouvez remplacer certaines pages spécifiques dans Chrome par défaut et utiliser des pages fournies par l'extension à la place.
6.1. Configuration dans manifeste.json
{"name": "mon extension", ... "chrome_url_overrides": {"pagetooverride": "mypage.html"}, ...}7. Actions de la page
Utilisez des actions de page pour placer l'icône dans la barre d'adresse.
Si vous voulez que l'icône d'extension soit toujours visible, utilisez l'action du navigateur.
Les applications emballées ne peuvent pas utiliser les actions de page.
7.1. Configuration dans manifeste.json
{"name": "mon extension", ... "page_action": {"default_icon": "icons / foo.png", // facultatif "default_title": "faire l'action", // facultatif; affiché dans ToolTip "Default_popup": "popup.html" // facultatif}, ...}7.2. Description de l'élément de configuration
Comme les actions du navigateur, les actions de page peuvent avoir des icônes, des messages rapides et des fenêtres contextuelles. Mais il n'y a pas de badge
Utilisez les méthodes show () et masquer () pour afficher et masquer les actions de la page. Par défaut, l'action de la page est masquée. Lorsque vous souhaitez afficher, vous devez spécifier la page onglet où se trouve l'icône. L'icône restera visible jusqu'à la fermeture de la page d'onglet ou commence à afficher une URL différente (telle que: l'utilisateur clique sur une connexion)
7.3. Conseils
Utilisez l'action de la page uniquement pour quelques pages;
Ne l'utilisez pas pour la plupart des pages, utilisez des actions du navigateur à la place si la fonctionnalité l'exige.
Ne laissez pas toujours les icônes apparaître dans les animations quand ça va, ce sera très ennuyeux.
8. Sujet
Le thème est une extension spéciale qui peut être utilisée pour modifier l'apparence de l'ensemble du navigateur. Le thème est similaire à l'extension standard, mais le thème ne peut pas contenir le code JavaScript ou HTML.
8.1. Configuration dans manifeste.json
{"version": "2.6", "nom": "thème camo", "thème": {"images": {"thème_frame": "images / thème_frame_camo.png", "thème_frame_overlay": "images / thème_frame_stripe.png", "theme_toolbar": "images / thème_toolbar_camo.png", "," images / thème_toolbar_camo.png " "thème_ntp_background": "images / thème_ntp_background_norepeat.png", "thème_ntp_attribution": "images / attribution.png"}, "couleurs": {"frame": [71, "ntp_text" [36, 70, 0], "NTP_SECTION": [207, 221, 192], "Button_background": [255, 255, 255]}, "Tints": {"Buttons": [0.33, 0.5, 0.47]}, "Properties": {"NTP_BACKground_alignment": "Bottom"}}}