Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including electron-contextmenu-middleware with all npm packages installed. Try it out:

var electronContextmenuMiddleware = require("electron-contextmenu-middleware")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

electron-contextmenu-middleware v1.0.3

Build `electron` context menus composing multiple middlewares functions.


Greenkeeper badge

Build electron context menus composing multiple middlewares functions.

Travis Build Status NPM module NPM downloads

This package born because I've published two other npm packages for electron that provide different context menu for DOM element.

electron-input-menu provide Copy&Paste stuff for input element, while debug-menu provide a Chrome-like "inspect element" menu for electron.

They both work well on their own, but if you want to use them together you can only shown one menu or the other, because they preventDefault the contextmenu event. If you remove the preventDefault call, then you get both, in sequence.

electron-contextmenu-middleware grab menus provided by various other packages (the middlewares ones) merge them in a single menu, and popup it.


npm install --save electron-contextmenu-middleware


  // in a renderer electron process,
  // you want to activate context menu provided
  // by `electron-input-menu` and `debug-menu`

  const context = require('electron-contextmenu-middleware');

  const input = require('electron-input-menu');
  const debug = require('debug-menu').middleware;


Write a middleware

To write a middleware menu, just export a function that receives an option object and a next function.

The option object is composed by the right-clicked DOM element, the click x and y coord, and an array of electron menu item templates.

Append or insert your menu items to the array in the position you want (or remove existing items inserted by other middlewares) and call next when done.

export default function ({elm, menu, click}, next) {
    label: 'Inspect element',
    click: () => {

Related projects


The MIT License (MIT)

Copyright (c) 2016 parro-it

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free