frida-float-menu 1.0.0

package/README.md

@@ -0,0 +1,404 @@
+# Frida Floating Menu UI Library
+
+A TypeScript library for creating interactive floating windows on Android devices with UI components (buttons, switches, text, selectors) that can be controlled from JavaScript. Designed for Frida instrumentation and reverse engineering.
+
+## Features
+
+- Create floating overlay windows using Android's `WindowManager`
+- Add interactive UI components: Button, Switch, Text label, Selector (dropdown), Slider, Collapsible panel, Category header, TextInput, NumberInput
+- Two-way data binding: JavaScript variables ↔ UI state synchronization
+- Event system for UI interactions (clicks, value changes)
+- Update UI components programmatically from JavaScript
+- Optional log panel to display runtime logs (can be disabled for performance)
+- Set window icon via base64-encoded image
+- Modular, extensible architecture
+- TypeScript support with full type definitions
+
+## Requirements
+
+- Frida (tested on Android)
+- Target Android app with overlay permission (`TYPE_APPLICATION_OVERLAY`, API 26+)
+- Frida-compile for TypeScript compilation (included as dev dependency)
+
+## Installation
+
+### As a library in your Frida project
+
+1. Copy the `src/` directory to your project
+2. Import the library in your TypeScript files:
+
+```typescript
+import { FloatMenu, Button, Switch } from './path/to/src/index';
+```
+
+### As a standalone package (conceptual)
+
+Since this is a library, you typically include the source code in your project rather than installing from npm.
+
+## Quick Start
+
+### 1. Create a TypeScript file (`my-script.ts`)
+
+```typescript
+import { FloatMenu, Button, Switch, Text, Selector } from './src/index';
+
+Java.perform(() => {
+    // Create floating menu
+    const menu = new FloatMenu({
+        width: 300,
+        height: 400,
+        x: 100,
+        y: 100,
+        showLogs: true
+    });
+
+    menu.show();
+
+    // Add components
+    const button = new Button('myButton', 'Click Me');
+    button.setOnClick(() => {
+        console.log('Button clicked!');
+    });
+    menu.addComponent('myButton', button);
+
+    const switchComp = new Switch('mySwitch', 'Enable Feature', false);
+    switchComp.on('valueChanged', (value: boolean) => {
+        console.log('Switch:', value);
+    });
+    menu.addComponent('mySwitch', switchComp);
+});
+```
+
+### 2. Compile with frida-compile
+
+```bash
+frida-compile my-script.ts -o my-script.js -c
+```
+
+### 3. Inject into target
+
+```bash
+frida -U -f com.example.app -l my-script.js
+```
+
+## API Reference
+
+### FloatMenu
+
+Main class for creating and managing floating windows.
+
+```typescript
+interface TabDefinition {
+    id: string;              // Unique tab identifier
+    label: string;           // Display label for tab button
+}
+
+interface FloatMenuOptions {
+    width?: number;           // Window width (default: 1000)
+    height?: number;          // Window height (default: 900)
+    x?: number;              // X position (default: 100)
+    y?: number;              // Y position (default: 100)
+    iconVisible?: boolean;    // Show icon initially (default: true)
+    iconWidth?: number;       // Icon width (default: 200)
+    iconHeight?: number;      // Icon height (default: 200)
+    iconBase64?: string;      // Base64-encoded icon image (optional)
+    showLogs?: boolean;       // Show log panel (default: false)
+    logMaxLines?: number;     // Max lines in log panel (default: 100)
+    title?: string;           // Main title text (default: "Frida Float Menu")
+    subtitle?: string;        // Subtitle text (default: "Interactive Debugging Panel")
+    showHeader?: boolean;     // Whether to show header (default: true)
+    showFooter?: boolean;     // Whether to show footer (default: true)
+    tabs?: TabDefinition[];   // Tab definitions (optional)
+    activeTab?: string;       // Initially active tab ID (default: first tab or "default")
+    showTabs?: boolean;       // Whether to show tab bar (default: true if tabs are defined)
+}
+
+class FloatMenu {
+    constructor(options?: FloatMenuOptions);
+    show(): void;                    // Display window
+    hide(): void;                    // Hide and destroy window
+    addComponent(id: string, component: UIComponent, tabId?: string): void;
+    removeComponent(id: string): void;
+    getComponent<T extends UIComponent>(id: string): T | undefined;
+    setComponentValue(id: string, value: any): void;
+    switchTab(tabId: string): void;  // Switch to a different tab
+    getActiveTabId(): string;        // Get currently active tab ID
+    on(event: string, callback: (...args: any[]) => void): void;
+    off(event: string, callback: (...args: any[]) => void): void;
+    setPosition(x: number, y: number): void;
+    setSize(width: number, height: number): void;
+    clearLogs(): void;
+    showIcon(): void;                // Minimize to icon
+    showMenu(): void;                // Expand to menu
+    toggleView(): void;              // Toggle between icon and menu
+}
+```
+
+### UI Components
+
+All components extend `UIComponent` base class.
+
+#### Button
+```typescript
+class Button extends UIComponent {
+    constructor(id: string, label: string);
+    setOnClick(handler: () => void): void;
+    setLabel(label: string): void;
+    // Emits 'click' event
+}
+```
+
+#### Switch
+```typescript
+class Switch extends UIComponent {
+    constructor(id: string, label: string, initialValue?: boolean);
+    setLabel(label: string): void;
+    // Emits 'valueChanged' event with boolean value
+}
+```
+
+#### Text
+```typescript
+class Text extends UIComponent {
+    constructor(id: string, content: string);
+    setText(content: string): void;
+}
+```
+
+#### Selector (Dropdown)
+```typescript
+class Selector extends UIComponent {
+    constructor(id: string, items: string[], selectedIndex?: number);
+    setItems(items: string[]): void;
+    getSelectedIndex(): number;
+    // Emits 'valueChanged' event with selected string
+}
+```
+
+#### Slider (SeekBar)
+```typescript
+class Slider extends UIComponent {
+    constructor(id: string, label: string, min: number, max: number, initialValue?: number, step?: number);
+    setLabel(label: string): void;
+    setRange(min: number, max: number, step?: number): void;
+    // Emits 'valueChanged' event with numeric value
+}
+```
+
+#### Collapsible (Expandable Panel)
+```typescript
+class Collapsible extends UIComponent {
+    constructor(id: string, title: string, expanded?: boolean);
+    setTitle(title: string): void;
+    toggle(): void;                    // Toggle expanded/collapsed state
+    expand(): void;                    // Expand panel
+    collapse(): void;                  // Collapse panel
+    addChildView(view: any): void;     // Add child component view
+    removeChildView(view: any): void;  // Remove child component view
+    clearChildren(): void;             // Remove all child views
+    // Emits 'toggle', 'expand', 'collapse' events
+}
+```
+
+#### Category (Section Header)
+```typescript
+class Category extends UIComponent {
+    constructor(id: string, label: string);
+    setLabel(label: string): void;
+}
+```
+
+#### TextInput (EditText)
+```typescript
+class TextInput extends UIComponent {
+    constructor(id: string, initialValue?: string, hint?: string, multiline?: boolean);
+    setHint(hint: string): void;
+    setMultiline(multiline: boolean): void;
+    getText(): string;
+    setText(text: string): void;
+    // Emits 'valueChanged' event with string value
+}
+```
+
+#### NumberInput (Numeric EditText)
+```typescript
+class NumberInput extends UIComponent {
+    constructor(id: string, initialValue?: number, hint?: string, min?: number, max?: number, step?: number);
+    setHint(hint: string): void;
+    setConstraints(min: number | null, max: number | null, step: number | null): void;
+    getNumber(): number;
+    setNumber(value: number): void;
+    // Emits 'valueChanged' event with numeric value
+}
+```
+
+### Event System
+
+Components emit events that can be listened to:
+
+```typescript
+// Component-level events
+component.on('valueChanged', (value) => { /* Switch or Selector value changed */ });
+component.on('click', () => { /* Button clicked */ });
+
+// Menu forwards component events with IDs
+menu.on('component:mySwitch:valueChanged', (value) => {
+    console.log('Switch with ID "mySwitch" changed to:', value);
+});
+
+// Tab change events
+menu.on('tabChanged', (newTabId: string, oldTabId: string) => {
+    console.log(`Tab changed from ${oldTabId} to ${newTabId}`);
+});
+```
+
+### Logger
+
+Optional logging system with configurable levels:
+
+```typescript
+import { Logger, LogLevel } from './src/index';
+
+const logger = new Logger('debug'); // 'debug' | 'info' | 'warn' | 'error' | 'none'
+logger.info('Message');
+logger.debug('Debug info');
+```
+
+## Examples
+
+### Basic Example
+
+See `example.ts` for a complete TypeScript example with all components.
+
+### Tabbed Interface Example
+
+Create a floating menu with multiple tabs:
+
+```typescript
+const menu = new FloatMenu({
+    width: 1000,
+    height: 900,
+    tabs: [
+        { id: "controls", label: "Controls" },
+        { id: "settings", label: "Settings" },
+        { id: "info", label: "Info" }
+    ],
+    activeTab: "controls",
+    showTabs: true,
+    title: "Multi-tab Menu",
+    subtitle: "Organize your UI in tabs"
+});
+
+menu.show();
+
+// Add components to specific tabs
+const button = new Button("btn1", "Click Me");
+menu.addComponent("btn1", button, "controls");
+
+const switchComp = new Switch("switch1", "Enable", false);
+menu.addComponent("switch1", switchComp, "settings");
+
+// Listen for tab changes
+menu.on("tabChanged", (newTabId, oldTabId) => {
+    console.log(`Tab changed: ${oldTabId} -> ${newTabId}`);
+});
+
+// Switch tabs programmatically
+menu.switchTab("settings");
+```
+
+### Global Attachment (for simple scripts)
+
+If you prefer global variables instead of imports:
+
+```typescript
+import { attachToGlobal } from './src/index';
+attachToGlobal(globalThis);
+
+// Now classes are available globally
+Java.perform(() => {
+    const menu = new FloatMenu({ width: 300, height: 400 });
+    menu.show();
+});
+```
+
+### Dynamic UI Updates
+
+```typescript
+// Update UI from JavaScript
+setTimeout(() => {
+    menu.setComponentValue('mySwitch', true); // Turn switch on
+    const textComp = menu.getComponent<Text>('myText');
+    if (textComp) {
+        textComp.setText('Updated!');
+    }
+}, 5000);
+```
+
+### New Components Demo
+
+A comprehensive demo showcasing all new UI components is available in `demo-new-components.ts`:
+
+```bash
+# Build the demo
+npm run build:demo
+
+# Run the demo with Frida
+npm run frida:demo
+
+# Or compile manually
+frida-compile demo-new-components.ts -o demo-new-components-compiled.js -c
+frida -U -f com.example.app -l demo-new-components-compiled.js
+```
+
+The demo demonstrates:
+- **Slider**: Range control with min/max/step constraints
+- **Collapsible**: Expandable/collapsible panels with child components
+- **Category**: Section headers for organizing UI
+- **TextInput**: Single and multi-line text entry
+- **NumberInput**: Numeric input with validation and constraints
+- **Interaction**: Components communicating with each other
+
+## Project Structure
+
+```
+frida-float-menu/
+├── src/                    # Library source code
+│   ├── index.ts           # Main entry point (re-exports everything)
+│   ├── event-emitter.ts   # Event system
+│   ├── logger.ts          # Logging utilities
+│   ├── ui-components.ts   # UI component definitions (all components)
+│   └── float-menu.ts      # FloatMenu main class
+├── example.ts             # TypeScript usage example (basic components)
+├── demo-new-components.ts # TypeScript demo for new components
+├── example.js             # JavaScript usage example
+├── package.json           # Package configuration
+└── README.md              # This file
+```
+
+## Building and Development
+
+### For library users
+No build required - use the TypeScript source directly with frida-compile.
+
+### For library developers
+```bash
+npm install                 # Install dependencies
+npm run check              # Type-check without emitting
+npm run build-example      # Build example script
+```
+
+## Limitations
+
+- Requires Android API level 26+ for `TYPE_APPLICATION_OVERLAY`
+- UI operations automatically scheduled on main thread
+- Uses default Android widgets (no custom styling)
+- Tested on Android only (not iOS)
+
+## License
+
+MIT
+
+## Contributing
+
+Contributions are welcome! Please submit issues and pull requests to enhance the library.

