WebView Context Bridge

When your mod creates an App, Phone App, or Website, the HTML content is rendered inside a WebView. The game provides a Context Bridge — a global HackhubSDK object — that gives your HTML/JS code direct access to all mod APIs.

How It Works

Your WebView automatically has access to the full SDK through the HackhubSDK global:

javascript

window.HackhubSDK

Relative asset paths in your HTML resolve automatically via the mod-asset:// protocol, so you can reference your mod's assets naturally:

html

<img src="images/logo.png" />
<link rel="stylesheet" href="styles/app.css" />

Available APIs

The Context Bridge exposes these namespaces:

Namespace	Description
`HackhubSDK.Files`	Virtual file system
`HackhubSDK.Network`	Network simulation
`HackhubSDK.Events`	Event system
`HackhubSDK.Mail`	Email system
`HackhubSDK.Bank`	Banking system
`HackhubSDK.UI`	Notifications and toasts
`HackhubSDK.Storage`	Persistent mod storage (global across saves)
`HackhubSDK.SaveStorage`	Per-save persistent mod storage
`HackhubSDK.Variables`	Session-only mod variables
`HackhubSDK.SharedStorage`	Shared persistent storage
`HackhubSDK.SharedVariables`	Shared session variables
`HackhubSDK.Shell`	Terminal access
`HackhubSDK.Twotter`	Social media platform
`HackhubSDK.Kisscord`	Messaging app
`HackhubSDK.WeeChat`	IRC chat
`HackhubSDK.Random`	Random utilities
`HackhubSDK.ModSettings`	Mod settings
`HackhubSDK.Theme`	Theme management
`HackhubSDK.Desktop`	Desktop widgets
`HackhubSDK.Menu`	Menu extensions
`HackhubSDK.ContextMenu`	Right-click context menus
`HackhubSDK.Handbook`	Register in-game handbook articles
`HackhubSDK.Browser`	In-game browser navigation (Websites only)
`HackhubSDK.Phone`	Phone navigation: pages, title, back, alerts (Phone apps only)
`HackhubSDK.modId`	Current mod's ID (string)

All APIs behave identically to their script-side counterparts documented in the API Reference.

Usage Example

html

<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
</head>
<body>
    <button onclick="sendMoney()">Pay $100</button>
    <script>
        function sendMoney() {
            HackhubSDK.Bank.transaction({
                amount: 100,
                description: "Payment from app",
                from: { IBAN: "DE123456", name: "My App" }
            });
            HackhubSDK.UI.toast("Payment sent!", "success");
        }
    </script>
</body>
</html>

Exports

Both App and Website classes support an Exports property. Any functions or values you define there become directly accessible as globals in your HTML code.

Defining Exports

typescript

import { App, RegisterApp } from "@hotbunny/hackhub-content-sdk";
import appHTML from "./app.html";

@RegisterApp
export class PasswordGenerator extends App {
    AppName = "PasswordGenerator";
    Title = "Password Generator";
    Icon = "./assets/icon.png";
    HTML = appHTML;
    DefaultSize = { width: 400, height: 300 };

    Exports = {
        generate: (length: number) => {
            const chars = "abcdefghijklmnopqrstuvwxyz0123456789!@#$%";
            return Array.from({ length }, () => chars[Math.floor(Math.random() * chars.length)]).join("");
        },
        appVersion: "1.2.0",
    };
}

Using Exports in HTML

Exported functions and values are available directly as globals:

html

<script>
    // Directly callable — no prefix needed
    const pw = generate(16);
    document.getElementById("result").textContent = pw;
    console.log("App version:", appVersion);
</script>

They're also accessible via window.ModExports if you prefer explicit access:

javascript

const pw = window.ModExports.generate(16);

Website Exports

Works the same way for Websites — exports are shared across all pages:

typescript

@RegisterWebsite
export class HackerForum extends Website {
    SiteName = "Hacker Forum";
    Host = "hackerforum.net";
    Icon = "./assets/icon.png";
    Pages = [
        { path: "/", title: "Home", html: homePage },
        { path: "/about", title: "About", html: aboutPage },
    ];

    Exports = {
        formatPost: (text: string) => text.toUpperCase(),
        siteConfig: { maxPosts: 50, theme: "dark" },
    };
}

html

<!-- Available in all pages of this website -->
<script>
    const formatted = formatPost("hello world");
    console.log(siteConfig.theme); // "dark"
</script>

TypeScript Support

For type checking in your HTML files, you can declare the global:

typescript

