NPM Version Stats Extension

A browser extension that displays npm package version usage statistics in an organized, easy-to-read format.

Features

• Version Statistics: Scrapes and displays usage percentages for all versions of an npm package
• Smart Filtering: Automatically ignores versions with 0.0% usage
• Categorized Views: Switch between Major, Minor, and Patch version groupings
• Clean Integration: Seamlessly integrates into npmjs.com pages above the "Current Tags" section
• Responsive Design: Works on different screen sizes

How It Works

1. Target Pages: Only activates on npm package pages with the versions tab (https://www.npmjs.com/package/*?activeTab=versions)
2. Data Scraping: Extracts version numbers and usage percentages from the versions table
3. Smart Grouping: Categorizes versions by major, minor, and patch releases
4. Interactive UI: Provides tabbed interface to switch between different grouping views

Installation

You can download the extension for your browser of choice:

• Chrome
• Firefox (Pending Approval)
• Opera

Development

1. Clone this repository
2. Install dependencies:

   npm install

3. Start development server:

   npm run dev

4. Load the extension in Chrome:
   • Open Chrome and go to chrome://extensions/
   • Enable "Developer mode"
   • Click "Load unpacked"
   • Select the .output/chrome-mv3-dev folder

Production Build

1. Build the extension:

   npm run build

2. Load the .output/chrome-mv3 folder in your browser

Usage

1. Navigate to any npm package page (e.g., https://www.npmjs.com/package/vue)
2. Click on the "Versions" tab
3. The extension will automatically display version statistics above the "Current Tags" section
4. Use the tabs to switch between:
   • Major Versions: Groups like 3.x.x, 2.x.x
   • Minor Versions: Groups like 3.4.x, 3.3.x
   • Patch Versions: Individual version releases

Development

Project Structure

entrypoints/
├── content.tsx          # Main content script
├── components/          # React components
│   ├── VersionStatsApp.tsx
│   ├── StatsTabs.tsx
│   └── LoadingSpinner.tsx
├── utils/
│   └── versionUtils.ts   # Version parsing and grouping logic
├── types/
│   └── version.ts        # TypeScript type definitions
└── styles/
    └── content.css       # Extension styles

Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run compile - Type check without building
• npm run zip - Create distributable zip file

Technologies

• WXT: Web Extension Toolkit for building browser extensions
• React: UI framework for the extension interface
• TypeScript: Type-safe development
• CSS: Styled to match npmjs.com design

License

Copyright 2025 Chris Griffing

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.