Browser styles

翻译不完整。 请帮助我们翻译这篇文章!

扩展程序包含的某些UI组件,例如: popups, sidebarsoptions pages ,实际上可以用如下方式统一定义:

  1. 创建一个HTML文件用于描述该UI组件的页面结构
  2. 在manifest.json中添加字段 (browser_action, page_action, sidebar_action, 或 options_ui) 以指向其对应的页面

这种方式面临的一个挑战是如何使用浏览器自带的样式,以使得组件的UI表现与浏览器的UI风格相符。要解决这个问题,可以在该字段的配置中增加一个可字段 browser_sytle ,如果设置了这个字段并且值为 true ,  那么该UI组件的HTML将会被插入一个或多个样式表,样式表会使你的扩展程序的UI表现与浏览器的风格一致 (并且与其它同样应用了这个字段的扩展程序一致)。

若使用了 browser_style: true , 你需要在不同的浏览器主题中测试你的扩展程序,以确保其UI表现和期望的一致。 

谷歌浏览器Google Chrome 和 欧朋浏览器 Opera 使用字段名 chrome_style 而非browser_style, 因此如果要适配它们,你需要同时添加这两个字段。

在火狐浏览器中,这个样式文件可以在 chrome://browser/content/extension.css查看。为Mac OS X系统额外准备的样式文件也可以在  chrome://browser/content/extension-mac.css 查看。

大多数样式是自动应用的,但是某些元素需要添加非标准的类名 browser-style 来获得其样式,如下表所示:

Element Example
<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>

查看 bug 1465256 以了解相关修订

浏览器兼容性

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

火狐面板组件Firefox Panel Components

非标准
此功能不是通用标准,仅支持在firefox中使用

chrome://browser/content/extension.css 样式文件中也包含了火狐面板组件的样式

legacy Firefox Style Guide 使用示例

Element Example
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>

Example

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>

Result(若查看失败,请切回英文版查看)