
Electron App Extract
FreeDecompile and inspect Electron applications with ease.
Free · Opens the source repo
What Electron App Extract does
Electron App Extract is a specialized tool designed for developers and designers who need to delve into the inner workings of Electron applications. By extracting resources and JavaScript from an installed Electron app's app.asar file, this skill allows users to recover original source files when .js.map files are available. In cases where source maps are not present, the skill formats the minified code using Prettier for better readability. This functionality is particularly useful for understanding how popular desktop applications are built or for debugging purposes.
The skill operates seamlessly on both macOS and Windows platforms, making it versatile for a wide range of users. It intelligently skips node_modules, focusing on the core application code and resources. When a user provides an app name or an absolute path, the skill handles the discovery of the relevant files, ensuring that the extraction process is straightforward and efficient. The output is organized into directories that clearly indicate the status of the extraction and restoration processes, allowing users to quickly find the information they need.
Whether you are a developer looking to learn from existing applications, or a designer wanting to inspect the assets of an Electron app, Electron App Extract provides a reliable solution. The ability to restore paths from source maps enhances the usability of the extracted code, allowing for a more accurate representation of the original project structure. This skill is particularly beneficial when working with applications like Codex, Discord, Slack, and others that utilize Electron as their framework.
In summary, Electron App Extract is a powerful tool that simplifies the process of inspecting and understanding Electron applications. With its straightforward command-line interface and robust functionality, it empowers users to extract and analyze the source code of their favorite desktop apps.
When to use it
Use this skill when you need to inspect the code or resources of an installed Electron application, especially if you want to understand its architecture or debug issues.
When not to use it
This skill is not suitable for applications that do not use Electron or for users looking for a graphical interface to explore app contents.
What you can build with it
Extracting Code from Discord
A developer wants to inspect how Discord is built by extracting its Electron app code for analysis.
Debugging Slack Issues
A designer needs to understand how Slack handles certain resources and uses Electron, so they extract the app's source.
Learning from VS Code
A programmer is curious about how Visual Studio Code implements certain features and uses this skill to extract its code.
How to install Electron App Extract
View source1. Install with the skills CLI
npx skills add jimliu/baoyu-skills/baoyu-electron-extract --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by jimliuElectron App Extract
Extracts resources and code from an installed Electron app's app.asar. When a .js.map is present, restores the original source files from the embedded sourcesContent; otherwise formats the minified code with Prettier. Source-map paths are resolved relative to the .js.map file first, so bundled paths like ../../src/main.ts restore to readable paths such as restored/src/main.ts instead of hashed placeholders. Always skips node_modules. Works on macOS and Windows.
User Input Tools
When this skill prompts the user, follow this tool-selection rule (priority order):
- Prefer built-in user-input tools exposed by the current agent runtime — e.g.,
AskUserQuestion,request_user_input,clarify,ask_user, or any equivalent. - Fallback: if no such tool exists, emit a numbered plain-text message and ask the user to reply with the chosen number/answer for each question.
- Batching: if the tool supports multiple questions per call, combine all applicable questions into a single call; if only single-question, ask them one at a time in priority order.
Concrete AskUserQuestion references below are examples — substitute the local equivalent in other runtimes.
Script Directory
Scripts in scripts/ subdirectory. {baseDir} = this SKILL.md's directory path. Resolve ${BUN_X} runtime: if bun installed → bun; if npx available → npx -y bun; else suggest installing bun. Replace {baseDir} and ${BUN_X} with actual values.
| Script | Purpose |
|---|---|
scripts/main.ts | App discovery + asar extraction + source-map restoration + Prettier formatting |
When to use
Use this skill whenever the user wants to look inside an installed Electron application or inspect its bundled code. Trigger phrases include:
- "extract Electron app", "decompile this Electron app", "unpack app.asar"
- "show me the source of <app>", "look inside <app>", "how is <app> built"
- "get the source code of Codex / Cursor / Discord / Slack / VS Code / Notion / Obsidian / ChatGPT desktop"
- "提取 Electron 应用", "看 <app> 的源码", "反编译 Electron", "解包 app.asar", "还原 source map"
Both app name (e.g., Codex) and absolute path (e.g., /Applications/Codex.app, a .asar file, or a Windows install dir) are accepted. The script handles discovery for both platforms.
Workflow
1. Determine the input. Ask the user for the app name or path if they haven't given one. If they want a custom output directory, ask for that too.
2. Run the script.
${BUN_X} {baseDir}/scripts/main.ts "<app>" [--output <dir>] [--asar <path>] [--force]
Start with --dry-run first if you're unsure whether discovery will find the right bundle — it prints the resolved paths and exits without touching the filesystem.
3. Handle the result.
- Success → report the output paths and the counts (extracted / restored / formatted).
- Multiple matches → the script lists candidates and exits non-zero. Show the user the candidates, ask which one to use (via
AskUserQuestionor the runtime equivalent), then re-run with the chosen absolute path. - Existing non-empty output dir → the script refuses without
--force. Ask the user whether to overwrite (--force) or pick a new--outputpath. - Unsupported platform / no match → suggest passing
--asar /full/path/to/app.asarif the user knows where the bundle lives.
4. Point the user at the result. The default output dir is ~/Downloads/<AppName>-electron-extract/. The most interesting subdirectory depends on what was found:
restored/exists → the original source tree was reconstructed from.js.mapfiles; this is what to read first.- Only
extracted/exists (no maps) → the JS/CSS inextracted/was Prettier-formatted in place; read from there.
Source-map path restoration
The script should preserve original source names and directory structure as much as the source map allows:
- Resolve each
sources[]entry withsourceRootwhen present, then relative to the.js.mapfile's directory insideextracted/. - Collapse normal bundler-relative paths into the restored project tree. For example,
.vite/main/index.js.map+../../src/main.tsbecomesrestored/src/main.ts. - If a source path climbs above
extracted/, keep the readable remaining path underrestored/instead of hashing it. For example,.vite/main/index.js.map+../../../shared/src/lib/foo.tsbecomesrestored/shared/src/lib/foo.ts. - Strip URL/query decorations from source names, including common
webpack://,file://, and?loadersuffixes. - Use
restored/__unknown/<hash>.<ext>only when the source name is empty or cannot be reduced to a safe file path. - Continue skipping
node_modulesandwebpack/runtime/*entries; these are bundler/runtime noise, not app sources.
Usage
# Extract by app name (default output: ~/Downloads/Codex-electron-extract/)
${BUN_X} {baseDir}/scripts/main.ts Codex
# Extract by absolute path (works for .app bundles, install dirs, or .asar files)
${BUN_X} {baseDir}/scripts/main.ts "/Applications/Visual Studio Code.app"
${BUN_X} {baseDir}/scripts/main.ts "C:\Users\you\AppData\Local\Programs\codex"
${BUN_X} {baseDir}/scripts/main.ts --asar /Applications/Codex.app/Contents/Resources/app.asar Codex
# Custom output
${BUN_X} {baseDir}/scripts/main.ts Codex --output ~/work/codex-source
# Preview discovery without writing anything
${BUN_X} {baseDir}/scripts/main.ts Codex --dry-run
# Overwrite an existing output dir
${BUN_X} {baseDir}/scripts/main.ts Codex --force
# Machine-readable result (one JSON line on stdout)
${BUN_X} {baseDir}/scripts/main.ts Codex --json
Options
| Option | Short | Description | Default |
|---|---|---|---|
<app> | App name or absolute path. Required unless --asar is given. | — | |
--output | -o | Output directory | ~/Downloads/<AppName>-electron-extract |
--asar | Override the resolved .asar path | auto-discovered | |
--force | -f | Allow writing into a non-empty existing output dir | false |
--skip-format | Skip Prettier formatting | false | |
--skip-restore | Skip source-map restoration | false | |
--no-unpacked | Don't copy app.asar.unpacked/ alongside | false | |
--dry-run | Print resolved paths and exit without writing | false | |
--json | Emit one JSON-line summary on stdout (suppresses normal output) | false |
Output layout
~/Downloads/<AppName>-electron-extract/
├── extract-report.json # JSON summary: counts, warnings, resolved paths
├── extracted/ # raw asar contents (JS/CSS Prettier-formatted when no map)
│ └── ... # node_modules left untouched (skipped from format)
├── extracted.unpacked/ # copied from <asar>.unpacked/ if present
│ └── ... # native modules (.node), large assets
└── restored/ # only present if at least one .js.map was usable
└── <original/source/tree> # rebuilt from sourcesContent in each .js.map
Notes
- node_modules is always skipped — both for source-map restoration and Prettier formatting — because vendored dependencies are noise when inspecting an app.
- Source-map restoration only works when the
.js.mapembedssourcesContent. This is the common case for modern bundlers (webpack, esbuild, Vite, rollup). If a map references external.ts/.jsfiles without embedding them, that map is skipped and the corresponding.jsis Prettier-formatted instead. Skipped maps are listed inextract-report.jsonunderwarnings. - Readable paths over hashes — don't treat
../segments in source-map paths as automatically unsafe. First resolve them from the map location and then sanitize the final output path so it still stays underrestored/. Hash fallback is only for unusable source names. - App discovery searches
/Applications+~/Applicationson macOS, and%LOCALAPPDATA%\Programs,%PROGRAMFILES%,%PROGRAMFILES(X86)%,%APPDATA%on Windows. If discovery finds multiple matches, the script exits and lists them — re-run with an absolute path. On Linux or other platforms, pass--asar /path/to/app.asarexplicitly. - Safety — the script refuses to write to
/, the user home directly, or the current working directory, and refuses to populate an existing non-empty output dir without--force. - No global installs —
@electron/asarandprettierare resolved on-the-fly vianpx -y. First run will be slower while npx caches them.
Frequently asked questions about Electron App Extract
Similar skills
Agent Host Debug Logs
Analyze Agent Host debug logs for deeper insights.
Code OSS Dev - Launch + Debug
Launch and debug Code OSS with isolated profiles.
Phoenix CLI
Debug LLM applications with structured analysis tools.
Power Automate Debugging
Diagnose and fix Power Automate flow errors effectively.
Arize Trace
Inspect and export traces for LLM applications.
Runtime Behavior Probe
Investigate real runtime behavior with precision.
