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.
It uses native HTML5 <menu>
and <menuitem>
to build the context menu, so:
- It only works on latest Firefox.
- It doesn't replace the original context menu but extends it.
GM_context.add({
context: ["image"],
items: [{
type: "submenu",
label: "Reverse image search",
items: [{
label: "TinEye",
onclick(e) {
// ...
}
}, {
type: "separator"
}, {
label: "Google",
onclick(e) {
// ...
}
}]
}]
});
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 aftercontext
property is matched. The function may returnfalse
to not show the menu.
Remove the menu.
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
});
}
Add a sub-item to parent.
parent
: Must besubmenu
,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 toparent.items.length
.
Remove a sub-item from parent.
parent
: Must besubmenu
,radiogroup
, or the menu itself.item
: The item to remove.
An item may have following properties:
-
checked
: boolean. Only available tocheckbox
andradiogroup
'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 tosubmenu
andradiogroup
type. A submenu may contain any type of the items, but the items of radiogroup can only definelabel
,checked
, andvalue
properties. -
label
: string. The label of the item. The label may contain a special string%s
which would be replaced with the value ofwindow.getSelection()
. -
onclick
: function. Called when the item is clicked. It would recieve acontextmenu
event not a click event. Also,checkbox
type items would recieve a boolean to indicate if the item is checked. -
onchange
: function. Only available toradiogroup
. 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 toradiogroup
's items. The value is passed toonchange
handler as the second parameter.
-
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.