GM_context

A html5 contextmenu library

Este script no debería instalarse directamente. Es una biblioteca que utilizan otros scripts mediante la meta-directiva de inclusión // @require https://update.greatest.deepsurf.us/scripts/33034/705360/GM_context.js

Tendrás que instalar una extensión para tu navegador como Tampermonkey, Greasemonkey o Violentmonkey si quieres utilizar este script.

You will need to install an extension such as Tampermonkey to install this script.

Necesitarás instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Userscripts para instalar este script.

Necesitará instalar una extensión como Tampermonkey para instalar este script.

Necesitarás instalar una extensión para administrar scripts de usuario si quieres instalar este script.

(Ya tengo un administrador de scripts de usuario, déjame instalarlo)

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

(Ya tengo un administrador de estilos de usuario, déjame instalarlo)

Autor
eight
Versión
0.2.1
Creado
8/9/2017
Actualizado
6/6/2019
Tamaño
8,21 KB
Licencia
MIT

GM_context

Firefox is going to remove contextmenu support! See https://bugzilla.mozilla.org/show_bug.cgi?id=1372276

A JavaScript library to create native HTML5 contextmenu in the browser. This library is designed for userscripts.

Compatibility

It uses native HTML5 <menu> and <menuitem> to build the context menu, so:

  1. It only works on latest Firefox.
  2. It doesn't replace the original context menu but extends it.

Usage

GM_context.add({
    context: ["image"],
    items: [{
        type: "submenu",
        label: "Reverse image search",
        items: [{
            label: "TinEye",
            onclick(e) {
                // ...
            }
        }, {
            type: "separator"
        }, {
            label: "Google",
            onclick(e) {
                // ...
            }
        }]
    }]
});

Demo

API reference

GM_context.add(menu: object)

Add a menu. The menu object contains following properties:

  • context: array of string. A list of valid context type that the context menu should apply to. Possible values are:

    • page: when there is no other context type matched.
    • image: match images.
    • link: match links.
    • editable: match editable target.
    • selection: when part of the page is selected.

    If this property is missing, the menu is globally applied.

  • items: array of object. A list of items. See Define a menu item.

  • oncontext: function. An event handler to handle contextmenu event, which would be called after context property is matched. The function may return false to not show the menu.

GM_context.remove(menu: object)

Remove the menu.

GM_context.update(item: object, changes: object)

Update the property of an item. If changes object contains items, it would replace all sub-items with it.

const myCheckbox = {
    type: "checkbox",
    label: "A checkbox"
};
GM_context.add({items: [myCheckbox]});

function toggleCheckbox() {
    GM_context.update(myCheckbox, {
        checked: !myCheckbox.checked
    });
}

GM_context.addItem(parent: object, item: object, position: number)

Add a sub-item to parent.

  • parent: Must be submenu, radiogroup, or the menu itself.
  • item: The item to add. See Define a menu item.
  • position: Where the item should insert to. Negative value is allowed. Default to parent.items.length.

GM_context.removeItem(parent: object, item: object)

Remove a sub-item from parent.

  • parent: Must be submenu, radiogroup, or the menu itself.
  • item: The item to remove.

Define a menu item

An item may have following properties:

  • checked: boolean. Only available to checkbox and radiogroup's items.
  • disabled: boolean. To disable an item.
  • icon: string. Image URL, used to provide a picture to represent the command.
  • items: array of object. Define sub-items. Only available to submenu and radiogroup type. A submenu may contain any type of the items, but the items of radiogroup can only define label, checked, and value properties.
  • label: string. The label of the item. The label may contain a special string %s which would be replaced with the value of window.getSelection().
  • onclick: function. Called when the item is clicked. It would recieve a contextmenu event not a click event. Also, checkbox type items would recieve a boolean to indicate if the item is checked.
  • onchange: function. Only available to radiogroup. The handler would recieve following params:

    • contextmenu event.
    • The value of the item currently choosed.
  • type: string. Define different type of menuitem. Available values are:

    • command: A normal menuitem. (default)
    • submenu: A submenu.
    • separator: A separator.
    • checkbox: An item which can be checked/unchecked.
    • radiogroup: A group of checkbox. When an item is checked, the others are unchecked. It is suggested to separate radiogroup from other items, or display it in a submenu.
  • value: string. Only available to radiogroup's items. The value is passed to onchange handler as the second parameter.

Changelog

  • 0.2.1 (Sep 21, 2017)

    • Fix empty container issue.
  • 0.2.0 (Sep 21, 2017)

    • Add test.
    • Add oncontext handler.
    • Add .addItem, .removeItem, update.
  • 0.1.0 (Sep 8, 2017)

    • First release.