Your Skin Arsenal, Fully Tracked - Professional CS2 Trading Analytics Platform
SkinStatz is a comprehensive CS2 skin trading analytics platform that provides professional portfolio management and real-time market insights. Whether you're a casual trader or a serious investor, SkinStatz helps you track your trades, analyze market trends, and optimize your trading strategies.
- Trading Management - Track trades with advanced weekly and monthly analytics, graphs, and comprehensive data visualization
- Investment Tracking - Long-term investment monitoring with detailed analytics and performance metrics
- Case Drop Analytics - Weekly drop tracking with advanced analytics and statistical insights
- Skin Explorer - Comprehensive market browser supporting Steam and CSFloat with recent sales, listings, and in-depth analytics
- Advanced Analytics - Weekly, monthly, and yearly breakdowns with interactive charts and graphs
- Real-time Pricing - Live market data integration from CSFloat and Buff163 APIs
- Cross-Browser Support - Available for both Chrome and Firefox
- Data Persistence - Local storage with export/import functionality
Frontend: Vanilla JavaScript ES6+, TailwindCSS, Responsive Design
State Management: Zustand with LocalStorage persistence
Charts & Visualization: ApexCharts, Chart.js, D3.js
Architecture: Browser Extension (Manifest V3), SPA with Page.js routing
APIs: CSFloat Market API, Buff163 Price API, Steam Market Integration
- Download the repository and navigate to the
SkinStatz for chrome/folder - Open Chrome and go to
chrome://extensions/ - Enable "Developer mode" (toggle in top right)
- Click "Load unpacked" and select the
SkinStatz for chrome/folder - Done! Click the SkinStatz icon in your browser toolbar to start
- Download the repository and navigate to the
SkinStatz for Firefox/folder - Open Firefox and go to
about:debugging - Click "This Firefox" in the sidebar
- Click "Load Temporary Add-on" and select
manifest.jsonfrom theSkinStatz for Firefox/folder - Done! Click the SkinStatz icon in your browser toolbar to start
Click to expand detailed installation guide
- Go to the GitHub repository
- Click the green "Code" button → "Download ZIP"
- Extract the ZIP file to a memorable location
- Open Google Chrome
- Navigate to
chrome://extensions/or:- Click three dots menu (⋮) → More tools → Extensions
- Find "Developer mode" toggle in the top right corner
- Click to turn it ON (should turn blue/green)
- Click "Load unpacked" button (now visible)
- Navigate to your extracted folder
- Select the
SkinStatz for chrome/folder - Click "Select Folder"
- Look for "SkinStatz" in your extensions list
- Status should show "Enabled"
- Click the SkinStatz icon in your toolbar to open the application
- Install the browser extension following the instructions above
- Click the SkinStatz icon in your browser toolbar
- Start by adding your first trade or investment
| Feature | Description |
|---|---|
| Dashboard | Overview of your entire portfolio with key metrics and charts |
| Trading | Manage individual trades, track holdings, and analyze performance |
| Investments | Long-term investment tracking with category organization |
| Cases | Track weekly case drops and analyze opening patterns |
| Skin Explorer | Browse market data with Steam and CSFloat integration, view recent sales and listings with detailed analytics |
- Export Data: Download your complete trading history as Excel/CSV
- Import Data: Upload existing trading records from other platforms
- Backup: Regular automatic backups to prevent data loss
- Sync: Data persists across browser sessions
SkinStatz/
├── SkinStatz for chrome/ # Chrome extension (Manifest V3)
│ ├── manifest.json # Chrome extension manifest
│ ├── popup.html # Extension popup interface
│ ├── background.js # Service worker
│ ├── icons/ # Extension icons
│ └── src/ # Application source code
├── SkinStatz for Firefox/ # Firefox extension (Manifest V2)
│ ├── manifest.json # Firefox extension manifest
│ ├── popup.html # Extension popup interface
│ ├── background.js # Background script
│ ├── icons/ # Extension icons
│ └── src/ # Application source code
├── Preview/ # Application screenshots
│ ├── Dashboard.png
│ ├── Trading Overview.png
│ ├── investments.png
│ └── Skin Explorer.png
└── README.md # Documentation
src/
├── pages/
│ ├── Dashboard/ # Portfolio overview & metrics
│ ├── Trading/ # Trade history & holdings
│ ├── Investments/ # Long-term investment tracking
│ ├── Cases/ # Weekly drop tracking
│ ├── Profile/ # User settings & stats
│ └── SkinExplorer/ # Market browser
├── components/ # Reusable UI components
│ ├── Chart.js
│ ├── Modal.js
│ ├── TradingChart.js
│ └── WaterfallChart.js
├── services/ # API integration
│ └── PriceService.js
├── utils/ # Helper functions
│ ├── exportImport.js
│ ├── steamApi.js
│ └── csfloatUrls.js
├── main.js # Application entry point
├── router.js # SPA routing
└── store.js # State management
{
id: string,
itemName: string,
buyPrice: number,
sellPrice: number | null,
quantity: number,
date: string,
sellDate: string | null,
status: 'holding' | 'sold',
profit: number | null,
returnPercentage: number | null,
category: string
}{
id: string,
itemName: string,
buyPrice: number,
currentPrice: number,
quantity: number,
date: string,
category: 'skin' | 'case' | 'sticker' | 'other',
unrealizedPL: number,
returnPercentage: number
}{
id: string,
caseName: string,
dropDate: string,
price: number,
account: string,
weekId: string,
year: number,
month: number
}Currently integrated with:
- CSFloat API - Real-time skin price data and market listings
- Buff163 API - Chinese market price comparisons and trends
- Steam Market API - Historical price data and market statistics (planned)
The application automatically fetches current market prices for your holdings, providing:
- Real-time portfolio valuation
- Profit/loss calculations
- Market trend analysis
- Price alerts and notifications
- Node.js 16+ (for development tools)
- Chrome or Firefox browser
- Basic knowledge of JavaScript ES6+
# Clone the repository
git clone https://github.com/Sadat41/SkinStatz.git
# Navigate to project
cd SkinStatz
# For Chrome development
cd "SkinStatz for chrome"
# For Firefox development
cd "SkinStatz for Firefox"
# Load in browser for testing
# Chrome: chrome://extensions/ → Developer mode → Load unpacked
# Firefox: about:debugging → Load Temporary Add-on- Architecture: Modular ES6+ with component-based structure
- State Management: Zustand for global state + LocalStorage persistence
- Styling: TailwindCSS utility-first with glassmorphism design
- Code Style: Modern JavaScript, async/await, comprehensive error handling
- Responsive: Mobile-first design with progressive enhancement
- Local Data Only - All data stored locally in browser storage
- No Tracking - No user analytics or behavior tracking
- Secure APIs - Only connects to trusted CS2 market APIs
- Open Source - Complete source code available for review
{
"permissions": ["storage", "activeTab"],
"host_permissions": ["https://csfloat.com/*", "https://buff.163.com/*"]
}storage- Save your trading data locallyactiveTab- Access current tab for market integration- Host permissions - Connect to price APIs for real-time data
| Browser | Support | Notes |
|---|---|---|
| Chrome 88+ | Full | Recommended |
| Firefox 78+ | Full | Available |
| Edge (Chromium) | Full | Compatible |
| Brave | Full | Tested |
| Opera | Partial | May work |
| Safari | No | Different extension system |
# Fork the repository
git clone https://github.com/YOUR_USERNAME/SkinStatz.git
# Create a feature branch
git checkout -b feature/amazing-feature
# Make your changes and commit
git commit -m 'Add amazing feature'
# Push to your fork
git push origin feature/amazing-feature
# Open a Pull Request- Follow existing code style and patterns
- Test changes in both Chrome and Firefox
- Document new features and API changes
- Ensure no breaking changes to existing data structures
- Trading management with advanced weekly and monthly analytics
- Investment tracking with comprehensive analytics and performance metrics
- Case drop tracking with detailed weekly analytics and graphs
- Skin Explorer with Steam and CSFloat integration for recent sales and listings
- Advanced data visualization with interactive charts and graphs
- Real-time price integration from multiple APIs
- Cross-browser compatibility with Chrome and Firefox extensions
- Data export/import functionality
- Advanced charting and technical indicators
- Mobile-responsive design improvements
- Enhanced notification system
- Portfolio optimization recommendations
- Profile Section - User settings and preferences with multi-currency support
- Enhanced Skin Explorer - Buff163 integration for expanded market data
- Steam Integration - Steam sign-in option for seamless account connectivity
- Advanced Analytics - Extended market analysis and trend prediction
- Multi-currency Support - Support for various currencies in profile settings
- Documentation: Check this README for detailed guides
- Issues: Report bugs or request features
- Discussions: Community discussions and questions
Extension not loading?
Solutions:
- Ensure Developer Mode is enabled
- Check that manifest.json is in the selected folder
- Refresh the extensions page and try again
- Check browser console for error messages
Price data not updating?
Fixes:
- Check internet connection
- Verify API endpoints are accessible
- Clear browser cache and reload extension
- Check if CSFloat/Buff163 APIs are operational
This project is licensed under the MIT License - see the LICENSE file for details.
- Complete UI/UX redesign with glassmorphism
- Enhanced portfolio analytics and charts
- Real-time price integration with multiple APIs
- Cross-browser extension support
- Advanced investment tracking features
- Comprehensive data export/import system
- Initial release with basic trading functionality
- Simple portfolio tracking
- Manual price entry system
- Local data storage
Made with ❤️ for the CS2 trading community
⭐ Star this repo • 🐛 Report Bug • 💡 Request Feature
Transform your CS2 trading experience with professional analytics and insights