Webextension Context Menu

Generate the webextension's right-click context menu with minimal typing.

How to install and prepare

Install the library through

npm install webextension-contextmenu

then import with

import createContextMenu from 'webextension-contextmenu'

in your script file.

Usage

Library exports one function createContextMenu, which takes one object argument Menu that describes the entire menu structure.
The signature:

createContextMenu(Menu {
  optionTitle1: Menu {
    optionTitle2: optionProps2,
    optionTitle3: optionProps3,
    optionTitle4: optionProps4,
    ...
  }
}) => MenuIds {}

Where:
optionTitle - title of the option.
optionProps - description of the corresponding option. Depending on the type of the value, the resulting option appearance and behavior may differ.
|optionProps value| What represents | |---|---| |onClickHandler (Option, Tab) => void | function to run when clicking on the option, where: Option - the clicked option, Tab - the tab where it happened | |true|checkbox checked| |false|checkbox unchecked| |[true]| radio checked | |[]| radio unchecked | |null| options separator (it doesn't actually need to have any eligible optionTitle) | |Menu {}| another submenu | |[{ ...createProperties }] (single object inside an array)| any other createProperties that may be passed onto menus.create method |

Multiple values can be combined inside one optionProps with the use of an array, e.g. [() => {}, true] will create a checked option with a click handler.
Menus can be nested in other Menus as much as you would like, or the browser will allow.

MenuIds - returning value containing the ids of all created options. With the same object structure as the initial Menu argument, but with ids instead of optionProps.

Important: createContextMenu works asynchronously, so you should await or use Promise.then, if you want to continue working with its returned value

Updating

To update the context menu, run createContextMenu again with a new Menu argument.

Example:

createContextMenu({
  "My Greatest Extension": {
    "Option 1": (option, tab) => console.log("Do something", option, tab),
    "Option 2": {
      Radio1: [
        [], () => console.log("radio clicked"),
      ],
      Radio2: [
        [true], () => console.log("radio clicked"),
      ],
      Radio3: [
        [], () => console.log("radio clicked"),
      ],
    },
    "Separator optionTitle is irrelevant": null,
    // you can easily rewrite the optionTitle inside createProperties
    "Option 3": [{ title: "Rewritten title" }],
    "Option 4": [
      true,
      () => {
        console.log("Callback won't work because the option is disabled");
      },
      // if there are already multiple properties
      // the createProperties can just be passed as an object at the end of the array
      { enabled: false },
    ],
  },
})