- Overview
- Features
- Installation
- Usage
- Architecture
- Technology Stack
- Configuration
- Troubleshooting
- Contributing
- Roadmap
- License
- Support
API & JS File Analyzer Pro is a powerful Chrome extension designed for developers, security researchers, and web enthusiasts who need to intercept, analyze, and debug HTTP requests and WebSocket traffic in real-time. Built with modern web technologies and following Chrome's Manifest V3 specifications, this extension provides a comprehensive suite of tools for network traffic analysis.
- ✅ Real-time Traffic Capture - Monitor all HTTP/HTTPS requests and WebSocket connections
- ✅ Advanced Request Repeater - Modify and resend requests with syntax highlighting
- ✅ WebSocket Inspector - Track bidirectional WebSocket messages with detailed statistics
- ✅ Developer-Friendly UI - Clean, modern interface with dark mode support
- ✅ Zero Performance Impact - Efficient background service worker
- ✅ Privacy-Focused - All data stays local in your browser
-
Complete Request Capture: Intercepts all HTTP/HTTPS requests including:
XMLHttpRequest(XHR)Fetch APIcalls- Third-party API requests
- AJAX requests
-
Detailed Request Information:
- Request/Response headers
- Request/Response body with syntax highlighting
- HTTP method, status code, and timing
- Content-Type detection
- JSON pretty-printing
-
Advanced Filtering:
- Filter by domain, method, status code
- Search across request/response data
- Export captured requests
-
Real-time Connection Tracking:
- Monitor all WebSocket connections
- Track connection lifecycle (open, close, error)
- Capture bidirectional messages
-
Message Analysis:
- View sent and received messages
- Timestamps for each frame
- Message statistics (count, duration)
- JSON formatting for structured data
- Frame bytes display
-
Connection Details:
- Connection URL and protocol
- Connection status and duration
- Error tracking and diagnostics
-
Modify & Resend Requests:
- Edit any captured HTTP request
- Modify headers, body, and parameters
- Send modified requests and view responses
-
Developer Tools:
- Syntax highlighting for request bodies
- JSON validation and pretty-printing
- Line numbers for easy navigation
- Side-by-side request/response view
-
Modern UI/UX:
- Responsive design for all screen sizes
- Dark theme optimized for long sessions
- Split-view panels
- Context menus for quick actions
-
Data Management:
- Clear captured requests
- Export/Import functionality
- Persistent storage across sessions
🚧 Coming Soon - The extension will be available on the Chrome Web Store
- Visit the Chrome Web Store page (link pending)
- Click "Add to Chrome"
- Confirm the installation by clicking "Add extension"
Perfect for testing, development, or if you want the latest features!
- Google Chrome (version 88 or higher)
- Basic understanding of Chrome extensions (optional)
-
Download the Extension
# Clone the repository git clone https://github.com/Subhashis360/API-Inspector.git # Or download as ZIP and extract
-
Open Chrome Extensions Page
- Navigate to
chrome://extensions/in your Chrome browser - Or: Menu (⋮) → More Tools → Extensions
- Navigate to
-
Enable Developer Mode
- Toggle the "Developer mode" switch in the top-right corner
-
Load the Extension
- Click "Load unpacked" button
- Navigate to the
apijsscannerfolder - Select the folder and click "Select Folder"
-
Verify Installation
- You should see the extension icon in your Chrome toolbar
- The extension card should appear in the extensions list
-
Pin the Extension (Recommended)
- Click the puzzle icon (🧩) in the Chrome toolbar
- Find "API & JS File Analyzer Pro"
- Click the pin icon to keep it visible
-
Open the Extension Popup
- Click the extension icon in your Chrome toolbar
- The popup displays a summary of captured requests
-
Start Capturing
- Navigate to any website
- The extension automatically captures HTTP requests and WebSocket connections
- Click "Open Dashboard" for detailed analysis
-
Access the Dashboard
- Click "Open Dashboard" from the popup
- Or right-click the extension icon and select "Open Dashboard"
1. Open the Dashboard
2. Navigate to "HTTP Requests" tab
3. Browse the list of captured requests
4. Click any request to view details
- General Info: Method, URL, Status Code, Timing
- Request Headers: All sent headers
- Request Body: With syntax highlighting for JSON/XML
- Response Headers: Server response headers
- Response Body: Pretty-printed with code highlighting
- 🔍 View Details - Click any request to expand
- 🔁 Send to Repeater - Right-click → "Send to Repeater"
- 📋 Copy - Copy request/response data
- 🗑️ Clear - Remove all captured requests
1. Open the Dashboard
2. Navigate to "WebSocket" tab
3. View active and past connections
4. Click a connection to see messages
- Sent Messages: Messages sent from client to server (↑ indicator)
- Received Messages: Messages received from server (↓ indicator)
- Timestamps: Precise timing for each message
- JSON Formatting: Automatic formatting for JSON payloads
- Total messages sent/received
- Connection duration
- Connection status (active/closed/error)
- Frame bytes transferred
The Repeater is a powerful tool for modifying and resending HTTP requests.
-
Send Request to Repeater
- From HTTP Requests tab, right-click a request
- Select "Send to Repeater"
-
Modify the Request
• Edit URL • Change HTTP method (GET, POST, PUT, DELETE, etc.) • Modify headers (add, edit, remove) • Edit request body with syntax highlighting -
Send Modified Request
- Click "Send" button
- View the response in the right panel
-
Compare Results
- Original vs Modified request
- Side-by-side response comparison
- ✏️ Editable URL bar
- 📝 Full request editor with line numbers
- 🎨 Syntax highlighting for JSON
- ⚡ Instant response preview
- 📊 Response status and timing
apijsscanner/
│
├── manifest.json # Extension configuration (Manifest V3)
├── background.js # Service worker for background tasks
├── content.js # Content script injected into web pages
├── popup.html/js # Extension popup interface
│
├── dashboard/ # Main dashboard application
│ ├── pages/
│ │ ├── httprequestpage.html # HTTP requests view
│ │ ├── webshoketpage.html # WebSocket monitor
│ │ └── repeterpage.html # Request repeater
│ │
│ ├── js/
│ │ ├── common.js # Shared utilities
│ │ ├── httprequestpage.js # HTTP requests logic
│ │ ├── webshoketpage.js # WebSocket logic
│ │ └── repeterpage.js # Repeater logic
│ │
│ └── css/
│ ├── common.css # Shared styles
│ ├── httprequestpage.css # HTTP page styles
│ ├── webshoketpage.css # WebSocket styles
│ └── repeterpage.css # Repeater styles
│
└── src/ # Additional source files
graph TD
A[Web Page] -->|Network Request| B[Content Script]
B -->|Intercept| C[Background Service Worker]
C -->|Store| D[Chrome Storage API]
D -->|Retrieve| E[Dashboard UI]
E -->|Display| F[User]
F -->|Modify & Resend| G[Repeater]
G -->|New Request| C
Request Flow:
- Interception: Content script intercepts network requests using proxy methods
- Capture: Background service worker captures request/response details
- Storage: Data stored in Chrome's local storage
- Display: Dashboard retrieves and displays captured data
- Interaction: User can analyze, filter, and resend requests
| Component | Technology |
|---|---|
| Manifest | Chrome Extension Manifest V3 |
| Background | Service Worker API |
| UI Framework | Vanilla JavaScript (ES6+) |
| Styling | Custom CSS with Dark Theme |
| Storage | Chrome Storage API |
| Network | Chrome Debugger Protocol |
| Permissions | webRequest, debugger, storage |
- Chrome Debugger API - Network request interception
- Chrome Storage API - Persistent data storage
- Chrome Tabs API - Tab management
- Chrome Scripting API - Content script injection
- Fetch API - Request repeater functionality
The extension requires the following permissions:
| Permission | Purpose |
|---|---|
activeTab |
Access current tab for request capture |
storage |
Store captured requests locally |
webRequest |
Monitor network requests |
webNavigation |
Track navigation events |
debugger |
Deep network inspection |
scripting |
Inject content scripts |
https://*/*, http://*/* |
Access all websites |
Privacy Note: All data is stored locally in your browser. No data is sent to external servers.
You can modify the extension behavior by editing configuration in background.js:
// Example: Change storage limits
const MAX_REQUESTS = 1000; // Maximum stored requests
const MAX_AGE_DAYS = 7; // Auto-clear older dataExtension not capturing requests
Solution:
- Ensure the extension is enabled (
chrome://extensions/) - Refresh the webpage you're testing
- Check if debugger permission is granted
- Try disabling other network-monitoring extensions
Dashboard not opening
Solution:
- Check browser console for errors (F12)
- Verify all files are present in the extension folder
- Reload the extension from
chrome://extensions/ - Clear browser cache and try again
WebSocket messages not appearing
Solution:
- Ensure the WebSocket connection is established after the extension is loaded
- Check WebSocket tab is active when connection opens
- Verify no other extensions are interfering
- Try on a fresh incognito window
Repeater not sending requests
Solution:
- Check request URL is valid and complete
- Verify Content-Type header matches body format
- Check browser console for CORS errors
- Ensure target server accepts the request method
If you encounter issues not covered here:
- 🐞 Open an issue on GitHub
- 💬 Check existing discussions
- 📧 Email: subhashis360@gmail.com
We welcome contributions from the community! Here's how you can help:
- 🐛 Report Bugs - Found a bug? Open an issue
- ✨ Suggest Features - Have an idea? Start a discussion
- 📝 Improve Documentation - Help others understand the extension better
- 💻 Submit Code - Fix bugs or add features via Pull Requests
# 1. Fork the repository on GitHub
# 2. Clone your fork
git clone https://github.com/YOUR_USERNAME/API-Inspector.git
cd API-Inspector
# 3. Create a new branch
git checkout -b feature/your-feature-name
# 4. Make your changes and test thoroughly
# 5. Commit with clear messages
git commit -m "Add: Brief description of your changes"
# 6. Push to your fork
git push origin feature/your-feature-name
# 7. Open a Pull Request on GitHub- Use ES6+ JavaScript features
- Follow consistent indentation (2 spaces)
- Add comments for complex logic
- Maintain dark theme compatibility
- Test in Chrome latest version
- Load the extension in developer mode
- Test on multiple websites
- Check console for errors
- Verify no performance degradation
- Test all features (HTTP, WebSocket, Repeater)
- Export requests to HAR format
- Import HAR files
- Advanced filtering options
- Request/Response diff view
- Dark/Light theme toggle
- GraphQL request support
- Request collections/projects
- Automated request replay
- Performance metrics
- Browser sync across devices
- Firefox extension port
- Request encryption/decryption tools
- API documentation generator
- Team collaboration features
- Chrome Web Store publication
Want to influence the roadmap? Share your ideas in Discussions!
This project is licensed under the MIT License - see the LICENSE file for details.
MIT License
Copyright (c) 2024 API & JS Analyzer Pro
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software")...
- 📖 Documentation: You're reading it!
- 💡 FAQ: Check Troubleshooting section
- 🐛 Bug Reports: GitHub Issues
- 💬 Discussions: GitHub Discussions
- ⭐ Star this repo to stay notified of updates
- 👁️ Watch for new releases
- 🐦 Follow on GitHub: @Subhashis360
Special thanks to:
- Chrome DevTools team for inspiration
- Open-source community for feedback and contributions
- All users and contributors who make this project better
If this extension helped you, consider giving it a ⭐ on GitHub!
