Add REST API Tester Chrome Extension with Manifest V3

README.md

@@ -1,2 +1,59 @@
-# REST-API-TESTER
-A lightweight browser extension that allows you to test REST API endpoints directly from your browser. Toggle between JSON and FORM Data, view formatted responses with status codes and timing and save your frequently-used endpoints for quick access. Send custom headers.
+# REST API Tester
+
+A lightweight Chrome extension that allows you to test REST API endpoints directly from your browser.
+
+## Features
+
+- **HTTP Methods**: Support for GET, POST, PUT, PATCH, and DELETE requests
+- **Request Body**: Toggle between JSON and Form Data formats
+- **Custom Headers**: Add and manage custom request headers
+- **Response Viewer**: View formatted responses with syntax highlighting
+- **Status Codes**: See HTTP status codes with color-coded badges
+- **Response Timing**: Track response times in milliseconds
+- **Save Endpoints**: Store frequently-used endpoints for quick access
+
+## Installation
+
+1. Clone this repository or download the source code
+2. Open Chrome and navigate to `chrome://extensions/`
+3. Enable "Developer mode" in the top right corner
+4. Click "Load unpacked" and select the extension directory
+5. The REST API Tester icon will appear in your browser toolbar
+
+## Usage
+
+1. Click the REST API Tester icon in your browser toolbar
+2. Enter the URL of the API endpoint you want to test
+3. Select the HTTP method (GET, POST, PUT, PATCH, DELETE)
+4. Optionally add headers and request body
+5. Click "Send" to make the request
+6. View the response with status code and timing
+
+### Saving Endpoints
+
+1. After configuring your request, click "Save Current"
+2. Enter a name for the endpoint
+3. The endpoint will appear in the saved endpoints list
+4. Click on a saved endpoint to load it
+
+## Tech Stack
+
+- **Manifest V3**: Chrome extension configuration
+- **Vanilla JavaScript**: No frameworks required
+- **Chrome Storage API**: For storing saved endpoints
+- **Fetch API**: For making HTTP requests
+
+## Architecture
+
+```
+├── manifest.json    # Extension configuration
+├── background.js    # Service worker for window management
+├── popup.html       # Main UI structure
+├── popup.css        # UI styling
+├── popup.js         # Request builder and response viewer logic
+└── icons/           # Extension icons
+```
+
+## License
+
+MIT License

background.js

@@ -0,0 +1,38 @@
+// Background service worker for REST API Tester extension
+// Handles window management for the extension
+
+let popupWindowId = null;
+
+// Listen for extension icon click to manage popup window
+chrome.action.onClicked.addListener(async () => {
+  // Check if popup window already exists
+  if (popupWindowId !== null) {
+    try {
+      const window = await chrome.windows.get(popupWindowId);
+      // If window exists, focus it
+      await chrome.windows.update(popupWindowId, { focused: true });
+      return;
+    } catch (e) {
+      // Window no longer exists, reset the ID
+      popupWindowId = null;
+    }
+  }
+
+  // Create a new popup window
+  const window = await chrome.windows.create({
+    url: chrome.runtime.getURL('popup.html'),
+    type: 'popup',
+    width: 800,
+    height: 700,
+    focused: true
+  });
+
+  popupWindowId = window.id;
+});
+
+// Track when the popup window is closed
+chrome.windows.onRemoved.addListener((windowId) => {
+  if (windowId === popupWindowId) {
+    popupWindowId = null;
+  }
+});

manifest.json

@@ -0,0 +1,29 @@
+{
+  "manifest_version": 3,
+  "name": "REST API Tester",
+  "version": "1.0.0",
+  "description": "A lightweight browser extension that allows you to test REST API endpoints directly from your browser.",
+  "permissions": [
+    "storage"
+  ],
+  "host_permissions": [
+    "<all_urls>"
+  ],
+  "action": {
+    "default_popup": "popup.html",
+    "default_icon": {
+      "16": "icons/icon16.png",
+      "48": "icons/icon48.png",
+      "128": "icons/icon128.png"
+    },
+    "default_title": "REST API Tester"
+  },
+  "icons": {
+    "16": "icons/icon16.png",
+    "48": "icons/icon48.png",
+    "128": "icons/icon128.png"
+  },
+  "background": {
+    "service_worker": "background.js"
+  }
+}