package/lib/api.d.ts

@@ -0,0 +1,50 @@
+export declare const API: {
+    readonly ImageView: Java.Wrapper<{}>;
+    readonly ImageViewScaleType: Java.Wrapper<{}>;
+    readonly FrameLayoutParams: Java.Wrapper<{}>;
+    readonly Gravity: Java.Wrapper<{}>;
+    readonly DialogMultiChoiceListener: Java.Wrapper<{}>;
+    readonly DialogClickListener: Java.Wrapper<{}>;
+    readonly HorizontalScrollView: Java.Wrapper<{}>;
+    readonly Context: Java.Wrapper<{}>;
+    readonly GradientDrawable: Java.Wrapper<{}>;
+    readonly BitmapFactory: Java.Wrapper<{}>;
+    readonly Base64: Java.Wrapper<{}>;
+    readonly Button: Java.Wrapper<{}>;
+    readonly Color: Java.Wrapper<{}>;
+    readonly ViewManager: Java.Wrapper<{}>;
+    readonly JString: Java.Wrapper<{}>;
+    readonly View: Java.Wrapper<{}>;
+    readonly GridLayout: Java.Wrapper<{}>;
+    readonly CheckBox: Java.Wrapper<{}>;
+    readonly SeekBar: Java.Wrapper<{}>;
+    readonly Html: Java.Wrapper<{}>;
+    readonly SeekBarOnSeekBarChangeListener: Java.Wrapper<{}>;
+    readonly AdapterViewOnItemSelectedListener: Java.Wrapper<{}>;
+    readonly Spinner: Java.Wrapper<{}>;
+    readonly ArrayAdapter: Java.Wrapper<{}>;
+    readonly R_layout: Java.Wrapper<{}>;
+    readonly DialogInterfaceOnClickListener: Java.Wrapper<{}>;
+    readonly AlertDialogBuilder: Java.Wrapper<{}>;
+    readonly AlertDialog: Java.Wrapper<{}>;
+    readonly OnTouchListener: Java.Wrapper<{}>;
+    readonly MotionEvent: Java.Wrapper<{}>;
+    readonly EditText: Java.Wrapper<{}>;
+    readonly Point: Java.Wrapper<{}>;
+    readonly DisplayMetrics: Java.Wrapper<{}>;
+    readonly TextViewBufferType: Java.Wrapper<{}>;
+    readonly InputType: Java.Wrapper<{}>;
+    readonly GridLayoutParams: Java.Wrapper<{}>;
+    readonly Switch: Java.Wrapper<{}>;
+    readonly OnCheckedChangeListener: Java.Wrapper<{}>;
+    readonly CompoundButtonOnCheckedChangeListener: Java.Wrapper<{}>;
+    readonly TextView: Java.Wrapper<{}>;
+    readonly OnClickListener: Java.Wrapper<{}>;
+    readonly FrameLayout: Java.Wrapper<{}>;
+    readonly ViewGroupLayoutParams: Java.Wrapper<{}>;
+    readonly LayoutParams: Java.Wrapper<{}>;
+    readonly BuildVERSION: Java.Wrapper<{}>;
+    readonly LinearLayout: Java.Wrapper<{}>;
+    readonly LinearLayoutParams: Java.Wrapper<{}>;
+    readonly ScrollView: Java.Wrapper<{}>;
+};

