Preload Scripting & Injection

Relevant source files

The following files were used as context for generating this wiki page:

• src/preload/index.ts
• src/main/index.ts
• src/preload/settings-modal.ts
• src/main/dialogs.ts
• src/main/chat-head.ts
• CLAUDE.md
• AGENTS.md

Preload scripting and code injection form the core architectural bridge between the Electron main process and the Messenger web environment. This system allows the application to enhance the standard messenger.com experience with desktop-native features, privacy controls, and UI modifications that are not possible through standard web browsing. By utilizing Electron's preload scripts, the application securely exposes IPC (Inter-Process Communication) channels and modifies the execution environment of the renderer process before the web content even begins to load.

The injection system is primarily divided into two categories: Preload Bridges, which establish secure communication channels via contextBridge, and Runtime Injection, which involves the execution of JavaScript and CSS directly within the web page context to alter DOM behavior or visual styling.

Sources: src/preload/index.ts, src/main/index.ts, CLAUDE.md

Core Architecture & IPC Bridge

The application uses a security-focused architecture where the preload script acts as a gatekeeper. It leverages contextBridge.exposeInMainWorld to provide a limited, safe API to the Messenger renderer process, ensuring that the web page cannot access sensitive Electron or Node.js APIs directly.

The IPC Communication Flow

The following diagram illustrates how the Preload script mediates communication between the untrusted web content and the Electron main process.

The bridge allows the main process to push configuration updates and triggers to the renderer, while the renderer can request native actions like showing input dialogs or notifications.
Sources: src/preload/index.ts:109-125, CLAUDE.md:58-62

Network & WebSocket Interception

A significant portion of the preload system is dedicated to intercepting network traffic to implement privacy features. This is achieved by wrapping the native WebSocket constructor and monitoring postMessage or AJAX traffic through main-process level webRequest filters.

WebSocket Proxying

The preload script defines a WebSocketProxy that wraps the global window.WebSocket object. This proxy inspects the send method's payload to detect and block specific signals, such as typing indicators and active status updates, before they reach Facebook's servers.

Privacy Enforcement Mechanisms

Feature	Mechanism	Implementation Detail
Read Receipt Blocking	Visibility Override	Patches document.hidden to return true and visibilityState to 'hidden'.
Typing Indicator	WebSocket Filter	Intercepts frames containing is_typing and drops them.
Active Status	WebSocket Filter	Blocks payloads like USER_ACTIVITY_UPDATE or presence.
Link Previews	CSS Injection	Injects styles to hide div[data-testid*="link-preview"].

Sources: src/preload/index.ts:70-80, src/preload/index.ts:468-510, src/main/index.ts:210-230

Script & Feature Injection

The system performs deep injection to modify Messenger's behavior. Key features like Invisible Ink, Unsend Detection, and the Typing Overlay rely on a combination of DOM observation and event interception.

Invisible Ink (Steganography)

This feature uses Zero-Width characters (\u200B, \u200C, \u200D) to hide secret text within innocent-looking phrases. The preload script injects a toggle button into the Messenger UI and monitors incoming messages using a MutationObserver to decode hidden payloads on the fly.
Sources: src/preload/index.ts:634-754

Typing Overlay (Experimental)

To bypass native typing signals entirely, the application can inject a "stealth" overlay.

1. It locates the Messenger message input (the textbox role).
2. It makes the original input invisible (opacity: 0).
3. It creates a floating div perfectly aligned with the original input.
4. User input is captured in the overlay and only "tunneled" into the real input when the user presses Enter to send.

Sources: src/preload/index.ts:167-270, src/main/index.ts:1170-1175

CSS Injection & Theme System

Visual modifications are handled via mainWindow.webContents.insertCSS. The application supports multiple theme types and layout modes by injecting specific CSS blocks at runtime.

Injection Categories

• Built-in Themes: Extracted from themes.css using regex and injected as persistent styles.
• Feature-Specific CSS: Inline styles for "Focus Mode" (hiding sidebars) or "Modern Look" (applying glassmorphism).
• Custom User CSS: Injected from the electron-store configuration.

Native UI Integration via Preload

The preload script also facilitates native UI elements that appear to be part of the web page but are backed by Electron dialogs.

Input & Selection Dialogs

Since standard prompt() and confirm() are often disabled or undesirable in a desktop wrapper, the application implements its own sandboxed dialog system.

• Implementation: src/main/dialogs.ts creates a small, modal BrowserWindow.
• Preload Role: The dialog window uses its own preload script (src/preload/dialog.cjs) to handle input submission back to the main process via unique IPC channels.

Sources: src/main/dialogs.ts:15-30, src/preload/index.ts:103-110

Summary

The Preload Scripting & Injection system is the engine behind "Messenger Unleashed." It transforms a standard web view into a feature-rich desktop client by proxying network traffic (WebSockets), hijacking global browser APIs (Visibility/Notifications), and manipulating the DOM through sophisticated observation and injection techniques. This architecture ensures that even as the Messenger web platform changes, the application can maintain its enhanced privacy and productivity features through robust injection hooks.