Gadget kitchen

Welcome to the gadget kitchen. This is intended to become a space where developers far and wide can coordinate their work on user scripts and gadgets to the benefit of the MediaWiki community far and wide. Right now, it's a quick tutorial to get you started.

What are user scripts and gadgets?
MediaWiki allows anyone to write public 1>Special:MyLanguage/Learning JavaScript|JavaScript code to immediately change the behavior of the software.

This code can be shared with other users.

This code is located in wiki pages.


 * A user script belongs to you as a user and is executed for that user. The code is usually hosted on a sub page of your user page.

Wikipedia has a vetting process for which gadgets are available.
 * A gadget is a user scripts which has been "promoted" by an 1>Special:ListUsers/interface-admin|interface administrator, by adding it to MediaWiki:Gadgets-definition. Logged-in users can enable gadgets in the 1>Special:Preferences#mw-prefsection-gadgets|"Gadgets" tab of their user preferences.  Gadgets are created and managed by interface administrators.
 * For completeness: Interface administrators can also add and edit the siteJS located at MediaWiki:Common.js.  The JavaScript in that file affects everyone and is executed automatically for both logged-out and logged-in users.

If you're running your own copy of MediaWiki, needs to be enabled for user scripts to work, and the gadgets>Extension:Gadgets|Gadgets extension needs to be installed to make it possible to promote individual scripts to gadget status.

For a nicer development experience, ensure that the  extension is installed on your wiki.

I want to try!

 * 1) Ensure you are logged in, then visit Special:MyPage/common.js. This file holds your personal>Manual:Interface/JavaScript#Personal_scripts|personal JavaScript that is loaded on every page view.
 * 2) Create this page with the following text: mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Tutorial-QuickRC.js&action=raw&ctype=text/javascript');
 * 3) Save. You should now have a link in the toolbox section called "Quick changelog" which shows you a subset of recent changes in a quick pop-up.

I want to do more!
Copy and paste the contents of MediaWiki:Tutorial-QuickRC.js into your Special:MyPage/common.js.

The result should be the same as above, but now you can modify the script, play with it, and replace it with something else entirely.

Clicking "Preview" (or using the keyboard shortcut, typically ) in the editor will also execute the latest version of the script. This is a good way to iterate without saving the page. But remember, nothing is saved until you press "Save page".

Are there additional tutorials?

 * MediaWiki:Tutorial-QuickRC.js - mw.loader, mw.util, mw.html, API usage, jQuery UI dialog, mw.user, jQuery AJAX, jQuery event binding
 * ve-gadgets>VisualEditor/Gadgets|VisualEditor/Gadgets - A tutorial specifically for VisualEditor gadgets.
 * ooui>Special:MyLanguage/OOUI|OOUI - A javascript library for creating pop-up windows specifically for use on mediawiki sites available on most WMF hosted wikis. The library oouiusing>Special:MyLanguage/OOUI/Using OOUI in MediaWiki#Gadgets|can be used in gadgets.

What's this ResourceLoader thing?
RL>ResourceLoader|ResourceLoader is a core feature of MediaWiki that intelligently delivers JavaScript and CSS assets to users and readers. Because Gadgets are coded in JavaScript, as a Gadget coder you're bound to interact with ResourceLoader. Starting with MediaWiki 1.26, gadgets must use ResourceLoader (T107399).

