在 Firefox (v57) 的插件中使用 browser_style

Question

在此处遵循 MDN 文档：https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/options_ui

我设置了以下 manifest.json:

{
    ...
    "options_ui": {
        "page": "options.html",
        "browser_style": true
    }
    ...
}

连同包含此 HTML 的 options.html：

<div class="switch">
    <input checked id="switch1" type="checkbox" class="visually-hidden">
    <label for="switch1"></label>
</div>

我希望我的 HTML 装饰有类似于 Firefox 风格指南的风格：http://design.firefox.com/StyleGuide/#/userselections

但是有none。似乎没有加载额外的 CSS 文件。

有一个类似的问题，但问题是要求提供样式文档。我所发现的只是这些样式根本没有应用。

有谁知道我的设置是否正确？不知道是不是bug

Answer 1

样式已正确应用，您可能只是使用了错误的 classes。请注意 old style guide is now deprecated in favor of the new Photon Design System.

这些是使用过的样式表，只需在 Firefox 中访问这些 URL 即可查看完整源代码：

在 Windows 上：chrome://browser/content/extension.css
在 Mac 上：chrome://browser/content/extension-mac.css

大多数样式假定您使用 browser-style class。例如，下面是 button 元素（在 Windows 上）的一些样式：

/* stylelint-disable property-no-vendor-prefix */
/* Buttons */
button.browser-style,
select.browser-style {
  background-color: #fbfbfb;
  border: 1px solid #b1b1b1;
  box-shadow: 0 0 0 0 transparent;
  font: caption;
  height: 24px;
  outline: 0 !important;
  padding: 0 8px 0;
  transition-duration: 250ms;
  transition-property: box-shadow, border;
}

让我们验证一下样式是否实际应用。
示例，给定具有以下 manifest.json:

的扩展名

{
  "name": "Options page",
  "manifest_version": 2,
  "version": "0.0.1",
  "description": "Sample options page",
  "options_ui": {
      "page": "options.html",
      "browser_style": true
  }
}

以及以下options.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div>Just a text example page</div>
    <div>
         <input checked id="switch1" type="checkbox" class="visually-hidden">
        <label for="switch1"></label>
        <button class="browser-style">Test button</button>
    </div>
  </body>
</html>

这是呈现的选项页面：

检查选项页面以验证应用的样式：

将about:debugging粘贴到地址栏
Select "Enable add-on debugging" 在上面
点击调试link
当提示允许传入连接时单击 "Ok"

现在切换回选项页面并检查我们添加的"Test button"

如您所见，按钮的样式已使用浏览器样式表正确设置。

在 Firefox (v57) 的插件中使用 browser_style

Using browser_style in addon on Firefox (v57)

firefox

firefox-addon

firefox-addon-webextensions