遵循 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但问题是要求提供样式文档。我发现这些样式根本没有应用。
有谁知道我的设置是否正确？我无法判断这是否是一个错误。
最佳答案
样式已正确应用，您可能只是使用了错误的类。 请注意 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粘贴到地址栏 - 选择顶部的“启用附加调试”
- 点击“调试”链接
- 当提示允许传入连接时，点击“确定”
现在切换回“选项”页面并检查我们添加的“测试按钮”
如您所见，该按钮的样式已使用浏览器样式表正确设置。
关于firefox - 在 Firefox (v57) 上的插件中使用 browser_style，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47400618/