Gathering detailed insights and metrics for webext-base-css
Installations
npm install webext-base-cssDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
23.1.0
NPM Version
10.9.0
Score
71
Supply Chain
98.7
Quality
80.7
Maintenance
100
Vulnerability
100
License
Releases
15
Contributors
2
Unable to fetch Contributors
Languages
3
CSS
HTML
JavaScript
CSS (54.65%)
HTML (41.01%)
JavaScript (4.34%)
Developer
Download Statistics
Total Downloads
312,477
Last Day
93
Last Week
643
Last Month
3,174
Last Year
26,991
GitHub Statistics
86 Stars
49 Commits
1 Forks
3 Watching
1 Branches
2 Contributors
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
Publised On
15 Dec 2024
Total Downloads
Cumulative downloads
Total Downloads
312,477
Last day
-51.3%
93
Compared to previous day
Last week
-14.6%
643
Compared to previous week
Last month
47.6%
3,174
Compared to previous month
Last year
-74.6%
26,991
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
2
Versions
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
4 commit(s) and 2 issue activity found in the last 90 days -- score normalized to 5
Reason
Found 2/30 approved changesets -- 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
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
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
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
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'main'
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.9
/10
Last Scanned on 2025-01-27
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