|
1 | | -# Tauri + Vue + TypeScript |
| 1 | +<div align="center"> |
| 2 | + <img align="center" width="128px" src="public/icon.png" /> |
| 3 | + <h1 align="center"><b>Hoppscotch Agent</b></h1> |
| 4 | + <h2 align="center"> |
| 5 | + <a href="https://github.com/hoppscotch/agent-releases">Download</a> | |
| 6 | + <a href="https://docs.hoppscotch.io/documentation/clients/agent">Official Docs</a> |
| 7 | + </h2> |
| 8 | +</div> |
2 | 9 |
|
3 | | -This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more. |
| 10 | +<br/> |
4 | 11 |
|
5 | | -## Recommended IDE Setup |
| 12 | +#### Hoppscotch Agent is a cross-platform HTTP request relay for Hoppscotch built with [Tauri V2](https://v2.tauri.app/) that adds capabilities like custom headers, certificates, proxies, and local access typically restricted in browsers. |
6 | 13 |
|
7 | | -- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer) |
| 14 | +The agent runs as a local system service on port `9119`, acting as an intermediary between the Hoppscotch web application and target APIs. It establishes an encrypted communication channel authenticated via an OTP registration process. |
8 | 15 |
|
9 | | -## Type Support For `.vue` Imports in TS |
| 16 | +## Installation |
10 | 17 |
|
11 | | -Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps: |
| 18 | +### Standard Installation |
12 | 19 |
|
13 | | -1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled. |
14 | | -2. Reload the VS Code window by running `Developer: Reload Window` from the command palette. |
| 20 | +1. Download the latest version of Hoppscotch Agent from [releases](https://github.com/hoppscotch/agent-releases) |
| 21 | +2. Run the installer |
| 22 | +3. Follow the installation wizard to complete setup |
| 23 | +4. The agent automatically starts and appears in your system tray |
15 | 24 |
|
16 | | -You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471). |
| 25 | +### Portable Version |
| 26 | + |
| 27 | +The portable version runs without installation and does not include automatic updates. |
| 28 | + |
| 29 | +1. Download the portable version for your operating system |
| 30 | +2. Extract the archive to your desired location |
| 31 | +3. Run the executable directly |
| 32 | +4. The agent will start and appear in your system tray |
| 33 | + |
| 34 | +> [!Note] |
| 35 | +> The portable version uses a separate configuration (`tauri.portable.conf.json`) that disables bundling and updater functionality. |
| 36 | +
|
| 37 | +## Getting Started |
| 38 | + |
| 39 | +### Registration |
| 40 | + |
| 41 | +1. Open Hoppscotch web app and navigate to **Settings** → **Interceptors** |
| 42 | +2. Select **Agent** from the available interceptors |
| 43 | +3. Click **Register Agent** button |
| 44 | +4. The agent window displays a 6-digit verification code |
| 45 | +5. Enter the verification code in the OTP input field |
| 46 | +6. Click the confirm button to establish connection |
| 47 | +7. The agent displays a masked auth key hash when successfully registered |
| 48 | + |
| 49 | +### Usage |
| 50 | + |
| 51 | +Once registered, all HTTP requests made through Hoppscotch are processed by the agent. The agent provides: |
| 52 | + |
| 53 | +- CORS bypass by processing requests locally |
| 54 | +- Client certificate authentication for mutual TLS |
| 55 | +- HTTP Digest Authentication using challenge-response mechanisms |
| 56 | +- Custom headers that browsers typically restrict |
| 57 | +- Proxy routing with authentication support |
| 58 | +- Local network and localhost access |
| 59 | +- SSL/TLS verification controls |
| 60 | +- And much more |
| 61 | + |
| 62 | +## Domain-Specific Configuration |
| 63 | + |
| 64 | +The agent (and `Native`) interceptor supports per-domain configuration overrides with a global default (`*`) domain: |
| 65 | + |
| 66 | +### Domain Management |
| 67 | +- **Global Defaults**: Base settings applied to all domains (domain: `*`) |
| 68 | +- **Domain Overrides**: Specific settings for individual domains (e.g., `api.example.com`) |
| 69 | +- **Domain Addition**: Add new domains through the domain management modal |
| 70 | +- **Domain Removal**: Remove custom domain configurations (global default cannot be removed) |
| 71 | + |
| 72 | +### SSL/TLS Security Settings |
| 73 | + |
| 74 | +For each domain, configure: |
| 75 | + |
| 76 | +- **Verify Host**: Enable/disable hostname verification during SSL handshake |
| 77 | +- **Verify Peer**: Enable/disable peer certificate verification |
| 78 | +- **CA Certificates**: Upload custom Certificate Authority certificates for domain validation |
| 79 | +- **Client Certificates**: Configure client certificates for mutual TLS authentication |
| 80 | + |
| 81 | +## Client Certificates |
| 82 | + |
| 83 | +The agent supports client certificate authentication for APIs requiring mutual TLS: |
| 84 | + |
| 85 | +### Certificate Formats |
| 86 | +- **.pem certificates**: Requires separate certificate (.crt/.cer/.pem) and private key (.key/.pem) files |
| 87 | +- **.pfx/.pkcs12 certificates**: Single file format with optional password protection |
| 88 | + |
| 89 | +### Configuration |
| 90 | + |
| 91 | +1. Access **Settings** → **Interceptors** → **Agent** in Hoppscotch |
| 92 | +2. Select the target domain from the domain selector |
| 93 | +3. Click **Client Certificates** button |
| 94 | +4. Choose certificate format (PEM or PFX tab) |
| 95 | +5. Upload certificate files: |
| 96 | + - **PEM**: Upload certificate file and private key file separately |
| 97 | + - **PFX**: Upload .pfx/.pkcs12 file and enter password if required |
| 98 | +6. Configuration is automatically saved per domain |
| 99 | + |
| 100 | +### CA Certificates |
| 101 | + |
| 102 | +Custom Certificate Authority certificates can be added per domain: |
| 103 | + |
| 104 | +1. Navigate to the CA Certificates section for the target domain |
| 105 | +2. Click **Add Certificate File** |
| 106 | +3. Upload the CA certificate file |
| 107 | +4. Toggle certificate inclusion on/off as needed |
| 108 | +5. Remove certificates using the trash icon |
| 109 | + |
| 110 | +## Proxy Configuration |
| 111 | + |
| 112 | +The agent supports HTTP/HTTPS proxy routing with authentication (including NTLM): |
| 113 | + |
| 114 | +### Proxy Settings |
| 115 | +- **Proxy URL**: HTTP/HTTPS proxy server address with port |
| 116 | +- **Proxy Authentication**: Username and password for proxy server authentication |
| 117 | +- **Per-Domain**: Each domain can have different proxy configurations |
| 118 | + |
| 119 | +### Configuration |
| 120 | + |
| 121 | +1. Select the target domain |
| 122 | +2. Toggle the **Proxy** switch to enable |
| 123 | +3. Enter the proxy URL (e.g., `http://proxy.example.com:8080`) |
| 124 | +4. Configure proxy authentication if required: |
| 125 | + - Username field |
| 126 | + - Password field (with show/hide toggle) |
| 127 | + |
| 128 | +## System Integration |
| 129 | + |
| 130 | +### System Tray |
| 131 | +The agent runs with system tray integration, providing access to: |
| 132 | +- **Show Registrations**: View active connections and registration status |
| 133 | +- **Clear Registrations**: Remove all registered instances |
| 134 | +- **Maximize Window**: Show the agent interface window |
| 135 | +- **Quit**: Exit the agent application |
| 136 | + |
| 137 | +### Configuration Storage |
| 138 | +The agent stores configuration in platform-specific locations: |
| 139 | + |
| 140 | +- **Windows**: `%APPDATA%\io.hoppscotch.agent\` |
| 141 | +- **macOS**: `~/Library/Application Support/io.hoppscotch.agent/` |
| 142 | +- **Linux**: `~/.config/io.hoppscotch.agent/` |
| 143 | + |
| 144 | +### Logging |
| 145 | +Logs are stored in platform-specific directories: |
| 146 | + |
| 147 | +- **Windows**: `%LOCALAPPDATA%\io.hoppscotch.agent\logs\` |
| 148 | +- **macOS**: `~/Library/Logs/io.hoppscotch.agent/` |
| 149 | +- **Linux**: `~/.local/share/io.hoppscotch.agent/logs/` |
| 150 | + |
| 151 | +### Auto-Start Configuration |
| 152 | +The standard installation includes auto-start functionality. The portable version does not include auto-start and must be launched manually. |
| 153 | + |
| 154 | +## Building from Source |
| 155 | + |
| 156 | +### Prerequisites |
| 157 | + |
| 158 | +- [Node.js](https://nodejs.org/) (v18 or later) |
| 159 | +- [pnpm](https://pnpm.io/) package manager |
| 160 | +- [Rust](https://rustup.rs/) (latest stable) |
| 161 | +- [Tauri CLI](https://tauri.app/v1/guides/getting-started/prerequisites) |
| 162 | + |
| 163 | +### Development |
| 164 | + |
| 165 | +```bash |
| 166 | +# Clone the repository |
| 167 | +git clone https://github.com/hoppscotch/hoppscotch.git |
| 168 | +cd hoppscotch/packages/hoppscotch-agent |
| 169 | + |
| 170 | +# Install dependencies |
| 171 | +pnpm install |
| 172 | + |
| 173 | +# Start development server |
| 174 | +pnpm tauri dev |
| 175 | +``` |
| 176 | + |
| 177 | +### Production Build |
| 178 | + |
| 179 | +```bash |
| 180 | +# Build standard version |
| 181 | +pnpm tauri build |
| 182 | + |
| 183 | +# Build portable version |
| 184 | +pnpm tauri build --config src-tauri/tauri.portable.conf.json |
| 185 | +``` |
| 186 | + |
| 187 | +The built applications will be available in `src-tauri/target/release/bundle/` |
| 188 | + |
| 189 | +### Build Variants |
| 190 | + |
| 191 | +Two build configurations are available: |
| 192 | + |
| 193 | +- **Standard** (`tauri.conf.json`): Includes installer, auto-updater, and auto-start functionality |
| 194 | +- **Portable** (`tauri.portable.conf.json`): Standalone executable without installation requirements |
| 195 | + |
| 196 | +## Network Configuration |
| 197 | + |
| 198 | +### Default Port |
| 199 | +The agent runs on port `9119` by default. Make sure this port is not blocked by firewalls. |
| 200 | + |
| 201 | +### Communication Protocol |
| 202 | +- **Encryption**: AES-256-GCM for all agent-to-web-app communication |
| 203 | +- **Authentication**: X25519 key exchange for secure channel establishment |
| 204 | +- **Registration**: One-time 6-digit OTP verification process |
| 205 | + |
| 206 | +## System Requirements |
| 207 | + |
| 208 | +### Windows |
| 209 | +- **OS Version**: Windows 10 1803+ or Windows 11 |
| 210 | +- **Architecture**: x64 |
| 211 | +- **Dependencies**: WebView2 Runtime (auto-installed for standard version) |
| 212 | + |
| 213 | +### macOS |
| 214 | +- **OS Version**: macOS 10.15 (Catalina) or later |
| 215 | +- **Architecture**: Intel x64 or Apple Silicon (ARM64) |
| 216 | + |
| 217 | +### Linux |
| 218 | +- **Architecture**: x64 |
| 219 | +- **Dependencies**: WebKit2GTK 2.44.0+ (usually pre-installed) |
| 220 | +- **Minimum**: Systems with GLIBC 2.38+ |
| 221 | + |
| 222 | +## Troubleshooting |
| 223 | + |
| 224 | +### Agent Detection Issues |
| 225 | +1. **"Agent not detected" popup**: Verify the agent is running by checking the system tray for the Hoppscotch icon |
| 226 | +2. **Switching interceptors blocked**: If the "Agent not detected" popup prevents switching interceptors, restart your browser and stop the agent before changing interceptor settings |
| 227 | +3. **Port accessibility**: Check that no firewall is blocking port `9119` |
| 228 | +4. **Browser compatibility**: Safari on macOS may have CORS issues with localhost:9119 due to access control checks, try Chrome/Firefox for agent registration |
| 229 | + |
| 230 | +### Registration Failures |
| 231 | +1. **"Failed to initiate the registration"**: This error may occur due to browser security policies or extension conflicts |
| 232 | +2. **Missing OTP input field**: Verify the agent window is focused and displaying a 6-digit verification code |
| 233 | +3. **OTP expiration**: Registration codes have limited lifetime, restart the registration process if the code expires |
| 234 | +4. **Network connectivity**: Verify browser can reach localhost:9119/handshake |
| 235 | +5. **Version compatibility**: Some agent versions may be incompatible with specific Hoppscotch web app versions. For self-hosted setups, make sure Agent version in the release matches, see https://github.com/hoppscotch/hoppscotch/issues/4936#issuecomment-2756981053 |
| 236 | + |
| 237 | +### Certificate Issues |
| 238 | +1. Verify certificate format is supported (.pem or .pfx/.pkcs12) |
| 239 | +2. Check certificate expiration dates |
| 240 | +3. Confirm private key matches certificate (for .pem files) |
| 241 | +4. Verify domain configuration matches target API hostname |
| 242 | +5. Confirm certificate password is correct (for .pfx/.pkcs12) |
| 243 | +6. Check CA certificate inclusion status (toggle on/off) |
| 244 | + |
| 245 | +### Request Processing Issues |
| 246 | +1. **Custom headers not applied**: Verify the agent is selected as interceptor, browsers may override headers like User-Agent when using default HTTP methods |
| 247 | +2. **CORS errors**: Confirm agent interceptor is active and requests are routing through localhost:9119 |
| 248 | +3. **SSL/TLS verification**: Check verify host/peer settings for the target domain |
| 249 | +4. **Proxy routing**: Verify proxy URL format includes protocol (http:// or https://) |
| 250 | + |
| 251 | +### System-Specific Issues |
| 252 | + |
| 253 | +#### Windows |
| 254 | +1. Check WebView2 Runtime is installed (auto-installed with standard version) |
| 255 | +2. Check Windows Defender or antivirus exclusions for the agent executable |
| 256 | +3. Verify agent has network permissions through Windows Firewall |
| 257 | + |
| 258 | +#### macOS |
| 259 | +1. Safari browser may block agent connections due to CORS policies, try Chrome or Firefox instead |
| 260 | +2. Check macOS Gatekeeper settings if agent fails to start |
| 261 | +3. Verify agent is allowed in System Preferences → Security & Privacy |
| 262 | + |
| 263 | +#### Linux |
| 264 | +1. Check WebKit2GTK dependencies are installed |
| 265 | +2. Check systemd logs if agent fails to start as service |
| 266 | +3. Verify GLIBC version compatibility (requires 2.38+) |
| 267 | + |
| 268 | +### Portable Version Issues |
| 269 | +1. Manual WebView2 installation - may be required on older versions of Windows |
| 270 | +2. No auto-start capability - must launch manually after system restart |
| 271 | +3. No automatic updates - download new versions manually |
| 272 | +4. Verify executable permissions on Unix-like systems |
| 273 | +5. Check that portable version is extracted to a writable directory |
| 274 | + |
| 275 | +### Log |
| 276 | +Check agent logs for detailed error information: |
| 277 | +- **Windows**: `%LOCALAPPDATA%\io.hoppscotch.agent\logs\` |
| 278 | +- **macOS**: `~/Library/Logs/io.hoppscotch.agent/` |
| 279 | +- **Linux**: `~/.local/share/io.hoppscotch.agent/logs/` |
| 280 | + |
| 281 | +Look for connection errors, certificate validation failures, or proxy authentication issues in the log files. |
0 commit comments