webext-base-css

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

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 theme	Firefox with dark theme

Install

Download the stylesheet manually or use npm:

npm install webext-base-css

Usage

And in your manifest.json:

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

💡 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.js
import 'webext-base-css';

/* From options.css or .scss */
/* Pick one, it depends on your bundler/config */
@import 'webext-base-css';
@import '~webext-base-css';
@import '~webext-base-css/webext-base.css';
@import 'npm:webext-base-css'; /* Parcel */
@use 'webext-base-css';

Full example

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

<title>Options</title>


<form>
	<p>
		<label for="name">Name</label><br>
		<input required="" autocomplete="off" spellcheck="false" type="text">
	</p>
	<p>
		<label>
			<input name="logging" type="checkbox">
			Show the features enabled on each page in the console
		</label>
	</p>
</form>

Extras

There are some extra classes you can use:

• .text-monospace ideal for for <input> and <textarea> to have a monospace font

Tips

• Use the <input size="10"> to define the width of input fields, or else they're now set to 100% by default.
• Use <link rel="stylesheet" href="chrome://global/skin/in-content/common.css"> if you want to use Firefox's native style, but this means you'll have to handle the inconsistencies between web browsers. This used to be included in <code>webext-base-css</code> v1.

Related

• webext-storage-cache - Map-like promised cache storage with expiration. Chrome and Firefox
• webext-dynamic-content-scripts - Automatically registers your content_scripts on domains added via permission.request
• Awesome-WebExtensions - A curated list of awesome resources for WebExtensions development.
• More…