 Release status: stable | |
|---|---|
 | |
| Implementation | MyWiki,Special page,API |
| Description | Allow users to enable JS-based, user-provided gadgets from their preferences page |
| Author(s) | Daniel Kinzler (Duesentriebtalk) |
| Compatibility policy | Snapshots releases along with MediaWiki. Master is not backward compatible. |
| MediaWiki | 1.19+ |
| License | GNU General Public License 2.0 or later |
| Download | README |
| Example | Wikimedia Commons:Gadget overview,user preferences (click "Gadgets"; you need to be logged in of course) |
| |
| Translate the Gadgets extension if it is available at translatewiki.net | |
| Issues | Open tasks ·Report a bug |
TheGadgets extension allows users to select JavaScript or CSS-based "gadgets" provided by other wiki users.
Gadgets are made up of JavaScript and/or CSSSnippets located on pages in the MediaWiki namespace.Each gadget is defined by a line inMediaWiki:Gadgets-definition, providing a name and description for the gadget, and a list of the JS and CSS snippets that it uses (see#Usage section below).
Since Gadgets reside in theMediaWiki 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 used by other users since JavaScript can easily be used to hijack accounts or spy on people.
Gadgets folder to yourextensions/ directory.cdextensions/gitclonehttps://gerrit.wikimedia.org/r/mediawiki/extensions/GadgetswfLoadExtension('Gadgets');
Done – Navigate toSpecial:Version on your wiki to verify that the extension is successfully installed.$wgGadgetsRepo | Whether to define gadgets inMediaWiki:Gadgets-definition or via pages such asMediaWiki:Gadgets/yourGadgetName.json. If json, it will also create thecontent model GadgetDefinition. "Json" mode is under development and is not ready for use yet. | |
$wgSpecialGadgetUsageActiveUsers | Configures whether or not to show active user stats onSpecial:GadgetUsage. | true |
OnceMediaWiki:Gadgets-definition is created with at least one valid gadget, a new "Gadgets" section will be shown onSpecial: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 onSpecial:Gadgets, along with helpful links to the relevant localisation and script/style pages for easy creation or editing.Statistics about gadget preferences are available atSpecial:GadgetUsage.
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'sinternal 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.
[A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (-), underscores (_), and periods (.). The reason for this limitation is that the internal name must be valid as the name of anHTML form name, as MediaWiki interface message key, and as ResourceLoader module name.Options format:
[ResourceLoader | option1 | option2 | ... optionN]
TheResourceLoader 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-template.vue | mygadget.css
or
* mygadget[ ResourceLoader | rights=foo, bar ] | mygadget.js | mygadget.css
| MediaWiki version: | ≤ 1.41 |
There are two ways to define gadgets depending on the$wgGadgetsRepoClass.If It is'MediaWikiGadgetsDefinitionRepo' (the default value), the list of available gadgets is defined onMediaWiki:Gadgets-definition.In an alternative way, Gadget definitions are defined on pages in theGadget definition namespace when$wgGadgetsRepoClass is set to'GadgetDefinitionNamespaceRepo'.(On MediaWiki 1.39+, the value to use instead is'\\MediaWiki\\Extension\\Gadgets\\GadgetDefinitionNamespaceRepo'.)
Creation of theGadget definition:mygadget page and putting in it the belowJSON code have the same effect asmygadget[ ResourceLoader | rights=foo, bar ] | mygadget.js | mygadget.css.
{"settings":{"rights":["foo","bar"],"default":false,"package":false,"hidden":false,"skins":[],"actions":[],"category":""},"module":{"scripts":["mygadget.js"],"styles":["mygadget.css"],"datas":[],"peers":[],"dependencies":[],"codexIcons":[],"messages":[],"type":""}}
In above example, theGadget:Mygadget.js and theGadget:mygadget.css are used.
| Name | Parameters | Description | Since |
|---|---|---|---|
ResourceLoader | None | Marks gadget's scripts as compatible withResourceLoader. | 1.17 (r76527) |
dependencies | Comma-separated module names | These modules will be loaded before the scripts of this gadget execute. Seelist of default modules. | 1.17 (r76639) |
rights | Comma-separated privilege names | Make the gadget available (and visible in preferences) only to users who have the specifiedprivileges. | 1.18 (r85268) |
hidden | None | Hide the gadget from thePreferences page. This can be used in two ways:
| 1.28 |
skins | Comma-separated skin names | Make the gadget available (and visible in preferences) only to users who use the specifiedskins. Before MediaWiki 1.32 it was taking into consideration the skin set in preferences for the user, not the current displayed one (like when adding?useskin=monobook in the URL,T199478). Since 1.39, the ResourceLoader module is not registered on skins the gadget is unavailable on, so the gadget cannot be loaded on those skins as a dependency or usingmw.loader.load() either (T236603).Use of skins is a last resort, and should be restricted to specialized code. For example code which relies on DOM manipulation in the absence of standardized APIs and that cannot be implemented usingCore modules. | 1.19 (r100509) |
actions | Comma-separated action names | Make the gadget available only on the specified page actions. E.g.actions = edit, history to load a gadget only while editing and on history pages.Specifying edit action will also load it onaction=submit. Invalid actions effectively disable the gadget since it can't be run anywhere. | 1.38 (gerrit:747112) |
categories | Comma-separated category names | Make the gadget available only on the specified categories. E.g.categories = Archived, Maintenance to load a gadget only on pages in the Category:Archived or Category:Maintenance. See also:Template gadgets | 1.42 (gerrit:1005092) |
namespaces | Comma-separated namespace numbers | Make the gadget available only on the specifiednamespaces. E.g.namespaces = 0, 2 to load a gadget only in mainspace and user namespace. | 1.41 (gerrit:624517) |
contentModels | Comma-separated content models | Make the gadget available on pages with the given content models. E.g.contentModels = wikitext to load a gadget only on wikitext pages. | 1.41 (gerrit:922062) |
default | None | Enable the gadget by default for everyone (including IPs). Registered users can still disable it in their preferences. | 1.18 (r85902) |
package | None | Mark this gadget aspackaged. Only the first JavaScript page will be executed in this mode. Other pages can be imported by using the require() function. This mode also enables the use of JSON pages, which cannot be included otherwise. | 1.38 |
type | styles (default for CSS-only gadgets) orgeneral (default otherwise) | Usestyles for modules that only modify styling for elements already on the page (e.g. when customizing the skin, layout, or article content). It will cause the CSS files of the module to be included from the page HTML instead of being loaded via JavaScript. For details, seeResourceLoader/Migration guide (users)#Gadget type.Using styles willnot load in any specified JavaScript files. For gadgets that modify styling for elements through both JavaScriptand CSS, two individual gadget definitions are required. | 1.28 |
peers | Comma-separated gadget names | These CSS-only gadgets will be loaded with this gadget. These gadgets will be loaded before anydependencies, and their styles will be applied even if JavaScript is disabled. For details, seeResourceLoader/Migration guide (users)#Gadget peers. | 1.29 |
codexIcons | Comma-separated codex icon names | TheseCodex icons will be loaded with this gadget, seeList of all icons. They will be available from anicons.json file generated in the package. | 1.45 (gerrit:1108823) |
supportsUrlLoad | None | true | false | Make the gadget available to be loaded with the?withgadget URL query parameter. | 1.38 |
| Name | Parameters | Description | Since | Removed |
|---|---|---|---|---|
top | None | Makes the gadget to betop-loaded. This should be used sparingly, but may be needed for some initialization stuff like registering plugins with VisualEditor. | 1.22 (gerrit:75506) | 1.29 |
requiresES6 | None | Allow use of ES6 syntax (ES2015) in the gadget. Enabling this means server-side syntax validation is skipped for the gadget. Any ES6-requiring gadgets are loaded together in a single web request, which isolates failures due to invalid or unsupported syntax to those gadgets only, without affecting other gadgets and MediaWiki software features. It is recommended to use a tool like ESLint to ensure only valid ES6 syntax is used. Conflicts withdefault. | 1.40 (gerrit:758086) | 1.42 |
targets | desktop,mobile ordesktop, mobile(default) | Set theResourceLoader target(s) for the gadget. Do not use targets, instead useskins where absolutely necessary. | 1.21 (gerrit:60954) | 1.42 |
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 modulesjquery.ui andjquery.effects.clip 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 that 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 "default":
* mygadget[ResourceLoader|default|dependencies=mediawiki.util]|mygadget.js|mygadget.css
To make the gadget available only to users with appropriate permissions, set therights option, for example:
* ImprovedDeletion [rights=delete] | ImprovedDeletion.js
It makes the gadget available only to users who can delete pages.
Note that restrictions are based onpermissions, not user groups likeadministrators or bureaucrats.Here are some real examples:
*modrollback [ResourceLoader |rights=rollback] |modrollback.js*geonotice [ResourceLoader |default |rights=viewmywatchlist] |geonotice.js*Ajax_sysop [ResourceLoader |rights=patrol,rollback,markbotedits,delete]|Ajax_sysop.js
The remaining fields on the definition line refer to the JavaScript, CSS, JSON (since 1.38) andVue.js (since 1.45) source pages that make up the gadget module.These are stored in the MediaWiki namespace as interface messages (MediaWiki:Gadget-mygadget.js andMediaWiki:Gadget-mygadget.css in the example).The page names must end with.css,.js,.json,.vue 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 * foo[ResourceLoader|package|dependencies=vue,@wikimedia/codex]|codextest.js|codextest-main.vue|codextest-ChangeNameDialog.vue
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<nowiki>...</nowiki> and put these tags in JavaScript or CSS comments so they're not interpreted when used.
See the 12th and last lines ofMediaWiki:Gadget-formWizard-core.js for an example.
The list of gadgets inMediaWiki: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 == ... == editing-gadgets == ...
This would define two new sections, with the titles defined on the pagesMediaWiki:Gadget-section-interface-gadgets andMediaWiki:Gadget-section-editing-gadgets.
Seemeta:Gadgets for gadgets that are popular in Wikimedia communities.
 | This extension is being used on one or moreWikimedia projects. This probably means that the extension is stable and works well enough to be used by such high-traffic websites. Look for this extension's name in Wikimedia'sCommonSettings.php andInitialiseSettings.php configuration files to see where it's installed. A full list of the extensions installed on a particular wiki can be seen on the wiki'sSpecial:Version page. |
 | This extension is included in the following wiki farms/hosts and/or packages:This is not an authoritative list. Some wiki farms/hosts and/or packages may contain this extension even if they are not listed here. Always check with your wiki farms/hosts or bundle to confirm. |