Skip to main content

Overview

The web interface provides a modern, responsive UI for managing Android devices and extracting APKs. It runs as a local Express.js server on port 3000 with a system tray icon for easy access.

Launching the Web Interface

1

Run the launcher

Double-click start-web.bat in the APK Extractor directory.The launcher will:
  • Check for Node.js installation
  • Install dependencies (npm install)
  • Start the server invisibly in the background
  • Create a system tray icon
  • Open your default browser to http://localhost:3000
2

Access from system tray

Look for the APK Extractor icon in the Windows system tray (bottom-right corner, near the clock).Right-click the icon to:
  • Abrir Interfaz Web - Reopen the browser
  • Apagar Servidor - Shut down the server
The server continues running even if you close the browser tab. Use the system tray icon or the red “Apagar Servidor” button in the web UI to stop it.

Interface Overview

Main Layout

The web interface consists of three main areas:

Device Sidebar

Lists all connected devices (USB and WiFi) with real-time updates

App List

Shows installed applications with search, filter, and sorting

Action Modals

Interactive dialogs for extraction, pairing, and settings

Device Sidebar

The left sidebar (or bottom bar on mobile) shows:
  • Connected devices with brand/model or custom name
  • Device indicators: USB or WiFi icon
  • Add device button for wireless debugging
  • Real-time updates - devices appear/disappear automatically
The sidebar uses polling every 4 seconds to detect device changes without page refresh.

Application List

The main panel displays:
  • App name (real application name, not package)
  • Package ID with copy button
  • Format: APK or Split APK
  • Size: Exact size in MB
  • Action buttons: Extract APK or Compile XAPK
  • User Apps (default) - Apps installed by the user
  • System Apps - Pre-installed system applications
  • All Apps - Both user and system apps

Key Features

Real-Time Device Monitoring

Devices are monitored automatically:
// Polling endpoint: /api/devices/poll
setInterval(async () => {
  const response = await fetch('/api/devices/poll');
  const { serials } = await response.json();
  // Update UI if device list changed
}, 4000);
Polling interval adjusts based on tab visibility: 2 seconds when active, 8 seconds when inactive to save resources.

Batch Info Loading

When you switch devices or filters, the app list loads instantly from cache, then fetches detailed info (format, size, names) in the background:
// Batch request for 100+ apps in parallel
POST /api/devices/:serial/apps/batch-info
{
  "packages": ["com.android.chrome", "com.whatsapp", ...]
}
A discreet progress popup shows: “Loading app details… 45 / 120 apps”
The UI remains fully usable while batch info loads. You can search, scroll, and even extract APKs immediately.

Intelligent Caching

The server caches:
  • ADB path - Loaded once at startup
  • Device info - Brand, model, Android version
  • App lists - Per device and filter type
  • Saved devices and device names
Switching between devices is instant because data is cached in memory.

Dark/Light Theme

Toggle between themes using the theme switcher:
  • Light mode: Clean white background with gray accents
  • Dark mode: Dark gray background with vibrant highlights
The theme preference is saved in browser localStorage.

Light Theme

Professional appearance with high contrast for readability

Dark Theme

Eye-friendly for nighttime use with glassmorphism effects

Console Viewer

Click the console icon (bottom-right corner) to view:
  • Server logs in real-time
  • ADB command output
  • Error messages and warnings
  • Connection events (device connected/disconnected)
The console streams logs using Server-Sent Events (SSE) from /api/logs/stream.
const eventSource = new EventSource('/api/logs/stream');
eventSource.onmessage = (event) => {
  const { ts, type, msg } = JSON.parse(event.data);
  // Display log entry with timestamp and color-coding
};
The console viewer is perfect for troubleshooting connection issues without needing a command prompt window.

Responsive Design

The interface adapts to different screen sizes:
  • Sidebar on the left
  • Full modals with backdrop blur
  • Hover effects and tooltips

Performance

The web interface is optimized for speed:

Asynchronous Operations

All ADB commands run asynchronously using Promise.all() for parallel execution:
// Fetch device info for multiple devices in parallel
const devices = await Promise.all(pending.map(async (serial) => {
  const props = await runAdb(
    `shell "getprop ro.product.manufacturer && getprop ro.product.model"`,
    serial, 5000
  );
  // ...
}));

Batch Processing

When loading 200+ apps, the server processes them all in parallel:
// Process all packages in parallel (server.js:350-402)
const entries = await Promise.all(packages.map(async (pkg) => {
  const [pathOut, dump] = await Promise.all([
    tryRunAdb(`shell pm path ${pkg}`, serial),
    tryRunAdb(`shell dumpsys package ${pkg}`, serial),
  ]);
  // ...
}));
Result: Hundreds of apps load in seconds, not minutes.

System Tray Integration

The systray2 module creates a native Windows tray icon:
const SysTray = require('systray2').default;

systray = new SysTray({
  menu: {
    icon: TRAY_ICON_BASE64,
    title: "APK Extractor",
    tooltip: "APK Extractor - Running on port 3000",
    items: [
      { title: "Abrir Interfaz Web" },
      { title: "Apagar Servidor" }
    ]
  }
});
The icon provides:
  • Quick access to reopen the browser
  • Easy server shutdown without finding the console window
  • Visual indicator that the server is running
If the system tray icon doesn’t appear, the server is still running but without the tray UI. Use the red “Apagar Servidor” button in the web interface instead.

Shutting Down

Three ways to stop the server:
Click the red “Apagar Servidor” button in the web interface (usually top-right).
The server will:
  1. Send shutdown confirmation
  2. Kill the system tray process
  3. Exit after 1 second

Troubleshooting

Manually navigate to http://localhost:3000 in any browser.
Another application is using port 3000. Either:
  • Stop the other application
  • Edit server.js to change const PORT = 3000; to another port
The systray2 module may have failed. The server still works - just access via browser. Check the console for errors.
  • Check USB cable connection
  • Enable USB debugging on the Android device
  • Authorize the PC on the device screen
  • Check ADB setup: visit http://localhost:3000/api/status
The batch info request is in progress. Wait a few seconds. If it persists:
  • The device may have disconnected
  • ADB may be unresponsive - try reconnecting the device
  • Check the console viewer for error messages

Next Steps

Extract APKs

Learn how to extract and download APK files

Wireless Debugging

Connect devices without USB cables

Device Management

Manage multiple devices and custom names

API Reference

Integrate with the REST API

Build docs developers (and LLMs) love