Styles des navigateurs
Certains composants de l'interface utilisateur - les fenêtres contextuelles, fenêtres latérales, et les pages d'options du navigateur et de la page - sont spécifiés par votre extension de la même manière :
- créer un fichier HTML définissant la structure de l'élément d'interface utilisateur
- ajoutez une clé manifest.json (
browser_action
,page_action
,sidebar_action
, ouoptions_ui
) pointant vers ce fichier HTML.
L'un des défis de cette approche est de styliser l'élément de telle sorte qu'il s'intègre au style du navigateur.
Pour aider à cela, les clés manifest.json keys incluent une propriété optionnelle supplémentaire : browser_style
.
Si cela est inclus et défini sur true
, votre document obtiendra une ou plusieurs feuilles de style supplémentaires qui le rendront cohérent avec l'interface utilisateur du navigateur et avec d'autres extensions utilisant la propriété browser_style
.
Lorsque vous envisagez d'utiliser le browser_style: true
, vous devez tester votre extension avec différents thèmes (intégrés ou AMO) pour vous assurer que l'interface d'extension se comporte comme vous l'attendez..
Attention : Quand browser_style: true
est inclus dans le manifest de votre extension web, la sélection de texte dans l'interface utilisateur de votre extension est désactivée sauf dans les contrôles de saisie. Si cela pose un problème, incluez plutôt browser_style:false.
Note : Google Chrome et Opera utilisent chrome_style
au lieu de browser_style
, donc si vous souhaitez les prendre en charge, vous devez ajouter les deux clés.
Dans Firefox, la feuille de style peut être vue sur chrome://browser/content/extension.css
. La feuille de style peut être vue sur chrome://browser/content/extension-mac.css
est également incluse sur OS X.
La plupart des styles sont automatiquement appliqués, mais certains éléments nécessitent que vous ajoutiez la classe browser-style
non standard pour obtenir leur style, comme indiqué dans le tableau ci-dessous :
Element | Exemple |
---|---|
<button> |
html
|
html
|
|
<textarea> |
html
|
Parent d'un
<input>
|
html
|
Note : Voir le bug Firefox 1465256 pour la suppression de cette exigence inutile.
Compatibilité des navigateurs
webextensions.manifest.action
BCD tables only load in the browser
webextensions.manifest.browser_action
BCD tables only load in the browser
webextensions.manifest.page_action
BCD tables only load in the browser
webextensions.manifest.sidebar_action
BCD tables only load in the browser
webextensions.manifest.options_ui
BCD tables only load in the browser
Composants du panneau Firefox
Attention : Cette fonctionnalité est non standard et ne fonctionne que dans Firefox.
La feuille de style chrome://browser/content/extension.css
contient également les styles des composants du panneau Firefox.
L'ancien guide de style de Firefox documente l'utilisation appropriée.
Element | Exemple |
---|---|
Header |
html
|
Footer |
html
|
Tabs |
html
|
Form |
html
|
Menu |
html
|
Exemple
HTML
<header class="panel-section panel-section-header">
<div class="icon-section-header"><!-- An image goes here. --></div>
<div class="text-section-header">Header</div>
</header>
<div class="panel-section panel-section-list">
<div class="panel-list-item">
<div class="icon"></div>
<div class="text">List Item</div>
<div class="text-shortcut">Ctrl-L</div>
</div>
<div class="panel-list-item">
<div class="icon"></div>
<div class="text">List Item</div>
<div class="text-shortcut"></div>
</div>
<div class="panel-section-separator"></div>
<div class="panel-list-item disabled">
<div class="icon"></div>
<div class="text">Disabled List Item</div>
<div class="text-shortcut"></div>
</div>
<div class="panel-section-separator"></div>
<div class="panel-list-item">
<div class="icon"></div>
<div class="text">List Item</div>
<div class="text-shortcut"></div>
</div>
<div class="panel-list-item">
<div class="icon"></div>
<div class="text">List Item</div>
<div class="text-shortcut"></div>
</div>
</div>
<footer class="panel-section panel-section-footer">
<button class="panel-section-footer-button">Cancel</button>
<div class="panel-section-footer-separator"></div>
<button class="panel-section-footer-button default">Confirm</button>
</footer>
/* Example specific – not part of chrome://browser/content/extension.css */
body {
background: #fcfcfc;
background-clip: padding-box;
border: 1px solid rgba(24, 26, 27, 0.2);
box-shadow:
0 3px 5px rgba(24, 26, 27, 0.1),
0 0 7px rgba(24, 26, 27, 0.1);
box-sizing: content-box;
margin: 2em auto 0.5em;
width: 384px;
}
html {
min-height: 100vh;
}
html > body {
margin: auto;
}
.icon-section-header {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48Y2lyY2xlIGZpbGw9IiMzNjM5NTkiIGN4PSIxNSIgY3k9IjE1IiByPSIxNSIvPjwvc3ZnPg==");
}