Your gadget should load useful ResourceLoader modules instead of "reinventing the wheel."


 * modules>ResourceLoader/Modules|Modules — A list of JavaScript libraries, jQuery plugins and MediaWiki utilities that already exist within ResourceLoader for you to reuse.


 * See the [<tvar|jquery>http://docs.jquery.com/Main_Page</> jQuery documentation] for information about using jQuery in MediaWiki
 * dev>ResourceLoader/Developing with ResourceLoader</>|Developing with ResourceLoader — A list of useful practices, like enabling the debug mode and help with debugging.

What should I work on?

 * If you want to write features that directly help Wikimedia project contributors, there are some pages that are used to coordinate requests. On the English Wikipedia, there is requests>w:Wikipedia:User scripts/Requests</>.
 * We're also collecting requests here: Gadget Kitchen/Requests

How do I use my script on other wikis?
Let's say you want to run the script on English Wikipedia instead of MediaWiki.org. You can't use  to import a page of JavaScript from a different wiki, but you can tell ResourceLoader to load your code. Visit your common.js on English Wikipedia and add the following:

Of course, you could also load the user script you just created by changing MediaWiki:Tutorial-QuickRC.js in the URI above to. Ta-da! It's really that easy to customize your experience on one of the largest web sites on the planet.

If your gadget uses the MediaWiki API, add the <tvar|callback>" "</> parameter to the API URL if you are trying to make an API request that would violate the same-origin policy (e.g. making a request to the Commons API from Wikipedia). This triggers the use of JSONP and enforces certain restrict>API:Data formats#JSON callback restrictions</>|restrictions.

Got any tips for writing or debugging JS?

 * Writing a gadget:
 * Check out jsconv>Manual:Coding conventions/JavaScript</>|the JavaScript coding conventions to write JavaScript that complies with MediaWiki's style.
 * Also see the RL>ResourceLoader/Migration_guide_(users)#Good_practices</>|ResourceLoader good practices.


 * Debugging:
 * Gadgets are usually compacted by the resource loader, minimized and aggregated. use the  url parameter (preceded by ? or &, of course), to ask for the non-compacted version of the page, to facilitate debugging, by loading the "source form" of your gadget, comments and all.


 * Read the [<tvar|chrome>https://developer.chrome.com/devtools</> Google Chrome developer tools documentation] or [<tvar|firefox>http://getfirebug.com/wiki/index.php/Main_Page</> Firebug documentation] to get the most out of the powerful debugging tools built into your browser.
 * If you experience issues with cached versions of scripts, it can be helpful to disable all caching. Click the settings (gears) icon in the Chrome developer console and select "Disable cache", or click "Disable Browser Cache" in the Net panel's dropdown menu in Firebug.
 * The extart>Extension:ExternalArticles#Importing_text_files</>|ExternalArticles extension can be used to work on gadget code in an external IDE (it will update the corresponding wiki pages every time a file is saved).


 * Review: Gadgets are developed by community and as of today there is no formal code review required for them (see discussion T71445). However, it is strongly recommended to follow best practices!


 * audit-resources: You should not load external resources that may harm users privacy. For example in WMF wikis, the following domains are considered safe:
 * .wiktionary.org
 * .wikimedia.org,
 * *.wikibooks.org
 * *.wikisource.org
 * *.wikisource.org
 * *.wikiversity.org
 * *.wikinews.org
 * *.wikiquote.org
 * *.wikidata.org
 * *.wikivoyage.org
 * www.mediawiki.org

Related pages

 * scripts>w:en:Wikipedia:User scripts</>|Wikipedia:User scripts on the English Wikipedia and its alternatives in other languages are the primary hubs for user script and gadget development in Wikipedia.
 * The guide>w:en:Wikipedia:WikiProject User scripts/Guide</>|user scripts guide on the English Wikipedia has tons of useful information to get you started.


 * engadget>w:en:Wikipedia:Gadget</>|Wikipedia:Gadget page on English Wikipedia


 * the MediaWiki web service api>Special:MyLanguage/API:Main page</>|API documentation will also be very useful


 * gadgets>m:Gadgets</>|List of gadgets by popularity in Wikimedia projects
 * compat>Special:MyLanguage/Compatibility#Browsers</>|Compatibility - MediaWiki's JavaScript support per browser and browser version

In the future, changes to ResourceLoader ("Gadgets 2.0") will make managing gadgets simpler.

Live chat

 * There is an IRC channel on the Freenode network: