Extension:Gadgets

The Gadgets extension provides a way for users to pick JavaScript or CSS based "gadgets" that other wiki users provide.

Gadgets are made up of JavaScript and/or CSS located on pages in the MediaWiki namespace. Each gadget is defined by a line in MediaWiki:Gadgets-definition, providing a name and description for the gadget, and a list of the JS and CSS snippets that it uses (see the Usage section below).

Since Gadgets reside in the MediaWiki namespace (the list defining the gadgets as well as the actual code snippets), only sysops (interface admins from 1.32) can edit the code. This is as it should be: only users especially trusted by the wiki community should be able to edit JavaScript code that is used by other users, since JavaScript can easily be used to hijack accounts or spy on people.

Usage
Once MediaWiki:Gadgets-definition is created with at least one valid gadget, a new "Gadgets" section will be shown on Special:Preferences for all users. Users can enable the gadgets they would like to use there. An overview of gadgets currently defined by MediaWiki:Gadgets-definition is also rendered on Special:Gadgets, along with helpful links to the relevant localisation and script/style pages for easy creation or editing. Statistics about gadget preferences are available at Special:GadgetUsage.

Definition format
Each line on the MediaWiki:Gadgets-definition page should start with a " * " (asterisk) character to define a gadget. The line takes the following format:

* mygadget [ options ] |  page names 

The first field (" mygadget " in the example) is the gadget's internal name. The label for the preferences page comes from an interface message page ( MediaWiki:Gadget- mygadget  ) where the proper name and a short description can be written, which also allows wikitext markup to be used.

Options format:

[ResourceLoader | option1 | option2 | ... optionN ]

The ResourceLoader flag is required unless the gadget contains only styles. Options that are "flags" only need to have their name written to be turned on. Options that need a value are followed by an equals sign and a comma-separated list of values. All whitespace is optional and may be omitted.

[ResourceLoader | myflag | mykey = value1, value2, value3 ]

Examples: * mygadget[ResourceLoader]|mygadget.js|mygadget.css

or * mygadget[ResourceLoader|package]| mygadget.js | mygadget-Foo.js | mygadget-data.json | mygadget.css

or * mygadget[ ResourceLoader | rights=foo, bar ] | mygadget.js | mygadget.css

Using Gadget Definition Namespace
There are two ways to define gadgets depending on the. If It is (the default value), the list of available gadgets is defined on MediaWiki:Gadgets-definition. In an alternative way, Gadget definitions are defined on pages in the Gadget definition namespace when is set to.

Creation of the page and putting in it the below JSON code have the same effect as.

In above example, the and the  are used.

Options
2023-09: For the new "namespaces" option, see T63007 and Gerrit 624517.

You can specify extra dependencies for your gadgets, for example:

* mygadget[ResourceLoader|dependencies=jquery.ui, jquery.effects.clip]|mygadget.js|mygadget.css

Here, we ask ResourceLoader to load modules and  with mygadget. Note that gadgets can't depend on scripts from pages, static files or external URLs, only on modules already registered in ResourceLoader. To make a script from a page depend on another script from a page, each should be a gadget which registers itself as a module in ResourceLoader, then they can be made to have dependencies using the following syntax:

* childgadget[ResourceLoader|dependencies=ext.gadget.parentgadget]|childgadget.js

To enable a gadget by default, use " ": * mygadget[ResourceLoader|default|dependencies=mediawiki.util]|mygadget.js|mygadget.css

To make the gadget available only to users with appropriate permissions, set the  option, for example: * ImprovedDeletion [rights=delete] | ImprovedDeletion.js

Makes the gadget available only to users who can actually delete pages.

Note that restrictions are based on permissions, not user groups like administrators or bureaucrats. Here are some real examples:

* modrollback[ResourceLoader|rights=rollback]|modrollback.js * UTCLiveClock[ResourceLoader|rights=purge]|UTCLiveClock.js * Ajax_sysop[ResourceLoader|rights=patrol,rollback,markbotedits,delete]|Ajax_sysop.js

Pages
The remaining fields on the definition line refer to the JavaScript, CSS or JSON source pages that makes up the gadget module. These are stored in the MediaWiki namespace as interface messages ( MediaWiki:Gadget-mygadget.js and MediaWiki:Gadget-mygadget.css in the example). The page names must end with " .css ", " .js ", or " .json " respectively.

A gadget can use any number of source pages, e.g:

* frobinator[ResourceLoader]|frob.js|frob.css|pretty.css * l33t[ResourceLoader]|l33t.js * foobar[ResourceLoader|package]|foo.js|bar.js|foobar-data.json

Please note that if your code contains strings that could be interpreted as wiki syntax (e.g. the signature code ), you may want to enclose your code into  and put these tags in JavaScript or CSS comments so they're not interpreted when actually used.

See the first and last lines of MediaWiki:Gadget-externalsearch-bar.js for an example.

Sections
The list of gadgets in MediaWiki:Gadgets-definition can be broken into sections using lines that start and end with two or more " = " (equals) characters, enclosing the name of a system message that defines the section's name, for example:

== interface-gadgets ==

This would define a new section, with the title defined on the page MediaWiki:Gadget-section-interface-gadgets.

Popular gadgets
See Gadgets for gadgets which are popular in Wikimedia communities.