Gathering detailed insights and metrics for webext-base-css
Gathering detailed insights and metrics for webext-base-css
Extremely minimal stylesheet/setup for Web Extensions’ options pages (also dark mode)
Installations
npm install webext-base-cssDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
23.1.0
NPM Version
10.9.0
Score
72.3
Supply Chain
99.4
Quality
78.2
Maintenance
100
Vulnerability
100
License
Releases
15
Languages
3
CSS
HTML
JavaScript
CSS (54.65%)
HTML (41.01%)
JavaScript (4.34%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
87 Stars
49 Commits
1 Forks
2 Watchers
1 Branches
2 Contributors
Updated on Feb 08, 2025
Sponsor this package
Maintainers
1
Package Meta Information
Latest Version
2.1.0
Package Id
webext-base-css@2.1.0
Unpacked Size
8.12 kB
Size
3.80 kB
File Count
4
NPM Version
10.9.0
Node Version
23.1.0
Published on
Dec 15, 2024
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
2
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:
1npm install webext-base-css
Usage
1<link rel="stylesheet" href="webext-base.css"> 2<link rel="stylesheet" href="your-own-stylesheet-if-necessary.css">
And in your manifest.json:
1{ 2 "options_ui": { 3 "page": "options.html", 4 } 5}
💡 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.
1<!-- From options.html --> 2<link rel="stylesheet" href="./node_modules/webext-base-css/webext-base.css">
1// From options.js 2import 'webext-base-css';
1/* From options.css or .scss */ 2/* Pick one, it depends on your bundler/config */ 3@import 'webext-base-css'; 4@import '~webext-base-css'; 5@import '~webext-base-css/webext-base.css'; 6@import 'npm:webext-base-css'; /* Parcel */ 7@use 'webext-base-css';
Full example
Here's a minimal but full options.html example page:
1<!doctype html> 2<meta charset="utf-8"> 3<title>Options</title> 4<link rel="stylesheet" href="webext-base.css"> 5<link rel="stylesheet" href="options.css"> 6<form> 7 <p> 8 <label for="name">Name</label><br> 9 <input type="text" id="name" name="name" spellcheck="false" autocomplete="off" required/> 10 </p> 11 <p> 12 <label> 13 <input type="checkbox" name="logging"> 14 Show the features enabled on each page in the console 15 </label> 16 </p> 17</form> 18<script src="options.js"></script>
Extras
There are some extra classes you can use:
.text-monospaceideal for for<input>and<textarea>to have a monospace fontwebext-base-css-modalcan be applied to HTML if you have a small options page but don't want to useoptions_ui. See the what it looks like.
Tips
- Use the
<input size="10">to define the width ofinputfields, or else they're now set to100%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 inwebext-base-cssv1.
Related
- webext-options-sync - Helps you manage and autosave your extension's options
- webext-storage-cache - Map-like promised cache storage with expiration. Chrome and Firefox
- Awesome-WebExtensions - A curated list of awesome resources for WebExtensions development.
- More…
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
license file detected
Details
- Info: project has a license file: license:0
- Info: FSF or OSI recognized license: MIT License: license:0
Reason
Found 2/30 approved changesets -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/ci.yml:1
- Info: no jobLevel write permissions found
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/fregante/webext-base-css/ci.yml/main?enable=pin
- Warn: npmCommand not pinned by hash: .github/workflows/ci.yml:13
- Info: 0 out of 1 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 1 npmCommand dependencies pinned
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'main'
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 6 are checked with a SAST tool
Score
3.4
/10
Last Scanned on 2025-07-14
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More