# How Lepton Uses electron-context-menu for Context-Specific User Actions

> Lepton leverages electron-context-menu to add native right-click menus for context specific actions like Copy Paste and Inspect Element to its renderer windows.

- Repository: [CosmoX/Lepton](https://github.com/hackjutsu/lepton)
- Tags: how-to-guide
- Published: 2026-02-23

---

**Lepton integrates `electron-context-menu` in [`main.js`](https://github.com/hackjutsu/Lepton/blob/main/main.js) to automatically attach native right-click menus to all renderer windows, providing context-sensitive actions like Copy, Paste, and Inspect Element based on the clicked element type.**

The open-source snippet manager Lepton leverages the `electron-context-menu` package to deliver native right-click functionality across its Electron interface. By implementing a minimal configuration in the main process, the application ensures users receive appropriate context menu options whether they click on text, links, or images. This integration demonstrates how lightweight dependencies can significantly enhance desktop application usability without complex boilerplate code.

## Integrating electron-context-menu in the Main Process

Lepton's implementation resides entirely within the main process bootstrap code. The integration requires only three lines of code in [`main.js`](https://github.com/hackjutsu/Lepton/blob/main/main.js) (lines 186-188), making it one of the most concise feature implementations in the codebase.

### Loading the Library

The application imports the package using a standard CommonJS require statement:

```javascript
const ContextMenu = require('electron-context-menu')

```

This loads the helper library that automatically attaches context-menu handlers to `BrowserWindow` instances without manual `webContents` event wiring.

### Configuring the Context Menu

Immediately after requiring the library, Lepton invokes the configuration function:

```javascript
ContextMenu({
  prepend: (params, mainWindow) => []
})

```

The `prepend` callback accepts two parameters: `params` containing metadata about the clicked element, and `mainWindow` referencing the active `BrowserWindow` instance. Currently, Lepton returns an empty array, meaning no custom items are added beyond the library's defaults. However, this hook remains available for future domain-specific actions such as "Open Snippet in Editor" or "Copy Gist URL."

## How Context-Specific Actions Work in Lepton

The `electron-context-menu` library provides intelligent, element-aware menu generation that adapts to user interactions without additional configuration from Lepton's developers.

When a user right-clicks within the application window, the library analyzes the `params` object to determine the element type under the cursor:

- **Text selections** trigger options for **Copy**, **Cut**, and **Select All**
- **Editable fields** add **Paste** functionality
- **Hyperlinks** expose **Open Link** and **Copy Link Address**
- **Images** provide **Save Image** and **Copy Image** options
- **Any context** includes **Inspect Element** for development debugging

This behavior occurs automatically across all renderer windows created by Lepton's main process, ensuring consistent UX throughout the application lifecycle.

## Extending the Menu with Custom Actions

While Lepton currently uses the default menu configuration, the `prepend` callback structure supports seamless extension for snippet-management workflows.

Developers could implement custom actions by modifying the return array in [`main.js`](https://github.com/hackjutsu/Lepton/blob/main/main.js):

```javascript
ContextMenu({
  prepend: (params, mainWindow) => [
    {
      label: 'Open Snippet in New Window',
      visible: params.mediaType === 'none' && params.selectionText,
      click: () => {
        mainWindow.webContents.send('open-snippet', params.selectionText)
      }
    },
    {
      label: 'Copy Gist URL',
      visible: params.linkURL && params.linkURL.includes('gist.github.com'),
      click: () => {
        require('electron').clipboard.writeText(params.linkURL)
      }
    }
  ]
})

```

This pattern allows Lepton to inject domain-specific commands that appear only in relevant contexts—such as when users select snippet text or click gist links—while maintaining the library's automatic handling of standard browser actions.

## Summary

Lepton's integration of `electron-context-menu` demonstrates efficient use of specialized npm packages to enhance Electron applications:

- **Minimal implementation**: Three lines of code in [`main.js`](https://github.com/hackjutsu/Lepton/blob/main/main.js) (lines 186-188) activate context menus across all windows
- **Automatic context detection**: The library intelligently displays relevant actions based on clicked element types (text, links, images, editable fields)
- **Extension readiness**: The `prepend` callback provides a hook for future Lepton-specific actions without refactoring the core menu logic
- **Zero boilerplate**: No manual `webContents` event listeners or menu template construction required

## Frequently Asked Questions

### Where does Lepton configure the electron-context-menu package?

Lepton configures `electron-context-menu` in the main process entry point at [`main.js`](https://github.com/hackjutsu/Lepton/blob/main/main.js) (lines 186-188). The configuration occurs during application startup before any renderer windows are created, ensuring all windows inherit the context menu functionality automatically.

### What default actions does electron-context-menu provide in Lepton?

The package provides standard browser context actions including **Copy**, **Cut**, **Paste**, **Select All**, **Open Link**, **Copy Link Address**, **Save Image**, **Copy Image**, and **Inspect Element**. These appear contextually based on the element type under the cursor—text selections show editing commands, links show navigation options, and images show save options.

### Can developers add custom actions to Lepton's context menu?

Yes, developers can extend the menu by modifying the `prepend` callback in [`main.js`](https://github.com/hackjutsu/Lepton/blob/main/main.js). Currently, Lepton returns an empty array `[]`, but developers can return an array of menu item objects to inject custom actions such as "Copy Gist URL" or "Open Snippet in Editor" that appear only when specific conditions are met.

### Does Lepton use electron-context-menu for all application windows?

Yes, the single `ContextMenu({...})` call in the main process automatically attaches context menus to all `BrowserWindow` instances created during the application lifecycle. This includes the primary window loading [`index.html`](https://github.com/hackjutsu/Lepton/blob/main/index.html) and any auxiliary windows spawned for snippet editing or preview, ensuring consistent right-click behavior throughout the application.