Extension:Gadgets - MediaWiki
Jump to content
From mediawiki.org
Translate this page
Languages:
Kadazandusun
Türkçe
català
oʻzbekcha / ўзбекча
polski
português
suomi
svenska
čeština
русский
ўзбекча
العربية
বাংলা
ไทย
中文
한국어
MediaWiki extensions manual
Gadgets
Release status:
stable
Implementation
MyWiki
Special page
API
ContentHandler
Description
Allow users to enable JS-based, user-provided gadgets from their preferences page
Author(s)
Daniel Kinzler, Max Semenik, Timo Tijhof, Siddharth VP
Compatibility policy
Snapshots releases along with MediaWiki. Master is not backward compatible.
MediaWiki
1.19+
Parameters
$wgGadgetsDefinitionsUseCodeEditor
$wgGadgetsRepo
$wgGadgetsDefinitionsUseCodeMirror
Hooks used
BeforePageDisplay
CodeEditorGetPageLanguage
CodeMirrorGetMode
ContentHandlerDefaultModelFor
DeleteUnknownPreferences
GetPreferences
PreferencesGetIcon
PreferencesGetLegend
ResourceLoaderRegisterModules
UserGetDefaultOptions
getUserPermissionsErrors
wgQueryPages
Licence
GNU General Public License 2.0 or later
Download extension
Git
Browse repository
GitHub
Gerrit code review
Git commit log
Download source tarball
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
The
Gadgets
extension allows users to select JavaScript or CSS-based "gadgets" provided by other wiki users.
Gadgets are made up of JavaScript and/or CSS
Snippets
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
#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 used by other users since JavaScript can easily be used to hijack accounts or spy on people.
Installation
This extension
comes with MediaWiki 1.18
and later, so you do not need to download it. The remaining configuration instructions must still be followed.
and move the extracted
Gadgets
folder to your
extensions/
directory.
Developers and code contributors should install the extension
from Git
instead, using:
cd
extensions/
git
clone
Add the following code at the bottom of your
LocalSettings.php
file:
wfLoadExtension
'Gadgets'
);
Done
– Navigate to
Special:Version
on your wiki to verify that the extension is successfully installed.
Configuration
$wgGadgetsDefinitionsUseCodeEditor
Use
CodeEditor
for editing JSON gadget definition pages.
true
$wgGadgetsDefinitionsUseCodeMirror
Use
CodeMirror
for editing JSON gadget definition pages.
false
$wgGadgetsRepo
Whether to define gadgets in
MediaWiki:Gadgets-definition
or via pages such as
MediaWiki:Gadgets/yourGadgetName.json
. If json, it will also create the
content model
GadgetDefinition. "Json" mode is under development and is not ready for use yet.
$wgSpecialGadgetUsageActiveUsers
Configures whether or not to show active user stats on
Special:GadgetUsage
true
Usage
Selection of some gadgets at the user preferences in de.wikipedia
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.
The
internal name
must begin with a basic Latin letter (
[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 an
HTML form name
, as MediaWiki interface message key, and as ResourceLoader module name.
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-template.vue | mygadget.css
or
* mygadget[ ResourceLoader | rights=foo, bar ] | mygadget.js | mygadget.css
Using a subpage of MediaWiki:Gadgets
MediaWiki version:
1.43
Setting
$wgGadgetsRepo
to
json
or
json+definition
will allow gadgets to be defined in subpages of MediaWiki:Gadgets.
For example, MediaWiki:Gadgets/Test-gadget.json would use the following format:
"settings"
"section"
"default"
"rights"
"foo"
"bar"
],
"default"
true
"hidden"
false
"package"
false
"skins"
[],
"actions"
[],
"namespaces"
[],
"categories"
[],
"contentModels"
"wikitext"
},
"module"
"pages"
"test-gadget.js"
"test-gadget.css"
],
"messages"
[],
"dependencies"
[],
"type"
""
"peers"
[],
"codexIcons"
[]
Using Gadget Definition Namespace
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 on
MediaWiki:Gadgets-definition
In an alternative way, Gadget definitions are defined on pages in the
Gadget definition
namespace when
$wgGadgetsRepoClass
is set to
'GadgetDefinitionNamespaceRepo'
(On MediaWiki 1.39+, the value to use instead is
'\\MediaWiki\\Extension\\Gadgets\\GadgetDefinitionNamespaceRepo'
.)
The migration of existing gadget definitions is not yet supported, so you will lose previously defined gadgets after changing this option.
Creation of the
Gadget definition:mygadget
page and putting in it the below
JSON
code have the same effect as
mygadget[ 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, the
Gadget:Mygadget.js
and the
Gadget:mygadget.css
are used.
Options
In use
Name
Parameters
Description
Since
ResourceLoader
None
Marks gadget's scripts as compatible with
ResourceLoader
1.17 (
r76527
dependencies
Comma-separated module names
These modules will be loaded before the scripts of this gadget execute. See
list 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 specified
privileges
. This can be used to target all logged in users using rights that all users have such as
viewmywatchlist
. The comma stands for "and", not "or".
1.18 (
r85268
hidden
None
Hide the gadget from the
Preferences
page. This can be used in two ways:
Enable a gadget by default without the ability to disable (as a modular alternative to
Common.js
). Note that you need to add both:
hidden | default
to load a module for all users.
Gadgets that are not meant for end-users but rather are meant to be loaded by other gadgets. For example, to allow two gadgets to re-use the same internal code or to register the "core" part of a gadget that only loads on certain pages.
1.28
skins
Comma-separated skin names
Make the gadget available (and visible in preferences) only to users who use the specified
skins
. 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 using
mw.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 using
Core 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 on
action=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 specified
namespaces
. E.g.
namespaces = 0,2
to load a gadget only in mainspace and user namespace. Do not use spaces after the commas.
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.
Deleting
default
from the gadget definition will turn it off for everyone but those who had it on before the gadget became default.
If you want to enable a gadget for logged in users only, please use
rights=viewmywatchlist
in addition to this setting to restrict scope (since only logged in users can view watchlists,
viewmywatchlist
is a good proxy).
1.18 (
r85902
package
None
Mark this gadget as
packaged
. 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) or
general
(default otherwise)
Use
styles
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, see
ResourceLoader/Migration guide (users)#Gadget type
Using
styles
will
not
load in any specified JavaScript files. For gadgets that modify styling for elements through both JavaScript
and
CSS, two individual gadget definitions are required.
1.28
peers
Comma-separated gadget names
Peers are CSS-only gadgets that will be enabled together with your gadget. Peer styles are applied even when JavaScript is disabled. Note that peers are not included when loading a gadget via
mw.loader.load([..])
unless you include them in the array yourself, because they are not considered "dependencies". For details, see
ResourceLoader/Migration guide (users)#Gadget peers
1.29
codexIcons
Comma-separated codex icon names
These
Codex icons
will be loaded with this gadget, see
List of all icons
. They will be available from an
icons.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
Removed options
Name
Parameters
Description
Since
Removed
top
None
Makes the gadget to be
top-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 with
default
This option has not actually been removed. See
talk page discussion
1.40 (
gerrit:758086
1.42
targets
desktop
mobile
or
desktop, mobile
(default)
Set the
ResourceLoader
target(s) for the gadget.
Do not use
targets
, instead use
skins
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 modules
jquery.ui
and
jquery.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 the
rights
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 on
permissions
, not user groups like
administrators
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
Page names
The remaining fields on the definition line refer to the JavaScript, CSS, JSON (since 1.38) and
Vue.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
and
MediaWiki: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 of
MediaWiki:Gadget-formWizard-core.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 ==
...
== editing-gadgets ==
...
This would define two new sections, with the titles defined on the pages
MediaWiki:Gadget-section-
interface-gadgets
and
MediaWiki:Gadget-section-
editing-gadgets
Popular gadgets
See
meta:Gadgets
for gadgets that are popular in Wikimedia communities.
See also
Special:Gadgets
– lists all the gadgets and a brief description of each
Gadget Manager
Extension:Widgets
Snippets
This extension is being used on one or more
Wikimedia 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's
CommonSettings.php
and
InitialiseSettings.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's
Special:Version
page.
This extension is included in the following wiki farms/hosts and/or packages:
BlueSpice
Canasta
Debian
Fandom
Miraheze
MyWikis
ProWiki
semantic::core
ShoutWiki
Telepedia
wiki.gg
Retrieved from "
Categories
Stable extensions
Personalization extensions
Special page extensions
API extensions
ContentHandler extensions
BeforePageDisplay extensions
CodeEditorGetPageLanguage extensions
CodeMirrorGetMode extensions
ContentHandlerDefaultModelFor extensions
DeleteUnknownPreferences extensions
GetPreferences extensions
PreferencesGetIcon extensions
PreferencesGetLegend extensions
ResourceLoaderRegisterModules extensions
UserGetDefaultOptions extensions
GetUserPermissionsErrors extensions
WgQueryPages extensions
GPL licensed extensions
Extensions in Wikimedia version control
All extensions
Extensions bundled with MediaWiki 1.18
Extensions used on Wikimedia
Extensions included in BlueSpice
Extensions included in Canasta
Extensions available as Debian packages
Extensions included in Fandom
Extensions included in Miraheze
Extensions included in MyWikis
Extensions included in ProWiki
Extensions included in semantic::core
Extensions included in ShoutWiki
Extensions included in Telepedia
Extensions included in wiki.gg
Gadgets
JavaScript
Hidden categories:
Extensions with release branches compatibility policy
Extensions with manual MediaWiki version
Extension
Gadgets
Add topic