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:

window.HackhubSDK

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

<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

<!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

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:

<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:

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

Website Exports

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

@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" },
    };
}

<!-- 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:

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;
    };
}

Browser Navigation (Websites only)

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

<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:

<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 Navigation (Phone apps only)

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

<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 is same-origin with the game, which is what makes the synchronous HackhubSDK calls and Exports above possible. It is an isolation boundary for layout and styling, not a security boundary: mod code is trusted code, so only install mods from authors you trust
• Asset paths are relative to your mod's root directory
• Apps, Phone Apps, and Websites all have access to the same Context Bridge