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  :

  1. créer un fichier HTML définissant la structure de l'élément d'interface utilisateur
  2. ajoutez une clé manifest.json (browser_action, page_action, sidebar_action, ou options_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.

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 depuis Firefox 55, acomme indiqué dans le tableau ci-dessous :

Element Exemple
<button>
<button class="browser-style">Click me</button> 

<select>

<select class="browser-style" name="select">
  <option value="value1">Value 1</option>
  <option value="value2" selected>Value 2</option>
  <option value="value3">Value 3</option>
</select>
<textarea>
<textarea class="browser-style">Write here</textarea>
Parent of an <input>
<div class="browser-style">
  <input type="radio" id="op1" name="choices" value="op1">
  <label for="op1">Option 1</label>

  <input type="radio" id="op2" name="choices" value="op2">
  <label for="op2">Option 2</label>
</div>

Compatibilité du navigateur

No compatibility data found. Please contribute data for "webextensions.browser_style" (depth: 1) to the MDN compatibility data repository.

Composants du panneau Firefox

Non-Standard
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
<header class="panel-section panel-section-header">
  <div class="icon-section-header"><img src="image.svg"/></div>
  <div class="text-section-header">Header</div>
</header>
Footer
<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>
Tabs
<div class="panel-section panel-section-tabs">
  <button class="panel-section-tabs-button selected">Tab</button>
  <div class="panel-section-tabs-separator"></div>
  <button class="panel-section-tabs-button">Tab</button>
  <div class="panel-section-tabs-separator"></div>
  <button class="panel-section-tabs-button">Tab</button>
</div>
Form
<div class="panel-section panel-section-formElements">
  <div class="panel-formElements-item">
    <label for="name01">Label:</label>
    <input type="text" value="Name" id="name01" />
  </div>
  <div class="panel-formElements-item">
    <label for="picker01">Label:</label>
    <select id="picker01">
      <option value="value1" selected="true">Dropdown</option>
      <option value="value2">List Item</option>
      <option value="value3">List Item</option>
    </select>
  </div>
  <div class="panel-formElements-item">
    <label for="placeholder01">Label:</label>
    <input type="text" placeholder="Placeholder" id="placeholder01" />
    <button name="expander" class="expander"></button>
  </div>
</div>
Menu
<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>

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>

Resultat

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : hellosct1
Dernière mise à jour par : hellosct1,