# How Wand Enhancer Integrates with Other Tools and Systems: A Technical Deep Dive

> Discover how Wand Enhancer integrates with external tools and systems. Learn about its Electron bridge, WebSocket control, JS injection, and VPN capabilities.

- Repository: [k1tbyte/Wand-Enhancer](https://github.com/k1tbyte/Wand-Enhancer)
- Tags: deep-dive
- Published: 2026-07-13

---

**Wand Enhancer integrates with external tools and systems by injecting an Electron-based bridge into the Wand client, enabling remote control via WebSocket, custom JavaScript injection, and VPN-based mobile access while maintaining native .NET orchestration.**

Wand Enhancer is a .NET WPF application that patches the official Wand client to expose internal functionality to external systems. Understanding how Wand Enhancer integrates with other tools requires examining its three-layer architecture that bridges native code, Electron internals, and web technologies.

## The Three-Layer Integration Architecture

Wand Enhancer achieves deep integration through three coordinated subsystems that manipulate the Wand client's ASAR archive, establish an Electron bridge, and serve a remote web interface.

### ASAR Archive Manipulation

The integration begins with **ASAR extraction and repacking**. In [`AsarSharp/AsarExtractor.cs`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/AsarSharp/AsarExtractor.cs), the `AsarExtractor.ExtractAll` method unpacks the `app.asar` archive from Wand's resources directory. After modification, [`AsarCreator.cs`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/AsarCreator.cs) rebuilds the archive.

This process occurs within [`WandEnhancer/Core/Enhancer.cs`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/WandEnhancer/Core/Enhancer.cs), where the `Patch()` method orchestrates the sequence:
1. Backs up the original `resources/app.asar`
2. Extracts contents to `resources/app.asar.unpacked`
3. Applies JavaScript patches to bundle files ([`index.js`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/index.js) or `app-*.bundle.js`)
4. Injects remote-panel assets into `resources/app.asar.unpacked/remote-panel`
5. Repacks the modified archive

### Electron Bridge Runtime

The **Electron bridge** provides the communication conduit between Wand's Chromium renderer and the native patcher. Located in [`web-panel/bridge/src/wand/runtime.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/bridge/src/wand/runtime.ts), the `installWandRuntime` function initializes the bridge by registering IPC handlers defined in [`web-panel/bridge/src/constants.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/bridge/src/constants.ts).

The bridge establishes two primary communication channels:
- **Value handlers** (`runtime.setHandler`) that forward `set_value` messages from the native side to renderer windows
- **Command handlers** that process remote commands via `REMOTE_COMMAND_REQUEST_CHANNEL` and return responses through `REMOTE_COMMAND_RESPONSE_CHANNEL`

The bridge also extracts the WeMod access token from the renderer's `localStorage` using `WEMOD_ACCESS_TOKEN_SCRIPT`, enabling external tools to query WeMod's API for cheat metadata without additional authentication.

### Remote Web Panel

The **remote web panel** exposes Wand's functionality through a local HTTP server. In [`web-panel/bridge/src/server.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/bridge/src/server.ts), the application serves a React-based UI on port 3223, exposing a WebSocket endpoint at `/remote/ws`.

This allows mobile devices and external tools to connect via standard WebSocket clients, sending `remote_command` messages (such as `launch` or `stop` for trainers) and receiving `game_status` updates in real-time.

## Native-to-Web Communication Flow

The integration relies on a strict protocol defined in [`web-panel/protocol/messages.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/protocol/messages.ts). All messages use a typed envelope system validated by [`protocol/validation.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/protocol/validation.ts).

When `Enhancer.Patch()` executes in [`WandEnhancer/Core/Enhancer.cs`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/WandEnhancer/Core/Enhancer.cs), it performs the following integration steps:
1. Copies the compiled bridge (`bridge.cjs`) into the unpacked ASAR
2. Extracts a native proxy DLL (`version.dll`) from assembly resources and places it adjacent to Wand's executable
3. Merges default renderer scripts from `web-panel/dist/` with user-provided scripts from the `renderer-scripts/` folder

The proxy DLL enables the patched client to load the bridge, while the IPC channels defined in [`constants.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/constants.ts) (such as `IPC_CHANNEL.REMOTE_URL`) ensure type-safe communication between the native patcher and the Electron renderer.

## External Tool Integration Points

### VPN and Remote Access

Wand Enhancer supports integration with **VPN solutions like Tailscale** to expose the local web panel across networks. Since the panel runs on port 3223, routing this port through a VPN allows mobile devices to control Wand remotely without port forwarding or external network dependencies.

### Custom Script Injection

Developers can extend functionality by placing `.js` files in a `renderer-scripts` folder adjacent to the patcher executable. The `installRendererScripts` function (in `web-panel/bridge/src/wand/renderer-scripts.ts) loads these scripts into Wand's renderer process at runtime.

Custom scripts execute within Electron's privileged context, providing full Node.js API access (`fs`, `path`, third-party modules) and the global `WandEnhancer` helper object for logging and configuration:

```typescript
// Example custom renderer script
if (!globalThis.__helloInstalled) {
  globalThis.__helloInstalled = true;
  WandEnhancer.log('Hello from custom script', WandEnhancer.remoteUrl);
  
  window.addEventListener('message', (e) => {
    if (e.data?.type === 'remote_command_result') {
      console.log('Command result:', e.data);
    }
  });
}

```

### WeMod API Integration

By surfacing the stored access token from `localStorage`, the bridge enables external scripts to query WeMod's cheat database directly. The `remote-session` code ([`web-panel/src/remote-session/remote-session.client.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/src/remote-session/remote-session.client.ts)) handles these API requests, allowing the remote panel to display trainer metadata without requiring separate authentication flows.

## Protocol and Message Structure

The WebSocket protocol uses strongly-typed messages defined in [`web-panel/protocol/messages.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/protocol/messages.ts). Key message types include:

- `RemoteCommandMessage` – Requests to launch or stop trainers (`remote_command`)
- `RemoteCommandResultMessage` – Success/failure responses (`remote_command_result`)
- `GameStatusMessage` – Live game state updates (`wand-remote-game-status`)

Downstream tools can interact with the system programmatically using standard WebSocket clients:

```typescript
// Connecting to the remote panel from an external tool
const ws = new WebSocket('ws://192.168.1.10:3223/remote/ws');
ws.onopen = () => {
  ws.send(JSON.stringify({
    type: 'remote_command',
    payload: { action: 'launch', gameId: '12345' }
  }));
};
ws.onmessage = (msg) => console.log('panel:', JSON.parse(msg.data));

```

## Summary

- **Wand Enhancer** modifies the Wand client by unpacking, patching, and repacking the `app.asar` archive using [`AsarExtractor.cs`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/AsarExtractor.cs) and [`AsarCreator.cs`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/AsarCreator.cs).
- The **Electron bridge** ([`runtime.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/runtime.ts)) establishes IPC channels for native-to-renderer communication, exposing internal Wand functionality to external systems.
- A **local web server** on port 3223 provides WebSocket endpoints that enable remote control from mobile devices and external tools.
- **Custom JavaScript injection** allows developers to extend functionality using Node.js APIs within the renderer's privileged context.
- **VPN integration** (such as Tailscale) enables secure remote access across networks without external dependencies.
- The system exposes the **WeMod access token** to authorized external tools for querying cheat metadata.