package/lib/api.js

@@ -0,0 +1,149 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.API = void 0;
+exports.API = {
+    get ImageView() {
+        return Java.use("android.widget.ImageView");
+    },
+    get ImageViewScaleType() {
+        return Java.use("android.widget.ImageView$ScaleType");
+    },
+    get FrameLayoutParams() {
+        return Java.use("android.widget.FrameLayout$LayoutParams");
+    },
+    get Gravity() {
+        return Java.use("android.view.Gravity");
+    },
+    get DialogMultiChoiceListener() {
+        return Java.use("android.content.DialogInterface$OnMultiChoiceClickListener");
+    },
+    get DialogClickListener() {
+        return Java.use("android.content.DialogInterface$OnClickListener");
+    },
+    get HorizontalScrollView() {
+        return Java.use("android.widget.HorizontalScrollView");
+    },
+    get Context() {
+        return Java.use("android.content.Context");
+    },
+    get GradientDrawable() {
+        return Java.use("android.graphics.drawable.GradientDrawable");
+    },
+    get BitmapFactory() {
+        return Java.use("android.graphics.BitmapFactory");
+    },
+    get Base64() {
+        return Java.use("android.util.Base64");
+    },
+    get Button() {
+        return Java.use("android.widget.Button");
+    },
+    get Color() {
+        return Java.use("android.graphics.Color");
+    },
+    get ViewManager() {
+        return Java.use("android.view.ViewManager");
+    },
+    get JString() {
+        return Java.use("java.lang.String");
+    },
+    get View() {
+        return Java.use("android.view.View");
+    },
+    get GridLayout() {
+        return Java.use("android.widget.GridLayout");
+    },
+    get CheckBox() {
+        return Java.use("android.widget.CheckBox");
+    },
+    get SeekBar() {
+        return Java.use("android.widget.SeekBar");
+    },
+    get Html() {
+        return Java.use("android.text.Html");
+    },
+    get SeekBarOnSeekBarChangeListener() {
+        return Java.use("android.widget.SeekBar$OnSeekBarChangeListener");
+    },
+    get AdapterViewOnItemSelectedListener() {
+        return Java.use("android.widget.AdapterView$OnItemSelectedListener");
+    },
+    get Spinner() {
+        return Java.use("android.widget.Spinner");
+    },
+    get ArrayAdapter() {
+        return Java.use("android.widget.ArrayAdapter");
+    },
+    get R_layout() {
+        return Java.use("android.R$layout");
+    },
+    get DialogInterfaceOnClickListener() {
+        return Java.use("android.content.DialogInterface$OnClickListener");
+    },
+    get AlertDialogBuilder() {
+        return Java.use("android.app.AlertDialog$Builder");
+    },
+    get AlertDialog() {
+        return Java.use("android.app.AlertDialog");
+    },
+    get OnTouchListener() {
+        return Java.use("android.view.View$OnTouchListener");
+    },
+    get MotionEvent() {
+        return Java.use("android.view.MotionEvent");
+    },
+    get EditText() {
+        return Java.use("android.widget.EditText");
+    },
+    get Point() {
+        return Java.use("android.graphics.Point");
+    },
+    get DisplayMetrics() {
+        return Java.use("android.util.DisplayMetrics");
+    },
+    get TextViewBufferType() {
+        return Java.use("android.widget.TextView$BufferType");
+    },
+    get InputType() {
+        return Java.use("android.text.InputType");
+    },
+    get GridLayoutParams() {
+        return Java.use("android.widget.GridLayout$LayoutParams");
+    },
+    get Switch() {
+        return Java.use("android.widget.Switch");
+    },
+    get OnCheckedChangeListener() {
+        return Java.use("android.widget.CompoundButton$OnCheckedChangeListener");
+    },
+    get CompoundButtonOnCheckedChangeListener() {
+        return Java.use("android.widget.CompoundButton$OnCheckedChangeListener");
+    },
+    get TextView() {
+        return Java.use("android.widget.TextView");
+    },
+    get OnClickListener() {
+        return Java.use("android.view.View$OnClickListener");
+    },
+    get FrameLayout() {
+        return Java.use("android.widget.FrameLayout");
+    },
+    get ViewGroupLayoutParams() {
+        return Java.use("android.view.ViewGroup$LayoutParams");
+    },
+    get LayoutParams() {
+        return Java.use("android.view.WindowManager$LayoutParams");
+    },
+    get BuildVERSION() {
+        return Java.use("android.os.Build$VERSION");
+    },
+    get LinearLayout() {
+        return Java.use("android.widget.LinearLayout");
+    },
+    get LinearLayoutParams() {
+        return Java.use("android.widget.LinearLayout$LayoutParams");
+    },
+    get ScrollView() {
+        return Java.use("android.widget.ScrollView");
+    },
+};

