REST API Tester - Chrome/Opera Extension

A lightweight browser extension for testing REST API endpoints directly from your browser. Perfect for API development, authentication testing, and debugging without the need for external tools.

Features

• Multiple HTTP Methods: Support for GET, POST, PUT, DELETE, and PATCH requests
• Flexible Body Formats: Toggle between JSON and Form Data with automatic Content-Type handling
• Custom Headers: Add unlimited custom headers with easy key-value management
• Response Visualization: Formatted JSON responses with status codes and timing
• Endpoint Management: Save and load frequently-used endpoints
• Persistent Window: Stays open when clicking outside, perfect for copying data from other sources
• Response Tools: Copy response data to clipboard with one click
• Clean Interface: Simple, intuitive UI without unnecessary bloat

Why This Extension?

Built to test server-side authentication and license validation endpoints during desktop application development. When you need quick, reliable API testing without switching to external tools like Postman, this extension provides exactly what you need - nothing more, nothing less.

Installation

For Development/Personal Use

1. Download or Clone this repository
2. Open Chrome/Opera and navigate to:
   • Chrome: chrome://extensions/
   • Opera: opera://extensions/
3. Enable Developer Mode (toggle in top-right corner)
4. Click "Load unpacked"
5. Select the folder containing the extension files
6. Click the extension icon in your browser toolbar to start testing

File Structure

rest-api-tester/
├── manifest.json       # Extension configuration
├── background.js       # Service worker and window management
├── popup.html          # Main UI structure
├── popup.css          # Styling
├── popup.js           # Interactive functionality
├── icon.png           # Extension icon
└── README.md          # This file

Usage

Basic Workflow

1. Click the REST API Tester icon in your browser toolbar
2. Enter your API endpoint URL
3. Select HTTP method (GET, POST, PUT, DELETE, PATCH)
4. Add headers as needed (Content-Type is pre-filled)
5. Choose body format:
   • JSON: Enter raw JSON data with formatting support
   • Form Data: Use key-value pairs for form submissions
6. Click "Send Request"
7. View response with status code, timing, and formatted body
8. Save endpoint for future use (optional)

Headers Management

• Click "Add Header" to add custom headers
• Enter header name and value
• Click the X button to remove headers
• Content-Type is automatically set based on body format

Body Formats

JSON Mode:

• Enter raw JSON in the textarea
• Click "Format JSON" to validate and prettify
• Perfect for REST APIs expecting JSON payloads

Form Data Mode:

• Add key-value pairs using the form fields
• Click "Add Field" for more fields
• Ideal for traditional form submissions

Saving Endpoints

1. Configure your request (URL, method, headers, body)
2. Click "Save Current"
3. Enter a name for the endpoint
4. Select from "Saved Endpoints" dropdown to reload

Keyboard Shortcuts

• Ctrl/Cmd + Enter: Send request (when focused in a field)
• Escape: Close window

Technical Details

Built With

• Manifest V3: Modern Chrome extension architecture
• Vanilla JavaScript: No frameworks, pure JS for performance
• Chrome Storage API: Local storage for saved endpoints
• Fetch API: Standard HTTP requests

Browser Compatibility

• ✅ Chrome (v88+)
• ✅ Opera (v74+)
• ✅ Edge (Chromium-based)
• ✅ Brave
• ⚠️ Firefox (requires minor manifest modifications)

Key Implementation Details

• Opens as a persistent popup window (doesn't close when clicking outside)
• Uses service worker for background processing
• Stores configurations in Chrome local storage
• Handles CORS appropriately for cross-origin requests
• Measures and displays response timing
• Automatically formats JSON responses

Development

Prerequisites

• Chrome/Opera browser
• Basic understanding of HTML/CSS/JavaScript
• Text editor

Making Changes

1. Edit the files in your local copy
2. Go to chrome://extensions/
3. Click the reload icon on the extension card
4. Test your changes by opening the extension

Project Structure Explained

// manifest.json - Defines extension properties and permissions
{
  "manifest_version": 3,
  "permissions": ["storage", "activeTab"],
  "host_permissions": ["<all_urls>"]
}

// background.js - Manages extension lifecycle
- Opens popup as persistent window
- Handles window focus/creation
- Manages cross-origin requests

// popup.js - Main application logic
- Request configuration
- Response handling
- Endpoint storage/retrieval
- UI interactions

Use Cases

• API Development: Test endpoints during development
• Authentication Testing: Verify login/token endpoints
• License Validation: Test server-side validation logic
• Debugging: Quickly diagnose API issues
• WordPress REST API: Test custom WordPress endpoints
• Microservices: Test individual service endpoints
• Webhook Testing: Send test payloads to webhooks

Troubleshooting

Extension Not Loading

• Ensure all files are in the same directory
• Check that manifest.json is valid JSON
• Verify Developer Mode is enabled

Requests Failing

• Check for CORS restrictions on the target API
• Verify the endpoint URL is correct and accessible
• Ensure proper authentication headers are included

Popup Shows HTML Code

• The popup.html file may be corrupted
• Replace with the correct HTML from this repository
• Reload the extension

Storage Issues

• Check Chrome storage quota isn't exceeded
• Clear extension storage: chrome.storage.local.clear()
• Verify storage permissions in manifest

Future Enhancements

Potential features for future versions:

• Request history with search
• Environment variables support
• Pre-request scripts
• Authentication templates (OAuth, JWT)
• Response comparison tool
• Export/import endpoint collections
• Dark mode
• Syntax highlighting for responses
• File upload support
• Request chaining

Contributing

This is a personal project, but suggestions and improvements are welcome! Feel free to:

• Report bugs or issues
• Suggest new features
• Submit pull requests
• Share your use cases

License

This project is open source and available for personal and commercial use.

Acknowledgments

Built with simplicity in mind - inspired by the need for quick, reliable API testing without the overhead of full-featured tools.

Author

Created for testing server-side authentication during desktop application development.

---

Version: 1.25
Last Updated: November 2024
Browser: Chrome, Opera, Edge (Chromium-based)