wbc

webext-base-css

Extremely minimal stylesheet/setup for Web Extensions’ options pages (also dark mode)

Showing:

Popularity

Downloads/wk

1.3K

GitHub Stars

58

Maintenance

Last Commit

2d ago

Contributors

1

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

webext-base-css

Extremely minimal "native" stylesheet/setup for Web Extensions’ options pages (also dark mode)

Together with some stylesheets included by the browsers, extends and improves the the options_ui.chrome_style setting, including Firefox.

It's meant to look as native as possible, invisible. webext-base-css is what browsers should offer by default.

Look at the demo options.html for the suggested markup (it's basic and not really enforced.)

Demo: Chrome with light themeFirefox with dark theme
whiteblack

Install

Download the stylesheet manually or use npm:

npm install webext-base-css

Usage

<!-- The first one is included in Firefox. It doesn't hurt Chrome though, leave it there for both -->
<link rel="stylesheet" href="webext-base.css">
<link rel="stylesheet" href="your-own-stylesheet-if-necessary.css">

You'll also have to set chrome_style: true in your manifest.json:

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

💡 Tip: Also use webext-options-sync to manage and autosave your extension's options.

Usage with a bundler

Depending on how your bundler is configured, you might be able to use one of these to import the module directly from node_modules. If you have issues or have a better solution, please send a PR or open an issue.

<!-- From options.html -->
<link rel="stylesheet" href="../node_modules/webext-base-css/webext-base.css">
// From options.js
import 'webext-base-css';
/* From options.css or .scss */
@import 'webext-base-css';
@import '~webext-base-css';
@import '~webext-base-css/webext-base.css';
@use 'webext-base-css';

Full example

Here's a minimal but full options.html example page:

<!doctype html>
<meta charset="utf-8">
<title>Options</title>
<link rel="stylesheet" href="webext-base.css">
<link rel="stylesheet" href="options.css">
<form>
    <p>
        <label for="name">Name</label><br>
        <input type="text" id="name" name="name" spellcheck="false" autocomplete="off" required/>
    </p>
    <p>
        <label>
            <input type="checkbox" name="logging">
            Show the features enabled on each page in the console
        </label>
    </p>
</form>
<script src="options.js"></script>

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100