🛡️ SafeHit - QA Safeguard, Mocking Engine & API Client

SafeHit is a modern, enterprise-grade Browser Extension (Manifest V3) designed to protect Production environments from accidental CRUD operations by QA teams, while also providing a robust API Mocking engine and a Session-Aware API Client right inside your browser.

📸 Preview

✨ Features

• Production Safeguard: Intercepts outgoing mutations (POST, PUT, PATCH, DELETE) to configured production URLs and prompts a beautifully designed warning modal.
• Shadow DOM Isolation: The warning modal is injected using Shadow DOM to ensure the extension's Tailwind styling never conflicts with the target website's CSS.
• Session-Aware API Client (Mini Postman): A built-in API tester that executes requests using the active browser tab's context.
  • No CORS Issues: Inherits the tab's origin and bypasses CORS restrictions.
  • Auto-Authentication: Automatically attaches the active session's cookies and local storage tokens.
  • Advanced Request Builder: Supports custom JSON Body, Headers (Auto-Merge), and Query Params (Auto-URL Encoded) powered by CodeMirror syntax highlighting.
  • Response Viewer: Inspect Status Codes, JSON Payloads, and Response Headers instantly.
• Smart API Mocking: Intercept specific API calls and return custom JSON responses to test frontend edge cases without hitting real servers. Includes a real-time toggle mechanism.
• Real-time Dynamic Configuration: Add or remove protected URLs directly from the extension Popup. Changes take effect instantly without needing to refresh the target page.
• Modern UI/UX: Features a sleek, dark-mode Glassmorphism design inspired by native macOS components and enterprise developer tools.

🛠️ Tech Stack

• Framework: Vite + Vanilla TypeScript
• Styling: Tailwind CSS
• Editor: CodeMirror 6 (JSON Syntax Highlighting & One Dark Theme)
• Extension Tooling: @crxjs/vite-plugin
• Architecture: Manifest V3, Storage Sync API, Window postMessage Bridge, Content Script injection.

📂 Project Structure

/safehit
├── public/                 # Static assets (Icons)
├── src/
│   ├── content/            # Injected scripts (Interceptor, UI, Bridge for API Client)
│   ├── options/            # Full-page Dashboard (Mock Rules & API Client Tester)
│   ├── popup/              # Quick action popup (URL Safeguard Management)
│   ├── styles/             # Tailwind global entries
│   └── utils/              # Helpers (i18n, Storage sync)
├── manifest.json           # Extension configuration
├── tailwind.config.js      # Tailwind setup
└── vite.config.ts          # Vite build setup

🚀 Getting Started

Prerequisites

Make sure you have Node.js installed (v16 or higher recommended).

Installation & Setup

Option 1: Install from Microsoft Edge Add-ons (Recommended)

You can install the stable version directly from the Microsoft Edge Add-ons Store.

Option 2: Build from Source (Developers)

1. Clone this repository.

   git clone <repository-url>
   cd safehit

2. Install dependencies.

   npm install

3. Build the extension for development (with Hot Module Replacement).

   npm run build

(Note: The dist/ folder will be generated).

Loading into Browser

For Google Chrome / Edge / Brave (Unpacked Developer Mode):

1. Open your browser and navigate to chrome://extensions/ (or edge://extensions/ if using Edge).
2. Enable Developer mode in the top right corner.
3. Click Load unpacked in the top left corner.
4. Select the dist/ folder that was generated by the build step.
5. The SafeHit extension should now appear in your list. Pin it to your toolbar for easy access!

💡 Usage

1. Production Safeguard

1. Click the SafeHit icon in your browser toolbar.
2. In the target URL field, enter a domain you want to protect (e.g., api.production.com) and click Add.
3. Navigate to a website that makes API calls to that domain.
4. Trigger a POST, PUT, PATCH, or DELETE request.
5. SafeHit will intercept the request and show a warning modal before the payload leaves the browser.

2. Session-Aware API Client & Mocking Engine

1. Right-click the SafeHit extension icon and select Options to open the Dashboard.
2. API Mocking: Navigate to the "Mocking Engine" tab to define endpoint rules and custom JSON responses. Toggle them on/off to instantly manipulate frontend behavior.
3. API Client Tester: Navigate to the "API Client" tab.
   • Select an active web tab from the Execution Context dropdown.
   • Define your Method, URL, Body, Headers, and Params.
   • Click Execute Request to fire the API call directly from that tab's session, utilizing its existing cookies and tokens seamlessly.

🔒 Security & Privacy

SafeHit is built with security and data privacy as core priorities:

• 100% Client-Side: All request interception, API client executions, and mocking configurations happen entirely inside your local browser instance.
• No External Data Transmission: SafeHit does not collect, log, or transmit your cookies, auth tokens, headers, or payloads to any external servers or third-party analytics.
• Data Storage: Your configurations and rules are stored strictly inside your browser using the standard chrome.storage.sync / chrome.storage.local APIs.

🤝 Contributing

Contributions are welcome! If you want to improve SafeHit, please follow these steps:

1. Fork the Project.
2. Create your Feature Branch (git checkout -b feature/AmazingFeature).
3. Commit your Changes (git commit -m 'Add some AmazingFeature').
4. Push to the Branch (git push origin feature/AmazingFeature).
5. Open a Pull Request.

📄 License

Distributed under the MIT License. See LICENSE for more information.

---

Built with ❤️ for better QA & Developer Experience.