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
Report problems with this compatibility data on GitHubdesktop | mobile | ||||||
---|---|---|---|---|---|---|---|
action | |||||||
browser_style | |||||||
default_area | |||||||
default_icon | |||||||
default_popup | |||||||
default_title | |||||||
theme_icons |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- See implementation notes.
- Has more compatibility info.
webextensions.manifest.browser_action
Report problems with this compatibility data on GitHubdesktop | mobile | ||||||
---|---|---|---|---|---|---|---|
browser_action | |||||||
browser_style | |||||||
default_area | |||||||
default_icon | |||||||
default_popup | |||||||
default_title | |||||||
theme_icons |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- See implementation notes.
- Has more compatibility info.
webextensions.manifest.page_action
Report problems with this compatibility data on GitHubdesktop | mobile | ||||||
---|---|---|---|---|---|---|---|
page_action | |||||||
browser_style | |||||||
default_icon | |||||||
default_popup | |||||||
default_title | |||||||
hide_matches | |||||||
pinned | |||||||
show_matches |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- See implementation notes.
- Has more compatibility info.
webextensions.manifest.sidebar_action
Report problems with this compatibility data on GitHubdesktop | mobile | ||||||
---|---|---|---|---|---|---|---|
sidebar_action | |||||||
browser_style | |||||||
default_icon | |||||||
default_panel | |||||||
default_title | |||||||
open_at_install |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- See implementation notes.
webextensions.manifest.options_ui
Report problems with this compatibility data on GitHubdesktop | mobile | ||||||
---|---|---|---|---|---|---|---|
options_ui | |||||||
browser_style | |||||||
open_in_tab | |||||||
page |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- See implementation notes.
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==");
}