Various improvements and fixes for npmjs.com. Install on Greasyfork.
Before:
After:
Additional demos:
| Feature | Description |
|---|---|
better-dependencies | Improved package dependencies tab with added peer dependencies info, optional dependencies info, and dependency semver ranges. |
better-versions | Improved package versions tab with compact table view, collapsed large tags table, cumulated versions table, show tags next to versions, and fix provenance icon alignment. |
fix-highlight-styles | Fix syntax highlighting contrast issues in dark mode by using the GitHub Dark theme. |
fix-issue-pr-count | Show "Issue" and "Pull Requests" counts in the package sidebar. At the time of writing, npm's own implementation is broken for large numbers for some reason. This temporarily fixes it. |
fix-styles | Fix various style issues on the npm site. |
helpful-links | Add helpful links beside the package header for convenience. |
module-replacements | Suggest alternatives for the package based on "es-tooling/module-replacements" data set. |
move-funding | Move the "Fund this package" button to the bottom of the sidebar. |
no-code-beta | [Disabled by default] Hide the "Beta" label in the package code tab. |
remember-banner | Remember the banner at the top of the page when dismissed, so it doesn't keep showing up. |
remove-redundant-homepage | Remove the homepage link if it's the same as the repository link, or only has a hash to the readme. |
repository-card | Consolidates all repository information in a card-like view in the package sidebar. Enabling this would remove the "Stars", "Issues", and "Pull Requests" columns. |
repository-directory | Adds the repository directory to the repository link. |
show-binary-label | Adds a label for packages that publish prebuilt native binaries. |
show-cli-label | Adds a label if the package publishes a CLI via the package.json "bin" field, and update the install command to "npm create" or "npx" accordingly. |
show-engine-label | Adds a label of the engine versions (e.g. Node.js) that a package supports. |
show-file-types-label | Show ESM or CJS labels if the package publishes them. |
show-lifecycle-scripts-label | Adds a label if the package defines lifecycle scripts in its package.json. |
show-types-label | Adds a label for packages that publish TypeScript types. This is similar to npm's own DT / TS icon but with a more consistent UI. It is also more accurate if the package publishes types but isn't detectable in the package.json. |
show-vulnerabilities | Adds a label if a package is vulnerable in the header and versions table. The core vulnerability data is powered by https://osv.dev. |
stars | Display a "Stars" column in the package sidebar for GitHub repos. |
tarball-size | Display the tarball size of the package. |
unpacked-size-and-total-files | Display the "Unpacked Size" and "Total Files" columns for older packages that lack the data. |
- As npm updates their site, some features may break or behave unexpectedly until the userscript is updated accordingly. Please be aware especially when updating sensitive data.
- The userscript fetches from https://npm-userscript.bjornlu.workers.dev (a custom Cloudflare Worker) that proxies data from other sources to save on bandwidth and cache results. Check the worker directory for the source code.
MIT