GM_context

A html5 contextmenu library

目前為 2018-06-08 提交的版本,檢視 最新版本

此腳本不應該直接安裝,它是一個供其他腳本使用的函式庫。欲使用本函式庫,請在腳本 metadata 寫上: // @require https://update.cn-greasyfork.org/scripts/33034/604101/GM_context.js

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

作者
eight
版本
0.2.1
建立日期
2017-09-08
更新日期
2018-06-08
尺寸
8.2 KB
授權條款
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.