## Frequently Asked Questions

### How does Wand Enhancer modify the Wand client without breaking it?

Wand Enhancer creates a backup of the original `app.asar` before extraction. In [`WandEnhancer/Core/Enhancer.cs`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/WandEnhancer/Core/Enhancer.cs), the `Patch()` method uses surgical JavaScript injection to modify only specific bundle files while preserving the archive structure. After patching, `AsarCreator` rebuilds the archive, and a proxy DLL (`version.dll`) handles the loading of the bridge code without altering Wand's core executable.

### Can I use Wand Enhancer with VPNs like Tailscale?

Yes. The remote web panel runs on port 3223 by default, making it compatible with any VPN solution that provides LAN access. By connecting your mobile device to the same Tailscale network as your PC, you can access the WebSocket endpoint remotely without configuring port forwarding or exposing services to the public internet.

### What types of custom scripts can I inject?

You can inject any valid JavaScript file into the `renderer-scripts` folder. These scripts execute inside Electron's renderer process with full Node.js API access, including `fs`, `path`, and native modules. The bridge exposes the `WandEnhancer` global object for logging and configuration, and scripts can listen to `remote_command_result` messages via the standard `window.addEventListener` API.

### How does the remote panel communicate with the Wand client?

Communication occurs through a **WebSocket protocol** defined in [`web-panel/protocol/messages.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/web-panel/protocol/messages.ts). The bridge ([`runtime.ts`](https://github.com/k1tbyte/Wand-Enhancer/blob/main/runtime.ts)) registers IPC handlers that translate between WebSocket messages and Wand's internal Electron processes. Commands flow from the remote panel (port 3223) through the WebSocket, into the bridge's command handlers, and finally to the appropriate renderer window via `REMOTE_COMMAND_REQUEST_CHANNEL` and `REMOTE_COMMAND_RESPONSE_CHANNEL`.