declare global {
    const HackhubSDK: {
        Files: typeof import("@hotbunny/hackhub-content-sdk").Files;
        Network: typeof import("@hotbunny/hackhub-content-sdk").Network;
        Events: typeof import("@hotbunny/hackhub-content-sdk").Events;
        Bank: typeof import("@hotbunny/hackhub-content-sdk").Bank;
        UI: typeof import("@hotbunny/hackhub-content-sdk").UI;
        Mail: typeof import("@hotbunny/hackhub-content-sdk").Mail;
        Shell: typeof import("@hotbunny/hackhub-content-sdk").Shell;
        Storage: typeof import("@hotbunny/hackhub-content-sdk").Storage;
        SaveStorage: typeof import("@hotbunny/hackhub-content-sdk").SaveStorage;
        Variables: typeof import("@hotbunny/hackhub-content-sdk").Variables;
        SharedStorage: typeof import("@hotbunny/hackhub-content-sdk").SharedStorage;
        SharedVariables: typeof import("@hotbunny/hackhub-content-sdk").SharedVariables;
        Twotter: typeof import("@hotbunny/hackhub-content-sdk").Twotter;
        Kisscord: typeof import("@hotbunny/hackhub-content-sdk").Kisscord;
        WeeChat: typeof import("@hotbunny/hackhub-content-sdk").WeeChat;
        Random: typeof import("@hotbunny/hackhub-content-sdk").Random;
        ModSettings: typeof import("@hotbunny/hackhub-content-sdk").ModSettings;
        Theme: typeof import("@hotbunny/hackhub-content-sdk").Theme;
        Desktop: typeof import("@hotbunny/hackhub-content-sdk").Desktop;
        Menu: typeof import("@hotbunny/hackhub-content-sdk").Menu;
        ContextMenu: typeof import("@hotbunny/hackhub-content-sdk").ContextMenu;
        Handbook: typeof import("@hotbunny/hackhub-content-sdk").Handbook;
        Browser: {
            navigate(url: string): void;
            push(url: string): void;
        };
        modId: string;
    };
}

Website WebViews have access to HackhubSDK.Browser for navigating the in-game browser:

html

<script>
    // Navigate to another page on your site
    HackhubSDK.Browser.navigate("https://mysite.com/about");

    // Navigate to a different website
    HackhubSDK.Browser.navigate("https://goagle.com");
</script>

Method	Description
`Browser.navigate(url)`	Navigate the browser to the given URL
`Browser.push(url)`	Push a new URL to the browser history

Standard <a> tags also work automatically — clicking a link in your website HTML will navigate the in-game browser to the target page:

html

<a href="/about">About Us</a>
<a href="https://otherdomain.com">External Link</a>

INFO

HackhubSDK.Browser is only available in Website WebViews, not in App, Phone App, or Desktop Widget WebViews.

Phone App WebViews have access to HackhubSDK.Phone, which drives the phone's native navigation chrome (title bar + back button) and alerts:

html

<script>
    HackhubSDK.Phone.setTitle("Wallet");        // set the header title
    HackhubSDK.Phone.pushPage("Details");        // open a sub-page (shows a back button)
    HackhubSDK.Phone.onBack(() => showMainView()); // react to the native back button
    HackhubSDK.Phone.alert({ title: "Wallet", message: "Saved!" });
    // HackhubSDK.Phone.popPage();  HackhubSDK.Phone.close();
</script>

Method	Description
`Phone.setTitle(title)`	Set the current header title
`Phone.pushPage(title)`	Open a sub-page — the header shows a back button
`Phone.popPage()`	Go back one page programmatically
`Phone.onBack(callback)`	Called when the user taps the native back button
`Phone.alert(options)`	Show an iOS-style alert box (`{ title?, message, buttons? }`)
`Phone.close()`	Close the app and return to the home screen

See the Phone Apps guide for a full example.

INFO

HackhubSDK.Phone is only available in Phone App WebViews.

Notes

APIs respect the same permission system as the main mod code
The WebView runs in a sandboxed environment for security
Asset paths are relative to your mod's root directory
Apps, Phone Apps, and Websites all have access to the same Context Bridge

WebView Context Bridge

How It Works

Available APIs

Usage Example

Exports

Defining Exports

Using Exports in HTML

Website Exports

TypeScript Support

Browser Navigation (Websites only)

Phone Navigation (Phone apps only)

Notes

WebView Context Bridge ​

How It Works ​

Available APIs ​

Usage Example ​

Exports ​

Defining Exports ​

Using Exports in HTML ​

Website Exports ​

TypeScript Support ​

Browser Navigation (Websites only) ​

Phone Navigation (Phone apps only) ​

Notes ​

WebView Context Bridge

How It Works

Available APIs

Usage Example

Exports

Defining Exports

Using Exports in HTML

Website Exports

TypeScript Support

Browser Navigation (Websites only)

Phone Navigation (Phone apps only)

Notes