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

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

有一个类似的问题here，但问题是要求提供样式的文档。我发现所有的风格都没有被应用。

有没有人知道我是否正确设置了此设置？我无法判断它是否是一个错误。

Answer 1

样式已正确应用，您可能只是使用了错误的类。请注意，old style guide现已弃用，以支持新的Photon Design System。

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

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

大多数样式都假设您使用browser-style类。例如，以下是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粘贴到地址栏
在顶部
单击Debug链接
提示允许传入连接时单击“确定”

现在切换回选项页面并检查我们添加的“测试按钮”

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

在Firefox上使用addon中的browser_style（v57）

1 个答案: