YouTip

* * *\n\n## Main Process API Quick Reference\n\n| Module | Description | Common Methods | Notes |\n| --- | --- | --- | --- |\n| **app** | Controls application lifecycle | `app.on('ready')`, `app.quit()`, `app.getPath('userData')` | Manages app startup, quit, paths, protocol registration, etc. |\n| **BrowserWindow** | Creates and manages windows | `new BrowserWindow(options)`, `win.loadFile()`, `win.loadURL()`, `win.webContents` | The primary UI container of Electron apps; runs renderer processes internally |\n| **ipcMain** | Main process communication interface | `ipcMain.on(channel, callback)`, `ipcMain.handle(channel, handler)` | Listens for messages or invocation requests from renderer processes |\n| **Menu** | Creates application menus | `Menu.buildFromTemplate(menuTemplate)`, `Menu.setApplicationMenu(menu)` | Customizable menu items, shortcuts, and context menus |\n| **Tray** | System tray management | `new Tray(icon)`, `tray.setToolTip()`, `tray.setContextMenu(menu)` | Displays icons in the taskbar; commonly used for background-resident apps |\n| **Dialog** | Native system dialogs | `dialog.showOpenDialog()`, `dialog.showSaveDialog()`, `dialog.showMessageBox()` | System interactions for file selection, saving, and message prompts |\n| **Notification** | System notifications | `new Notification({ title, body }).show()` | Sends native system notifications with optional click callbacks |\n| **Shell** | Invokes external system resources | `shell.openExternal(url)`, `shell.showItemInFolder(path)` | Opens external webpages, folders, and executables |\n| **Protocol** | Registers custom protocols | `protocol.registerFileProtocol()`, `protocol.handle()` | Used for custom resource loading or deep linking |\n| **Session** | Manages sessions, cache, and cookies | `session.defaultSession.cookies.get()`, `clearCache()` | Low-level control over browsing data and requests |\n| **Net** | Native HTTP/HTTPS network requests | `net.request(options)` | Lower-level network module with better performance than `fetch` |\n| **PowerMonitor** | Monitors system power status | `powerMonitor.on('suspend')`, `on('resume')` | Listens for computer sleep, wake, and lock screen events |\n| **Clipboard** | Clipboard operations | `clipboard.readText()`, `clipboard.writeText()` | Cross-platform copy/paste of text, images, etc. |\n| **GlobalShortcut** | Registers global shortcuts | `globalShortcut.register('CommandOrControl+X', fn)` | Shortcuts that work across windows and in the background |\n\n* * *\n\n## Renderer Process API Quick Reference\n\n| Module | Description | Common Methods | Notes |\n| --- | --- | --- | --- |\n| **ipcRenderer** | Communicates with main process | `ipcRenderer.send()`, `ipcRenderer.invoke()`, `ipcRenderer.on()` | Used by renderer processes to send, receive, and invoke main process events |\n| **webFrame** | Controls current page content | `webFrame.setZoomFactor()`, `webFrame.insertCSS()` | Dynamically modifies page zoom and styles |\n| **contextBridge** | Securely exposes APIs | `contextBridge.exposeInMainWorld('api', {...})` | Securely interacts with the main process when `contextIsolation` is enabled |\n| **desktopCapturer** | Captures screen content | `desktopCapturer.getSources({ types: ['window', 'screen'] })` | Used for screenshot and screen recording functionality |\n| **Notification** | Notification API | `new Notification('Title', { body: 'Content' })` | Uses the browser standard Notification to send notifications |\n| **Clipboard** | Clipboard operations | `navigator.clipboard.readText()` | Accesses system clipboard (some features may be restricted) |\n| **Web Storage / IndexedDB** | Local storage | `localStorage.setItem()`, `indexedDB.open()` | Stores lightweight or structured data |\n| **Fetch / Axios** | Network requests | `fetch(url)`, `axios.get()` | Used for accessing remote APIs and loading resources |\n| **DOM / Window** | Page control | `document.querySelector()`, `window.open()` | All Web APIs are available |\n\n* * *\n\n## Common Utility Modules Quick Reference\n\n| Module | Primary Function | Examples |\n| --- | --- | --- |\n| **fs** | File operations | `fs.readFileSync(path)`, `fs.writeFile(path, data)` |\n| **path** | Path joining | `path.join(__dirname, 'index.html')` |\n| **os** | System information | `os.platform()`, `os.homedir()` |\n| **child_process** | Executes child processes | `exec('ls', callback)` |\n| **electron-store** | Persistent configuration | `store.set('key', value)`, `store.get('key')` |\n| **sqlite3 / better-sqlite3** | Local database | `db.prepare('SELECT * FROM notes').all()` |\n| **axios / node-fetch** | Network requests | `axios.post(url, data)` |\n| **node-gyp** | Native module compilation | `node-gyp rebuild` |\n\n* * *\n\n## Configuration Templates and Explanations\n\n### package.json Template and Explanation\n\n{ "name": "my-electron-app", "version": "1.0.0", "description": "Example Electron Application", "main": "main.js", "scripts": { "start": "electron .", "pack": "electron-builder --dir", "dist": "electron-builder" }, "devDependencies": { "electron": "^33.0.0", "electron-builder": "^24.6.0" }, "build": { "appId": "com.example.myelectronapp", "productName": "MyElectronApp", "directories": { "output": "dist" }, "files": [ "main.js", "preload.js", "renderer/**/*" ], "win": { "target": "nsis", "icon": "assets/icon.ico" }, "mac": { "category": "public.app-category.productivity", "icon": "assets/icon.icns" }, "linux": { "target": "AppImage", "icon": "assets/" } }}\n**Explanation:**\n\n| Field | Meaning |\n| --- | --- |\n| **name / version / description** | Application name, version, and description |\n| **main** | Main process entry file (required) |\n| **scripts** | Defines command scripts; `npm start` to launch, `npm run dist` to package |\n| **devDependencies** | Development dependencies (Electron, packaging tools, etc.) |\n| **build** | Configuration options for `electron-builder` |\n| **appId** | Unique application ID for signing and update identification |\n| **productName** | Application name displayed after packaging |\n| **directories.output** | Packaging output path |\n| **files** | Specifies files and directories to include in the packaged app |\n| **win/mac/linux** | Platform-specific packaging configurations (icons, target formats) |\n\n### electron-builder.yml Template and Explanation\n\nappId: com.example.myelectronapp productName: MyElectronApp directories: output: dist files: - "main.js" - "preload.js" - "renderer/**/*" win: target: nsis icon: assets/icon.ico mac: target: dmg icon: assets/icon.icns linux: target: AppImage icon: assets/ publish: provider: github repo: my-electron-app owner: username\n**Explanation:**\n\n| Configuration | Description |\n| --- | --- |\n| **appId / productName** | Unique application identifier and name |\n| **directories.output** | Packaging output directory |\n| **files** | List of files to package (supports wildcards) |\n| **win / mac / linux** | Build targets and icon configurations for different systems |\n| **publish** | Release source configuration for auto-updates (e.g., GitHub Releases) |\n\n### TypeScript tsconfig.json Template and Explanation\n\n{ "compilerOptions": { "target": "ES2020", "module": "commonjs", "strict": true, "outDir": "./dist", "rootDir": "./src", "esModuleInterop": true, "moduleResolution": "node", "resolveJsonModule": true, "skipLibCheck": true }, "include": ["src/**/*"], "exclude": }\n**Explanation:**\n\n| Option | Meaning |\n| --- | --- |\n| **target** | Target JavaScript version for compilation |\n| **module** | Module system; `commonjs` is typically used for Electron main process |\n| **outDir / rootDir** | Output and source directories |\n| **strict** | Enables strict type checking |\n| **esModuleInterop** | Allows default imports from non-ES modules |\n| **resolveJsonModule** | Supports importing JSON files |\n| **skipLibCheck** | Skips declaration file checking to speed up compilation |