package/lib/component/button.d.ts

@@ -0,0 +1,11 @@
+import { UIComponent } from "./ui-components";
+export declare class Button extends UIComponent {
+    private label;
+    private handler;
+    private kind;
+    constructor(id: string, label: string, kind?: "primary" | "danger");
+    protected createView(context: any): void;
+    protected updateView(): void;
+    setLabel(label: string): void;
+    setOnClick(handler: () => void): void;
+}

package/lib/component/button.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const api_1 = require("../api");
+const style_1 = require("./style/style");
+const ui_components_1 = require("./ui-components");
+class Button extends ui_components_1.UIComponent {
+    constructor(id, label, kind = "primary") {
+        super(id);
+        this.handler = null;
+        this.kind = "primary";
+        this.label = label;
+        this.kind = kind;
+        this.value = null;
+    }
+    createView(context) {
+        const Button = api_1.API.Button;
+        this.view = Button.$new(context);
+        const String = api_1.API.JString;
+        this.view.setText(String.$new(this.label));
+        (0, style_1.applyStyle)(this.view, this.kind === "danger" ? "dangerButton" : "primaryButton", this.menu.options.theme);
+        const OnClickListener = api_1.API.OnClickListener;
+        const self = this;
+        const clickListener = Java.registerClass({
+            name: "com.frida.MyClickListener" +
+                Date.now() +
+                Math.random().toString(36).substring(6),
+            implements: [OnClickListener],
+            methods: {
+                onClick: function (v) {
+                    self.emit("click");
+                    if (self.handler) {
+                        setImmediate(self.handler);
+                    }
+                },
+            },
+        });
+        this.view.setOnClickListener(clickListener.$new());
+    }
+    updateView() {
+    }
+    setLabel(label) {
+        this.label = label;
+        if (!this.view) {
+            console.warn(`[Button:${this.id}] Cannot set label - view not initialized`);
+            return;
+        }
+        Java.scheduleOnMainThread(() => {
+            const String = api_1.API.JString;
+            this.view.setText(String.$new(label));
+        });
+    }
+    setOnClick(handler) {
+        this.handler = handler;
+    }
+}
+exports.Button = Button;

package/lib/component/category.d.ts

@@ -0,0 +1,8 @@
+import { UIComponent } from "./ui-components";
+export declare class Category extends UIComponent {
+    private label;
+    constructor(id: string, label: string);
+    protected createView(context: any): void;
+    protected updateView(): void;
+    setLabel(label: string): void;
+}