Menu
Following the MDN documentation here: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/options_ui
I have setup the following manifest.json:
{
...
"options_ui": {
"page": "options.html",
"browser_style": true
}
...
}
Along with an options.html which contains this HTML:
<div class="switch">
<input checked id="switch1" type="checkbox" class="visually-hidden">
<label for="switch1"></label>
</div>
I expected my HTML to be decorated with styles similar to the Firefox style guide: http://design.firefox.com/StyleGuide/#/userselections
But there are none. No extra CSS file appears to be loaded.
There is a similar question here but the question is asking for documentation for styles. All I have found is that the styles simply aren't applied.
Does anyone know if I have this setup correctly? I can't tell if it's a bug.
471
Styles are correctly applied, you are probably just using the wrong classes. Note that the old style guide is now deprecated in favor of the new Photon Design System.
These are the used stylesheets, just go to these URLs in Firefox to see the full source:
Most of the styles assume you use the browser-style class. For example, here are some of the styles for the button element (on 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;
}
Let's verify if the styles are actually applied.
Example, given an extension with the following manifest.json:
{
"name": "Options page",
"manifest_version": 2,
"version": "0.0.1",
"description": "Sample options page",
"options_ui": {
"page": "options.html",
"browser_style": true
}
}
And the following 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>
This is the rendered options page:
Inspect the options page to verify the applied styles:
about:debugging into the address bar
Now switch back to the Options page and inspect the "Test button" we added
As you can see, the button is correctly styled with the browser stylesheet.
181
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
