Skinnable Right-click Context Menu In JavaScript – context-js

Preview:

Description:

A skinnable, customizable, multi-level context menu library to replace the browser’s right-click menu.

How to use it:

1. Load a skin CSS of your choice in the document.

// Chrome Dark
<link rel="stylesheet" href="./context/skins/chrome-dark.css" id="skin" />
// Chrome Light
<link rel="stylesheet" href="./context/skins/chrome-bright.css" id="skin" />
// Hackerman
<link rel="stylesheet" href="./context/skins/hackerman.css" id="skin" />
// Kali Dark
<link rel="stylesheet" href="./context/skins/kali_dark.css" id="skin" />
// Or your own skin
<link rel="stylesheet" href="./context/skins/custom.css" id="skin" />

2. Load the context.js script in the document.

<script src="./context/context.js"></script>

3. Add menu items together with hotkeys to a JS object. Possible properties:

• text: Menu item
• hotkey: Hotkey
• color: Text color
• disabled: If the item is disabled
• onclick: onClick evnet handler
• subitems: Array of sub-menus
• submenu: ContextMenu instance that will be shown here

const menuData = [
      {text: 'Back', hotkey: 'Alt+Left arrow', disabled: true},
      {text: 'Forward', hotkey: 'Alt+Right arrow', disabled: true},
      {text: 'Reload', hotkey: 'Ctrl+R'},
      null,
      {text: 'Save as...', hotkey: 'Ctrl+S'},
      {text: 'Print...', hotkey: 'Ctrl+P'},
      {text: 'Cast...'},
      {text: 'Translate to English'},
      null,
      {text: 'View page source', hotkey: 'Ctrl+U'},
      {text: 'Inspect', hotkey: 'Ctrl+Shift+I'},
      null,
      {text: 'Kali tools', hotkey: '❯', submenu: subMenuArray},
      {text: 'Skins', hotkey: '❯', submenu: subMenuArray}
]

4. Create a new context menu instance, determine where you wan to show the context menu on right click, and pass the menu data as the second parameter to the ContextMenu method.

const myMenu = new ContextMenu(document.body, menuData);

5. Activate the custom context menu. Done.

myMenu.install();

6. More API methods.

// destroy the context menu
myMenu.uninstall();
// hide the context menu manually
myMenu.hide();
// show the context menu at specific position
myMenu.show(x, y);

Previews:

Chrome Dark Theme

Chrome Bright Theme

Hackerman Theme

Kali Dark Theme

Changelog:

01/01/2021

• Changed right-click behavior