CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-enabled skin-theme-clientpref-day vector-toc-available" lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>Wikipedia:User scripts/Guide - Wikipedia</title> <script>(function(){var className="client-js vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-enabled skin-theme-clientpref-day vector-toc-available";var cookie=document.cookie.match(/(?:^|; )enwikimwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""],"wgDefaultDateFormat":"dmy", "wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgRequestId":"900bba3b-67c0-40a0-96f1-53cf1a56ef8a","wgCanonicalNamespace":"Project","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":4,"wgPageName":"Wikipedia:User_scripts/Guide","wgTitle":"User scripts/Guide","wgCurRevisionId":1241694437,"wgRevisionId":1241694437,"wgArticleId":10762503,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["Wikipedia scripts","Wikipedia how-to"],"wgPageViewLanguage":"en","wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"Wikipedia:User_scripts/Guide","wgRelevantArticleId":10762503,"wgIsProbablyEditable":true,"wgRelevantPageIsProbablyEditable":true,"wgRestrictionEdit":[],"wgRestrictionMove":[],"wgNoticeProject":"wikipedia","wgCiteReferencePreviewsActive":false,"wgFlaggedRevsParams":{"tags":{"status":{"levels":1}}}, "wgMediaViewerOnClick":true,"wgMediaViewerEnabledByDefault":true,"wgPopupsFlags":0,"wgVisualEditor":{"pageLanguageCode":"en","pageLanguageDir":"ltr","pageVariantFallbacks":"en"},"wgMFDisplayWikibaseDescriptions":{"search":true,"watchlist":true,"tagline":false,"nearby":true},"wgWMESchemaEditAttemptStepOversample":false,"wgWMEPageLength":40000,"wgRelatedArticlesCompat":[],"wgCentralAuthMobileDomain":false,"wgEditSubmitButtonLabelPublish":true,"wgDiscussionToolsFeaturesEnabled":{"replytool":true,"newtopictool":true,"sourcemodetoolbar":true,"topicsubscription":false,"autotopicsub":false,"visualenhancements":false,"visualenhancements_reply":false,"visualenhancements_pageframe":false},"wgDiscussionToolsFallbackEditMode":"visual","wgULSPosition":"interlanguage","wgULSisCompactLinksEnabled":false,"wgVector2022LanguageInHeader":true,"wgULSisLanguageSelectorEmpty":false,"wgWikibaseItemId":"Q13359134","wgCheckUserClientHintsHeadersJsApi":["architecture","bitness","brands","fullVersionList", "mobile","model","platform","platformVersion"],"GEHomepageSuggestedEditsEnableTopics":true,"wgGETopicsMatchModeEnabled":false,"wgGEStructuredTaskRejectionReasonTextInputEnabled":false,"wgGELevelingUpEnabledForUser":false};RLSTATE={"ext.globalCssJs.user.styles":"ready","site.styles":"ready","user.styles":"ready","ext.globalCssJs.user":"ready","user":"ready","user.options":"loading","ext.cite.styles":"ready","ext.pygments":"ready","ext.discussionTools.init.styles":"ready","oojs-ui-core.styles":"ready","oojs-ui.styles.indicators":"ready","mediawiki.widgets.styles":"ready","oojs-ui-core.icons":"ready","skins.vector.search.codex.styles":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready","jquery.makeCollapsible.styles":"ready","ext.wikimediamessages.styles":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready","ext.uls.interlanguage":"ready","wikibase.client.init":"ready","ext.wikimediaBadges":"ready"};RLPAGEMODULES=["ext.cite.ux-enhancements","ext.pygments.view", "mediawiki.page.media","site","mediawiki.page.ready","jquery.makeCollapsible","mediawiki.toc","skins.vector.js","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.gadget.ReferenceTooltips","ext.gadget.switcher","ext.urlShortener.toolbar","ext.centralauth.centralautologin","mmv.bootstrap","ext.popups","ext.visualEditor.desktopArticleTarget.init","ext.visualEditor.targetLoader","ext.echo.centralauth","ext.discussionTools.init","ext.eventLogging","ext.wikimediaEvents","ext.navigationTiming","ext.uls.interface","ext.cx.eventlogging.campaigns","wikibase.client.vector-2022","ext.checkUser.clientHints","wikibase.sidebar.tracking"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); }];});});</script> <link rel="stylesheet" href="/w/load.php?lang=en&modules=ext.cite.styles%7Cext.discussionTools.init.styles%7Cext.pygments%2CwikimediaBadges%7Cext.uls.interlanguage%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediamessages.styles%7Cjquery.makeCollapsible.styles%7Cmediawiki.widgets.styles%7Coojs-ui-core.icons%2Cstyles%7Coojs-ui.styles.indicators%7Cskins.vector.icons%2Cstyles%7Cskins.vector.search.codex.styles%7Cwikibase.client.init&only=styles&skin=vector-2022"> <script async="" src="/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/w/load.php?lang=en&modules=site.styles&only=styles&skin=vector-2022"> <meta name="generator" content="MediaWiki 1.44.0-wmf.3"> <meta name="referrer" content="origin"> <meta name="referrer" content="origin-when-cross-origin"> <meta name="robots" content="max-image-preview:standard"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=1120"> <meta property="og:title" content="Wikipedia:User scripts/Guide - Wikipedia"> <meta property="og:type" content="website"> <link rel="preconnect" href="//upload.wikimedia.org"> <link rel="alternate" media="only screen and (max-width: 640px)" href="//en.m.wikipedia.org/wiki/Wikipedia:User_scripts/Guide"> <link rel="alternate" type="application/x-wiki" title="Edit this page" href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit"> <link rel="apple-touch-icon" href="/static/apple-touch/wikipedia.png"> <link rel="icon" href="/static/favicon/wikipedia.ico"> <link rel="search" type="application/opensearchdescription+xml" href="/w/rest.php/v1/search" title="Wikipedia (en)"> <link rel="EditURI" type="application/rsd+xml" href="//en.wikipedia.org/w/api.php?action=rsd"> <link rel="canonical" href="https://en.wikipedia.org/wiki/Wikipedia:User_scripts/Guide"> <link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en"> <link rel="alternate" type="application/atom+xml" title="Wikipedia Atom feed" href="/w/index.php?title=Special:RecentChanges&feed=atom"> <link rel="dns-prefetch" href="//meta.wikimedia.org" /> <link rel="dns-prefetch" href="//login.wikimedia.org"> </head> <body class="ext-discussiontools-replytool-enabled ext-discussiontools-newtopictool-enabled ext-discussiontools-sourcemodetoolbar-enabled skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-4 ns-subject mw-editable page-Wikipedia_User_scripts_Guide rootpage-Wikipedia_User_scripts skin-vector-2022 action-view"><a class="mw-jump-link" href="#bodyContent">Jump to content</a> <div class="vector-header-container"> <header class="vector-header mw-header"> <div class="vector-header-start"> <nav class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" > <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Main menu" > <label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" > Main menu </label> <div class="vector-dropdown-content"> <div id="vector-main-menu-unpinned-container" class="vector-unpinned-container"> <div id="vector-main-menu" class="vector-main-menu vector-pinnable-element"> <div class="vector-pinnable-header vector-main-menu-pinnable-header vector-pinnable-header-unpinned" data-feature-name="main-menu-pinned" data-pinnable-element-id="vector-main-menu" data-pinned-container-id="vector-main-menu-pinned-container" data-unpinned-container-id="vector-main-menu-unpinned-container" > <div class="vector-pinnable-header-label">Main menu</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-main-menu.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-main-menu.unpin">hide</button> </div> <div id="p-navigation" class="vector-menu mw-portlet mw-portlet-navigation" > <div class="vector-menu-heading"> Navigation </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mainpage-description" class="mw-list-item"><a href="/wiki/Main_Page" title="Visit the main page [z]" accesskey="z">Main page</a></li><li id="n-contents" class="mw-list-item"><a href="/wiki/Wikipedia:Contents" title="Guides to browsing Wikipedia">Contents</a></li><li id="n-currentevents" class="mw-list-item"><a href="/wiki/Portal:Current_events" title="Articles related to current events">Current events</a></li><li id="n-randompage" class="mw-list-item"><a href="/wiki/Special:Random" title="Visit a randomly selected article [x]" accesskey="x">Random article</a></li><li id="n-aboutsite" class="mw-list-item"><a href="/wiki/Wikipedia:About" title="Learn about Wikipedia and how it works">About Wikipedia</a></li><li id="n-contactpage" class="mw-list-item"><a href="//en.wikipedia.org/wiki/Wikipedia:Contact_us" title="How to contact Wikipedia">Contact us</a></li> </ul> </div> </div> <div id="p-interaction" class="vector-menu mw-portlet mw-portlet-interaction" > <div class="vector-menu-heading"> Contribute </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-help" class="mw-list-item"><a href="/wiki/Help:Contents" title="Guidance on how to use and edit Wikipedia">Help</a></li><li id="n-introduction" class="mw-list-item"><a href="/wiki/Help:Introduction" title="Learn how to edit Wikipedia">Learn to edit</a></li><li id="n-portal" class="mw-list-item"><a href="/wiki/Wikipedia:Community_portal" title="The hub for editors">Community portal</a></li><li id="n-recentchanges" class="mw-list-item"><a href="/wiki/Special:RecentChanges" title="A list of recent changes to Wikipedia [r]" accesskey="r">Recent changes</a></li><li id="n-upload" class="mw-list-item"><a href="/wiki/Wikipedia:File_upload_wizard" title="Add images or other media for use on Wikipedia">Upload file</a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> <a href="/wiki/Main_Page" class="mw-logo"> <img class="mw-logo-icon" src="/static/images/icons/wikipedia.png" alt="" aria-hidden="true" height="50" width="50"> <img class="mw-logo-wordmark" alt="Wikipedia" src="/static/images/mobile/copyright/wikipedia-wordmark-en.svg" style="width: 7.5em; height: 1.125em;"> <img class="mw-logo-tagline" alt="The Free Encyclopedia" src="/static/images/mobile/copyright/wikipedia-tagline-en.svg" width="117" height="13" style="width: 7.3125em; height: 0.8125em;"> </a> </div> <div class="vector-header-end"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/wiki/Special:Search" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only search-toggle" title="Search Wikipedia [f]" accesskey="f"> Search </a> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail cdx-typeahead-search--auto-expand-width"> <form action="/w/index.php" id="searchform" class="cdx-search-input cdx-search-input--has-end-button"> <div id="simpleSearch" class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="Search Wikipedia" aria-label="Search Wikipedia" autocapitalize="sentences" title="Search Wikipedia [f]" accesskey="f" id="searchInput" > </div> <input type="hidden" name="title" value="Special:Search"> </div> <button class="cdx-button cdx-search-input__end-button">Search</button> </form> </div> </div> </div> <nav class="vector-user-links vector-user-links-wide" aria-label="Personal tools"> <div class="vector-user-links-main"> <div id="p-vector-user-menu-preferences" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-userpage" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-dropdown" class="vector-dropdown " title="Change the appearance of the page's font size, width, and color" > <input type="checkbox" id="vector-appearance-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-appearance-dropdown" class="vector-dropdown-checkbox " aria-label="Appearance" > <label id="vector-appearance-dropdown-label" for="vector-appearance-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" > Appearance </label> <div class="vector-dropdown-content"> <div id="vector-appearance-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <div id="p-vector-user-menu-notifications" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="https://donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_en.wikipedia.org&uselang=en" class="">Donate</a> </li> <li id="pt-createaccount-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:CreateAccount&returnto=Wikipedia%3AUser+scripts%2FGuide" title="You are encouraged to create an account and log in; however, it is not mandatory" class="">Create account</a> </li> <li id="pt-login-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:UserLogin&returnto=Wikipedia%3AUser+scripts%2FGuide" title="You're encouraged to log in; however, it's not mandatory. [o]" accesskey="o" class="">Log in</a> </li> </ul> </div> </div> </div> <div id="vector-user-links-dropdown" class="vector-dropdown vector-user-menu vector-button-flush-right vector-user-menu-logged-out" title="Log in and more options" > <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox " aria-label="Personal tools" > <label id="vector-user-links-dropdown-label" for="vector-user-links-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" > Personal tools </label> <div class="vector-dropdown-content"> <div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal user-links-collapsible-item" title="User menu" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport" class="user-links-collapsible-item mw-list-item"><a href="https://donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_en.wikipedia.org&uselang=en">Donate</a></li><li id="pt-createaccount" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:CreateAccount&returnto=Wikipedia%3AUser+scripts%2FGuide" title="You are encouraged to create an account and log in; however, it is not mandatory"> Create account</a></li><li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:UserLogin&returnto=Wikipedia%3AUser+scripts%2FGuide" title="You're encouraged to log in; however, it's not mandatory. [o]" accesskey="o"> Log in</a></li> </ul> </div> </div> <div id="p-user-menu-anon-editor" class="vector-menu mw-portlet mw-portlet-user-menu-anon-editor" > <div class="vector-menu-heading"> Pages for logged out editors <a href="/wiki/Help:Introduction" aria-label="Learn more about editing">learn more</a> </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-anoncontribs" class="mw-list-item"><a href="/wiki/Special:MyContributions" title="A list of edits made from this IP address [y]" accesskey="y">Contributions</a></li><li id="pt-anontalk" class="mw-list-item"><a href="/wiki/Special:MyTalk" title="Discussion about edits from this IP address [n]" accesskey="n">Talk</a></li> </ul> </div> </div> </div> </div> </nav> </div> </header> </div> <div class="mw-page-container"> <div class="mw-page-container-inner"> <div class="vector-sitenotice-container"> <div id="siteNotice"></div> </div> <div class="vector-column-start"> <div class="vector-main-menu-container"> <div id="mw-navigation"> <nav id="mw-panel" class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-pinned-container" class="vector-pinned-container"> </div> </nav> </div> </div> <div class="vector-sticky-pinned-container"> <nav id="mw-panel-toc" aria-label="Contents" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark"> <div id="vector-toc-pinned-container" class="vector-pinned-container"> <div id="vector-toc" class="vector-toc vector-pinnable-element"> <div class="vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned" data-feature-name="toc-pinned" data-pinnable-element-id="vector-toc" > <h2 class="vector-pinnable-header-label">Contents</h2> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-toc.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-toc.unpin">hide</button> </div> <ul class="vector-toc-contents" id="mw-panel-toc-list"> <li id="toc-mw-content-text" class="vector-toc-list-item vector-toc-level-1"> <a href="#" class="vector-toc-link"> <div class="vector-toc-text">(Top)</div> </a> </li> <li id="toc-Prerequisites" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Prerequisites"> <div class="vector-toc-text"> 1 Prerequisites </div> </a> <ul id="toc-Prerequisites-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Forking_an_existing_script" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Forking_an_existing_script"> <div class="vector-toc-text"> 2 Forking an existing script </div> </a> <ul id="toc-Forking_an_existing_script-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Writing_a_script_from_scratch" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Writing_a_script_from_scratch"> <div class="vector-toc-text"> 3 Writing a script from scratch </div> </a> <button aria-controls="toc-Writing_a_script_from_scratch-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> Toggle Writing a script from scratch subsection </button> <ul id="toc-Writing_a_script_from_scratch-sublist" class="vector-toc-list"> <li id="toc-Hello_world" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Hello_world"> <div class="vector-toc-text"> 3.1 Hello world </div> </a> <ul id="toc-Hello_world-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Your_first_script" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Your_first_script"> <div class="vector-toc-text"> 3.2 Your first script </div> </a> <ul id="toc-Your_first_script-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Built-in_scripts" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Built-in_scripts"> <div class="vector-toc-text"> 4 Built-in scripts </div> </a> <ul id="toc-Built-in_scripts-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Development_and_testing" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Development_and_testing"> <div class="vector-toc-text"> 5 Development and testing </div> </a> <button aria-controls="toc-Development_and_testing-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> Toggle Development and testing subsection </button> <ul id="toc-Development_and_testing-sublist" class="vector-toc-list"> <li id="toc-Basic" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Basic"> <div class="vector-toc-text"> 5.1 Basic </div> </a> <ul id="toc-Basic-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Loading_it_from_a_localhost_web_server" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Loading_it_from_a_localhost_web_server"> <div class="vector-toc-text"> 5.2 Loading it from a localhost web server </div> </a> <ul id="toc-Loading_it_from_a_localhost_web_server-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Browser-specific" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Browser-specific"> <div class="vector-toc-text"> 5.3 Browser-specific </div> </a> <ul id="toc-Browser-specific-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Running_pieces_of_code" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Running_pieces_of_code"> <div class="vector-toc-text"> 5.4 Running pieces of code </div> </a> <ul id="toc-Running_pieces_of_code-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Publishing" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Publishing"> <div class="vector-toc-text"> 6 Publishing </div> </a> <ul id="toc-Publishing-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Text_editors_and_debugging" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Text_editors_and_debugging"> <div class="vector-toc-text"> 7 Text editors and debugging </div> </a> <button aria-controls="toc-Text_editors_and_debugging-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> Toggle Text editors and debugging subsection </button> <ul id="toc-Text_editors_and_debugging-sublist" class="vector-toc-list"> <li id="toc-Text_editors" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Text_editors"> <div class="vector-toc-text"> 7.1 Text editors </div> </a> <ul id="toc-Text_editors-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-JavaScript_Debuggers" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#JavaScript_Debuggers"> <div class="vector-toc-text"> 7.2 JavaScript Debuggers </div> </a> <ul id="toc-JavaScript_Debuggers-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Basic_techniques" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Basic_techniques"> <div class="vector-toc-text"> 8 Basic techniques </div> </a> <button aria-controls="toc-Basic_techniques-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> Toggle Basic techniques subsection </button> <ul id="toc-Basic_techniques-sublist" class="vector-toc-list"> <li id="toc-Running_code_on_page_load" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Running_code_on_page_load"> <div class="vector-toc-text"> 8.1 Running code on page load </div> </a> <ul id="toc-Running_code_on_page_load-sublist" class="vector-toc-list"> <li id="toc-$(document).ready(...)" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#$(document).ready(...)"> <div class="vector-toc-text"> 8.1.1 $(document).ready(...) </div> </a> <ul id="toc-$(document).ready(...)-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-mw.hook('wikipage.content').add(...)" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#mw.hook('wikipage.content').add(...)"> <div class="vector-toc-text"> 8.1.2 mw.hook('wikipage.content').add(...) </div> </a> <ul id="toc-mw.hook('wikipage.content').add(...)-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Finding_elements" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Finding_elements"> <div class="vector-toc-text"> 8.2 Finding elements </div> </a> <ul id="toc-Finding_elements-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Checking_the_current_page" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Checking_the_current_page"> <div class="vector-toc-text"> 8.3 Checking the current page </div> </a> <ul id="toc-Checking_the_current_page-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Portlets_(menus_and_tabs)" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Portlets_(menus_and_tabs)"> <div class="vector-toc-text"> 8.4 Portlets (menus and tabs) </div> </a> <ul id="toc-Portlets_(menus_and_tabs)-sublist" class="vector-toc-list"> <li id="toc-List_of_portlets_(portlet_types)" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#List_of_portlets_(portlet_types)"> <div class="vector-toc-text"> 8.4.1 List of portlets (portlet types) </div> </a> <ul id="toc-List_of_portlets_(portlet_types)-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Portlet_structure" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Portlet_structure"> <div class="vector-toc-text"> 8.4.2 Portlet structure </div> </a> <ul id="toc-Portlet_structure-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Adding_elements" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Adding_elements"> <div class="vector-toc-text"> 8.4.3 Adding elements </div> </a> <ul id="toc-Adding_elements-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Removing_elements" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Removing_elements"> <div class="vector-toc-text"> 8.5 Removing elements </div> </a> <ul id="toc-Removing_elements-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Adding_menus" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Adding_menus"> <div class="vector-toc-text"> 8.6 Adding menus </div> </a> <ul id="toc-Adding_menus-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Editing" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Editing"> <div class="vector-toc-text"> 8.7 Editing </div> </a> <ul id="toc-Editing-sublist" class="vector-toc-list"> <li id="toc-Textarea_with_article_wikicode" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Textarea_with_article_wikicode"> <div class="vector-toc-text"> 8.7.1 Textarea with article wikicode </div> </a> <ul id="toc-Textarea_with_article_wikicode-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Editing_toolbar" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Editing_toolbar"> <div class="vector-toc-text"> 8.7.2 Editing toolbar </div> </a> <ul id="toc-Editing_toolbar-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Edittools" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Edittools"> <div class="vector-toc-text"> 8.7.3 Edittools </div> </a> <ul id="toc-Edittools-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Doing_something_after_another_user_script" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Doing_something_after_another_user_script"> <div class="vector-toc-text"> 8.8 Doing something after another user script </div> </a> <ul id="toc-Doing_something_after_another_user_script-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-User_settings" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#User_settings"> <div class="vector-toc-text"> 8.9 User settings </div> </a> <ul id="toc-User_settings-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Preventing_bugs" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Preventing_bugs"> <div class="vector-toc-text"> 9 Preventing bugs </div> </a> <button aria-controls="toc-Preventing_bugs-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> Toggle Preventing bugs subsection </button> <ul id="toc-Preventing_bugs-sublist" class="vector-toc-list"> <li id="toc-<nowiki>_tags" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#<nowiki>_tags"> <div class="vector-toc-text"> 9.1 <nowiki> tags </div> </a> <ul id="toc-<nowiki>_tags-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Function_scope" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Function_scope"> <div class="vector-toc-text"> 9.2 Function scope </div> </a> <ul id="toc-Function_scope-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Ajax" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Ajax"> <div class="vector-toc-text"> 10 Ajax </div> </a> <button aria-controls="toc-Ajax-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> Toggle Ajax subsection </button> <ul id="toc-Ajax-sublist" class="vector-toc-list"> <li id="toc-Common_problems" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Common_problems"> <div class="vector-toc-text"> 10.1 Common problems </div> </a> <ul id="toc-Common_problems-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Basic_examples" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Basic_examples"> <div class="vector-toc-text"> 10.2 Basic examples </div> </a> <ul id="toc-Basic_examples-sublist" class="vector-toc-list"> <li id="toc-Fetch_page_content" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Fetch_page_content"> <div class="vector-toc-text"> 10.2.1 Fetch page content </div> </a> <ul id="toc-Fetch_page_content-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Get_the_wikitext_of_a_page" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Get_the_wikitext_of_a_page"> <div class="vector-toc-text"> 10.2.2 Get the wikitext of a page </div> </a> <ul id="toc-Get_the_wikitext_of_a_page-sublist" class="vector-toc-list"> <li id="toc-Using_module_mediawiki.api" class="vector-toc-list-item vector-toc-level-4"> <a class="vector-toc-link" href="#Using_module_mediawiki.api"> <div class="vector-toc-text"> 10.2.2.1 Using module mediawiki.api </div> </a> <ul id="toc-Using_module_mediawiki.api-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Using_plain_jQuery" class="vector-toc-list-item vector-toc-level-4"> <a class="vector-toc-link" href="#Using_plain_jQuery"> <div class="vector-toc-text"> 10.2.2.2 Using plain jQuery </div> </a> <ul id="toc-Using_plain_jQuery-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Edit_a_page_and_other_common_actions" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Edit_a_page_and_other_common_actions"> <div class="vector-toc-text"> 10.2.3 Edit a page and other common actions </div> </a> <ul id="toc-Edit_a_page_and_other_common_actions-sublist" class="vector-toc-list"> <li id="toc-Using_module_mediawiki.api_2" class="vector-toc-list-item vector-toc-level-4"> <a class="vector-toc-link" href="#Using_module_mediawiki.api_2"> <div class="vector-toc-text"> 10.2.3.1 Using module mediawiki.api </div> </a> <ul id="toc-Using_module_mediawiki.api_2-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Using_plain_jQuery_2" class="vector-toc-list-item vector-toc-level-4"> <a class="vector-toc-link" href="#Using_plain_jQuery_2"> <div class="vector-toc-text"> 10.2.3.2 Using plain jQuery </div> </a> <ul id="toc-Using_plain_jQuery_2-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Load_JavaScript_from_Wiki_page" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Load_JavaScript_from_Wiki_page"> <div class="vector-toc-text"> 10.2.4 Load JavaScript from Wiki page </div> </a> <ul id="toc-Load_JavaScript_from_Wiki_page-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Load_JSON_from_Wiki_page" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Load_JSON_from_Wiki_page"> <div class="vector-toc-text"> 10.2.5 Load JSON from Wiki page </div> </a> <ul id="toc-Load_JSON_from_Wiki_page-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> </ul> </li> <li id="toc-Working_with_CSS" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Working_with_CSS"> <div class="vector-toc-text"> 11 Working with CSS </div> </a> <button aria-controls="toc-Working_with_CSS-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> Toggle Working with CSS subsection </button> <ul id="toc-Working_with_CSS-sublist" class="vector-toc-list"> <li id="toc-Publishing_a_CSS_file" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Publishing_a_CSS_file"> <div class="vector-toc-text"> 11.1 Publishing a CSS file </div> </a> <ul id="toc-Publishing_a_CSS_file-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-See_also" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#See_also"> <div class="vector-toc-text"> 12 See also </div> </a> <ul id="toc-See_also-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Notes" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Notes"> <div class="vector-toc-text"> 13 Notes </div> </a> <ul id="toc-Notes-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-References" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#References"> <div class="vector-toc-text"> 14 References </div> </a> <ul id="toc-References-sublist" class="vector-toc-list"> </ul> </li> </ul> </div> </div> </nav> </div> </div> <div class="mw-content-container"> <main id="content" class="mw-body"> <header class="mw-body-header vector-page-titlebar"> <nav aria-label="Contents" class="vector-toc-landmark"> <div id="vector-page-titlebar-toc" class="vector-dropdown vector-page-titlebar-toc vector-button-flush-left" > <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox " aria-label="Toggle the table of contents" > <label id="vector-page-titlebar-toc-label" for="vector-page-titlebar-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" > Toggle the table of contents </label> <div class="vector-dropdown-content"> <div id="vector-page-titlebar-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <h1 id="firstHeading" class="firstHeading mw-first-heading">Wikipedia:User scripts/Guide</h1> <div id="p-lang-btn" class="vector-dropdown mw-portlet mw-portlet-lang" > <input type="checkbox" id="p-lang-btn-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-lang-btn" class="vector-dropdown-checkbox mw-interlanguage-selector" aria-label="Go to an article in another language. Available in 5 languages" > <label id="p-lang-btn-label" for="p-lang-btn-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--action-progressive mw-portlet-lang-heading-5" aria-hidden="true" > 5 languages </label> <div class="vector-dropdown-content"> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li class="interlanguage-link interwiki-he mw-list-item"><a href="https://he.wikipedia.org/wiki/%D7%95%D7%99%D7%A7%D7%99%D7%A4%D7%93%D7%99%D7%94:%D7%A1%D7%A7%D7%A8%D7%99%D7%A4%D7%98%D7%99%D7%9D/%D7%A4%D7%99%D7%AA%D7%95%D7%97_%D7%A1%D7%A7%D7%A8%D7%99%D7%A4%D7%98%D7%99%D7%9D" title="ויקיפדיה:סקריפטים/פיתוח סקריפטים – Hebrew" lang="he" hreflang="he" data-title="ויקיפדיה:סקריפטים/פיתוח סקריפטים" data-language-autonym="עברית" data-language-local-name="Hebrew" class="interlanguage-link-target">עברית</a></li><li class="interlanguage-link interwiki-nl mw-list-item"><a href="https://nl.wikipedia.org/wiki/Help:Gebruik_van_scripts" title="Help:Gebruik van scripts – Dutch" lang="nl" hreflang="nl" data-title="Help:Gebruik van scripts" data-language-autonym="Nederlands" data-language-local-name="Dutch" class="interlanguage-link-target">Nederlands</a></li><li class="interlanguage-link interwiki-ru mw-list-item"><a href="https://ru.wikipedia.org/wiki/%D0%9F%D1%80%D0%BE%D0%B5%D0%BA%D1%82:%D0%A2%D0%B5%D1%85%D0%BD%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B5_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B/%D0%9F%D0%B5%D1%80%D1%81%D0%BE%D0%BD%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5_%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D1%8B/%D0%A0%D1%83%D0%BA%D0%BE%D0%B2%D0%BE%D0%B4%D1%81%D1%82%D0%B2%D0%BE" title="Проект:Технические работы/Персональные скрипты/Руководство – Russian" lang="ru" hreflang="ru" data-title="Проект:Технические работы/Персональные скрипты/Руководство" data-language-autonym="Русский" data-language-local-name="Russian" class="interlanguage-link-target">Русский</a></li><li class="interlanguage-link interwiki-si mw-list-item"><a href="https://si.wikipedia.org/wiki/%E0%B7%80%E0%B7%92%E0%B6%9A%E0%B7%92%E0%B6%B4%E0%B7%93%E0%B6%A9%E0%B7%92%E0%B6%BA%E0%B7%8F:User_scripts/Guide" title="විකිපීඩියා:User scripts/Guide – Sinhala" lang="si" hreflang="si" data-title="විකිපීඩියා:User scripts/Guide" data-language-autonym="සිංහල" data-language-local-name="Sinhala" class="interlanguage-link-target">සිංහල</a></li><li class="interlanguage-link interwiki-zh mw-list-item"><a href="https://zh.wikipedia.org/wiki/Help:%E7%BB%B4%E5%9F%BA%E7%94%A8%E6%88%B7%E8%84%9A%E6%9C%AC%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97" title="Help:维基用户脚本开发指南 – Chinese" lang="zh" hreflang="zh" data-title="Help:维基用户脚本开发指南" data-language-autonym="中文" data-language-local-name="Chinese" class="interlanguage-link-target">中文</a></li> </ul> <div class="after-portlet after-portlet-lang"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q13359134#sitelinks-wikipedia" title="Edit interlanguage links" class="wbc-editpage">Edit links</a></div> </div> </div> </div> </header> <div class="vector-page-toolbar"> <div class="vector-page-toolbar-container"> <div id="left-navigation"> <nav aria-label="Namespaces"> <div id="p-associated-pages" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-associated-pages" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-nstab-project" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Wikipedia:User_scripts/Guide" title="View the project page [c]" accesskey="c">Project page</a></li><li id="ca-talk" class="vector-tab-noicon mw-list-item"><a href="/wiki/Wikipedia_talk:User_scripts/Guide" rel="discussion" title="Discuss improvements to the content page [t]" accesskey="t">Talk</a></li> </ul> </div> </div> <div id="vector-variants-dropdown" class="vector-dropdown emptyPortlet" > <input type="checkbox" id="vector-variants-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-variants-dropdown" class="vector-dropdown-checkbox " aria-label="Change language variant" > <label id="vector-variants-dropdown-label" for="vector-variants-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" >English </label> <div class="vector-dropdown-content"> <div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </nav> </div> <div id="right-navigation" class="vector-collapsible"> <nav aria-label="Views"> <div id="p-views" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-views" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-view" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Wikipedia:User_scripts/Guide">Read</a></li><li id="ca-edit" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit" title="Edit this page [e]" accesskey="e">Edit</a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=history" title="Past revisions of this page [h]" accesskey="h">View history</a></li> </ul> </div> </div> </nav> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-dropdown" class="vector-dropdown vector-page-tools-dropdown" > <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="Tools" > <label id="vector-page-tools-dropdown-label" for="vector-page-tools-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" >Tools </label> <div class="vector-dropdown-content"> <div id="vector-page-tools-unpinned-container" class="vector-unpinned-container"> <div id="vector-page-tools" class="vector-page-tools vector-pinnable-element"> <div class="vector-pinnable-header vector-page-tools-pinnable-header vector-pinnable-header-unpinned" data-feature-name="page-tools-pinned" data-pinnable-element-id="vector-page-tools" data-pinned-container-id="vector-page-tools-pinned-container" data-unpinned-container-id="vector-page-tools-unpinned-container" > <div class="vector-pinnable-header-label">Tools</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-page-tools.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-page-tools.unpin">hide</button> </div> <div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-has-collapsible-items" title="More options" > <div class="vector-menu-heading"> Actions </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/wiki/Wikipedia:User_scripts/Guide">Read</a></li><li id="ca-more-edit" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit" title="Edit this page [e]" accesskey="e">Edit</a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=history">View history</a></li> </ul> </div> </div> <div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb" > <div class="vector-menu-heading"> General </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-whatlinkshere" class="mw-list-item"><a href="/wiki/Special:WhatLinksHere/Wikipedia:User_scripts/Guide" title="List of all English Wikipedia pages containing links to this page [j]" accesskey="j">What links here</a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/wiki/Special:RecentChangesLinked/Wikipedia:User_scripts/Guide" rel="nofollow" title="Recent changes in pages linked from this page [k]" accesskey="k">Related changes</a></li><li id="t-upload" class="mw-list-item"><a href="/wiki/Wikipedia:File_Upload_Wizard" title="Upload files [u]" accesskey="u">Upload file</a></li><li id="t-specialpages" class="mw-list-item"><a href="/wiki/Special:SpecialPages" title="A list of all special pages [q]" accesskey="q">Special pages</a></li><li id="t-permalink" class="mw-list-item"><a href="/w/index.php?title=Wikipedia:User_scripts/Guide&oldid=1241694437" title="Permanent link to this revision of this page">Permanent link</a></li><li id="t-info" class="mw-list-item"><a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=info" title="More information about this page">Page information</a></li><li id="t-urlshortener" class="mw-list-item"><a href="/w/index.php?title=Special:UrlShortener&url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FWikipedia%3AUser_scripts%2FGuide">Get shortened URL</a></li><li id="t-urlshortener-qrcode" class="mw-list-item"><a href="/w/index.php?title=Special:QrCode&url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FWikipedia%3AUser_scripts%2FGuide">Download QR code</a></li> </ul> </div> </div> <div id="p-coll-print_export" class="vector-menu mw-portlet mw-portlet-coll-print_export" > <div class="vector-menu-heading"> Print/export </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="coll-download-as-rl" class="mw-list-item"><a href="/w/index.php?title=Special:DownloadAsPdf&page=Wikipedia%3AUser_scripts%2FGuide&action=show-download-screen" title="Download this page as a PDF file">Download as PDF</a></li><li id="t-print" class="mw-list-item"><a href="/w/index.php?title=Wikipedia:User_scripts/Guide&printable=yes" title="Printable version of this page [p]" accesskey="p">Printable version</a></li> </ul> </div> </div> <div id="p-wikibase-otherprojects" class="vector-menu mw-portlet mw-portlet-wikibase-otherprojects" > <div class="vector-menu-heading"> In other projects </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-wikibase" class="wb-otherproject-link wb-otherproject-wikibase-dataitem mw-list-item"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q13359134" title="Structured data on this page hosted by Wikidata [g]" accesskey="g">Wikidata item</a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> </div> </div> </div> <div class="vector-column-end"> <div class="vector-sticky-pinned-container"> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-pinned-container" class="vector-pinned-container"> </div> </nav> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-pinned-container" class="vector-pinned-container"> <div id="vector-appearance" class="vector-appearance vector-pinnable-element"> <div class="vector-pinnable-header vector-appearance-pinnable-header vector-pinnable-header-pinned" data-feature-name="appearance-pinned" data-pinnable-element-id="vector-appearance" data-pinned-container-id="vector-appearance-pinned-container" data-unpinned-container-id="vector-appearance-unpinned-container" > <div class="vector-pinnable-header-label">Appearance</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-appearance.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-appearance.unpin">hide</button> </div> </div> </div> </nav> </div> </div> <div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container> <div class="vector-body-before-content"> <div class="mw-indicators"> </div> <div id="siteSub" class="noprint">From Wikipedia, the free encyclopedia</div> </div> <div id="contentSub"><div id="mw-content-subtitle"><div class="subpages">< <bdi dir="ltr"><a href="/wiki/Wikipedia:User_scripts" title="Wikipedia:User scripts">Wikipedia:User scripts</a></bdi></div></div></div> <div id="mw-content-text" class="mw-body-content"><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr"><style data-mw-deduplicate="TemplateStyles:r1238436933">.mw-parser-output .ombox{margin:4px 0;border-collapse:collapse;border:1px solid #a2a9b1;background-color:var(--background-color-neutral-subtle,#f8f9fa);box-sizing:border-box;color:var(--color-base,#202122)}.mw-parser-output .ombox.mbox-small{font-size:88%;line-height:1.25em}.mw-parser-output .ombox-speedy{border:2px solid #b32424;background-color:#fee7e6}.mw-parser-output .ombox-delete{border:2px solid #b32424}.mw-parser-output .ombox-content{border:1px solid #f28500}.mw-parser-output .ombox-style{border:1px solid #fc3}.mw-parser-output .ombox-move{border:1px solid #9932cc}.mw-parser-output .ombox-protection{border:2px solid #a2a9b1}.mw-parser-output .ombox .mbox-text{border:none;padding:0.25em 0.9em;width:100%}.mw-parser-output .ombox .mbox-image{border:none;padding:2px 0 2px 0.9em;text-align:center}.mw-parser-output .ombox .mbox-imageright{border:none;padding:2px 0.9em 2px 0;text-align:center}.mw-parser-output .ombox .mbox-empty-cell{border:none;padding:0;width:1px}.mw-parser-output .ombox .mbox-invalid-type{text-align:center}@media(min-width:720px){.mw-parser-output .ombox{margin:4px 10%}.mw-parser-output .ombox.mbox-small{clear:right;float:right;margin:4px 0 4px 1em;width:238px}}body.skin--responsive .mw-parser-output table.ombox img{max-width:none!important}@media screen{html.skin-theme-clientpref-night .mw-parser-output .ombox-speedy{background-color:#310402}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .ombox-speedy{background-color:#310402}}</style><table class="plainlinks ombox ombox-notice noprint" role="presentation"><tbody><tr><td class="mbox-empty-cell"></td><td class="mbox-text" style="text-align:center; margin:1em 0em;"><style data-mw-deduplicate="TemplateStyles:r1129693374">.mw-parser-output .hlist dl,.mw-parser-output .hlist ol,.mw-parser-output .hlist ul{margin:0;padding:0}.mw-parser-output .hlist dd,.mw-parser-output .hlist dt,.mw-parser-output .hlist li{margin:0;display:inline}.mw-parser-output .hlist.inline,.mw-parser-output .hlist.inline dl,.mw-parser-output .hlist.inline ol,.mw-parser-output .hlist.inline ul,.mw-parser-output .hlist dl dl,.mw-parser-output .hlist dl ol,.mw-parser-output .hlist dl ul,.mw-parser-output .hlist ol dl,.mw-parser-output .hlist ol ol,.mw-parser-output .hlist ol ul,.mw-parser-output .hlist ul dl,.mw-parser-output .hlist ul ol,.mw-parser-output .hlist ul ul{display:inline}.mw-parser-output .hlist .mw-empty-li{display:none}.mw-parser-output .hlist dt::after{content:": "}.mw-parser-output .hlist dd::after,.mw-parser-output .hlist li::after{content:" · ";font-weight:bold}.mw-parser-output .hlist dd:last-child::after,.mw-parser-output .hlist dt:last-child::after,.mw-parser-output .hlist li:last-child::after{content:none}.mw-parser-output .hlist dd dd:first-child::before,.mw-parser-output .hlist dd dt:first-child::before,.mw-parser-output .hlist dd li:first-child::before,.mw-parser-output .hlist dt dd:first-child::before,.mw-parser-output .hlist dt dt:first-child::before,.mw-parser-output .hlist dt li:first-child::before,.mw-parser-output .hlist li dd:first-child::before,.mw-parser-output .hlist li dt:first-child::before,.mw-parser-output .hlist li li:first-child::before{content:" (";font-weight:normal}.mw-parser-output .hlist dd dd:last-child::after,.mw-parser-output .hlist dd dt:last-child::after,.mw-parser-output .hlist dd li:last-child::after,.mw-parser-output .hlist dt dd:last-child::after,.mw-parser-output .hlist dt dt:last-child::after,.mw-parser-output .hlist dt li:last-child::after,.mw-parser-output .hlist li dd:last-child::after,.mw-parser-output .hlist li dt:last-child::after,.mw-parser-output .hlist li li:last-child::after{content:")";font-weight:normal}.mw-parser-output .hlist ol{counter-reset:listitem}.mw-parser-output .hlist ol>li{counter-increment:listitem}.mw-parser-output .hlist ol>li::before{content:" "counter(listitem)"\a0 "}.mw-parser-output .hlist dd ol>li:first-child::before,.mw-parser-output .hlist dt ol>li:first-child::before,.mw-parser-output .hlist li ol>li:first-child::before{content:" ("counter(listitem)"\a0 "}</style><div class="hlist"> <ul><li><a href="/wiki/Wikipedia:Customisation" title="Wikipedia:Customisation">Wikipedia programming</a></li></ul> </div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1129693374"><div class="hlist"> <ul><li><a href="/wiki/Wikipedia:Bots" title="Wikipedia:Bots">Bots</a></li> <li><a href="https://www.mediawiki.org/wiki/Manual:Extensions" class="extiw" title="mw:Manual:Extensions">Extensions</a></li> <li><a href="/wiki/Wikipedia:Gadget" title="Wikipedia:Gadget">Gadgets</a></li> <li><a href="/wiki/Wikipedia:User_scripts" title="Wikipedia:User scripts">User scripts</a> <ul><li><a href="/wiki/Wikipedia:User_scripts/List" title="Wikipedia:User scripts/List">List</a></li> <li><a href="/wiki/Wikipedia:User_scripts/Most_imported_scripts" title="Wikipedia:User scripts/Most imported scripts">Ranking</a></li> <li><a href="/wiki/Wikipedia:User_scripts/Requests" title="Wikipedia:User scripts/Requests">Requests</a></li> <li><a class="mw-selflink selflink">Guide</a></li> <li><a href="/wiki/Wikipedia:Scripts" title="Wikipedia:Scripts">Other scripts</a></li> <li><a href="/wiki/Wikipedia:Scripts%2B%2B" title="Wikipedia:Scripts++">Newsletter</a></li></ul></li> <li><a href="/wiki/Wikipedia:Tools" title="Wikipedia:Tools">Tools</a></li></ul> </div></td></tr></tbody></table> <style data-mw-deduplicate="TemplateStyles:r1252059228">.mw-parser-output .module-shortcutboxplain{float:right;margin:0 0 0 1em;border:1px solid var(--border-color-base,#a2a9b1);background-color:var(--background-color-base,#fff);padding:0.3em 0.6em 0.2em 0.6em;text-align:center;font-size:85%}.mw-parser-output .module-shortcutboxleft{float:left;margin:0 1em 0 0}.mw-parser-output .module-shortcutlist{display:inline-block;border-bottom:1px solid var(--border-color-base,#a2a9b1);margin-bottom:0.2em}.mw-parser-output .module-shortcutboxplain ul{font-weight:bold}.mw-parser-output .module-shortcutanchordiv{position:relative;top:-3em}.mw-parser-output li .module-shortcutanchordiv{float:right}.mw-parser-output .mbox-imageright .module-shortcutboxplain{padding:0.4em 1em 0.4em 1em;line-height:1.3;margin:0}</style><div class="module-shortcutanchordiv"></div><div class="module-shortcutboxplain noprint" role="note"><div class="module-shortcutlist"><a href="/wiki/Wikipedia:Shortcut" title="Wikipedia:Shortcut">Shortcut</a></div><style data-mw-deduplicate="TemplateStyles:r1126788409">.mw-parser-output .plainlist ol,.mw-parser-output .plainlist ul{line-height:inherit;list-style:none;margin:0;padding:0}.mw-parser-output .plainlist ol li,.mw-parser-output .plainlist ul li{margin-bottom:0}</style><div class="plainlist"><ul><li><a class="external text" href="https://en.wikipedia.org/w/index.php?title=Wikipedia:US/G&redirect=no">WP:US/G</a></li></ul></div></div> <style data-mw-deduplicate="TemplateStyles:r1236090951">.mw-parser-output .hatnote{font-style:italic}.mw-parser-output div.hatnote{padding-left:1.6em;margin-bottom:0.5em}.mw-parser-output .hatnote i{font-style:normal}.mw-parser-output .hatnote+link+.hatnote{margin-top:-0.5em}@media print{body.ns-0 .mw-parser-output .hatnote{display:none!important}}</style><div role="note" class="hatnote navigation-not-searchable">This page is about writing user scripts for use on Wikipedia. For instructions on how to install user scripts, see <a href="/wiki/Wikipedia:User_scripts#How_do_you_install_user_scripts?" title="Wikipedia:User scripts">How do you install user scripts?</a></div> <meta property="mw:PageProp/toc"/> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Prerequisites" data-mw-thread-id="h-Prerequisites">Prerequisites</h2>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=1" title="Edit section: Prerequisites">edit</a>]</div> To write user scripts, you'll have to learn at least some of the programming language that they are written in: <a href="/wiki/JavaScript" title="JavaScript">JavaScript</a>. Try these links: <ul><li><a rel="nofollow" class="external text" href="https://developer.mozilla.org/docs/Web/JavaScript">Mozilla Developer Network's JavaScript site</a></li> <li><a rel="nofollow" class="external text" href="http://www.w3schools.com/js/">W3schools Javascript tutorial</a></li> <li><a href="/wiki/JavaScript_syntax" title="JavaScript syntax">JavaScript syntax</a></li> <li><a href="/wiki/JQuery" title="JQuery">jQuery</a></li></ul> Also, it would definitely help if you tried using <a href="/wiki/Wikipedia:User_scripts" title="Wikipedia:User scripts">one of our scripts</a> and got it working. The rest of this tutorial assumes you know where the various things are (all explained at <a href="/wiki/Wikipedia:User_scripts#How_do_you_install_user_scripts?" title="Wikipedia:User scripts">Wikipedia:User scripts § How do you install user scripts?</a>). <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Forking_an_existing_script" data-mw-thread-id="h-Forking_an_existing_script">Forking an existing script</h2>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=2" title="Edit section: Forking an existing script">edit</a>]</div> Starting out, it may be easier to modify an existing script to do what you want, rather than create a new script from scratch. This is called "forking". To do this, copy the script to a subpage, ending in ".js",<a href="#cite_note-contentmodel-1">[n. 1]</a> of your user page. Then, <a href="/wiki/Wikipedia:US#How_do_you_install_user_scripts?" class="mw-redirect" title="Wikipedia:US">install the new page</a> like a normal user script. <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Writing_a_script_from_scratch" data-mw-thread-id="h-Writing_a_script_from_scratch">Writing a script from scratch</h2>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=3" title="Edit section: Writing a script from scratch">edit</a>]</div> While you can write a script directly in your <a href="/wiki/Special:EditPage/Special:MyPage/common.js" title="Special:EditPage/Special:MyPage/common.js">common.js</a> page or skin.js (such as vector.js) page, it is usually better to create a new subpage for it in the form YourUserName/title.js, where title is the name of your script. That keeps your main js pages from getting cluttered, which is helpful when you have multiple scripts installed. You will also want to <a href="/wiki/Wikipedia:US#How_do_you_install_user_scripts?" class="mw-redirect" title="Wikipedia:US">install the new user script</a>. <div class="mw-heading mw-heading3"><h3 id="Hello_world" data-mw-thread-id="h-Hello_world-Writing_a_script_from_scratch">Hello world</h3>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=4" title="Edit section: Hello world">edit</a>]</div> To make a <a href="/wiki/Hello_world" class="mw-redirect" title="Hello world">Hello world</a> program, insert this code into your User:YourUserName/common.js file. <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>importScript('User:YourUserName/hello-world.js'); </pre></div> Next, create the page User:YourUserName/hello-world.js, and insert this code. <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>$('#bodyContent').prepend('Hello world!'); </pre></div> This will write "Hello world!" on every page, below the title, until you remove the code. User scripts are written in <a href="/wiki/JavaScript" title="JavaScript">JavaScript</a>, and both of the above code snippets are in JavaScript. The second snippet uses <a href="/wiki/JQuery" title="JQuery">JQuery</a>, which is a JavaScript library that specializes in manipulating <a href="/wiki/HTML" title="HTML">HTML</a>. <code>$</code> is a JQuery <a href="/wiki/Function_(computer_programming)" title="Function (computer programming)">function</a> that lets us target the <a href="/wiki/HTML" title="HTML">HTML</a> element we want. <code>#bodyContent</code> is a string in <a href="/wiki/CSS_selector" class="mw-redirect" title="CSS selector">CSS selector</a> syntax, and means target the HTML element with property <code>id="bodyContent"</code> . <code>prepend</code> is a JQuery function that inserts HTML code as a child of the <code>#bodyContent</code> element. <code>Hello world!</code> is the HTML code to be inserted. <div class="mw-heading mw-heading3"><h3 id="Your_first_script" data-mw-thread-id="h-Your_first_script-Writing_a_script_from_scratch">Your first script</h3>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=5" title="Edit section: Your first script">edit</a>]</div> We will be writing an independent module by modifying your js, so you may want to get our <a href="/wiki/Wikipedia:User_scripts/Module_template" title="Wikipedia:User scripts/Module template">module template</a>. For the purpose of this tutorial, we will write a simple version of the <a href="/wiki/Wikipedia:WikiProject_User_scripts/Scripts/Quick_wikify" title="Wikipedia:WikiProject User scripts/Scripts/Quick wikify">Quick wikify</a> module, which adds the <code>{{Wikify}}</code> maintenance template to articles. To begin, change <code>MODULE_NAME</code> in the module template to "Qwikify". Your template should look like this: <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>// Qwikify $( document ).ready( function () { MODULE_CODE; } ); </pre></div> In <code>MODULE_CODE</code>, we want to add the "Wikify" tab, so we will use the <a href="#Adding_elements"><code>addPortletLink()</code> function</a> (which requires the <code>mediawiki.util</code> module). Replace <code>MODULE_CODE</code> with a call to this function. Then we'll bind an event handler so that when this link is clicked, we will call another function named <code>doQwikify()</code> that will actually execute the code. The <code>name</code> is what is shown on the tab, so set that to <code>'Wikify'</code>. Most tabs have an ID of <code>ca-name</code>, so set the ID to <code>'ca-wikify'</code>. The title (also known as <a href="/wiki/Mouseover" title="Mouseover">mouseover</a> or <a href="/wiki/Rollover" class="mw-disambig" title="Rollover">rollover</a> text) should be something like <code>'Mark for wikification'</code>. Lastly, we use jQuery's <a rel="nofollow" class="external text" href="//api.jquery.com/click/">.click()</a> to listen for clicks on this link, and when that happens, execute a function. After we call <code>doQwikify()</code>, it says <code>event.preventDefault()</code>. Since we clicked on a link, we need to tell the browser to prevent its default behavior (which is going to a the url, <code>'#'</code>). We want the page to stay right where it's at, so to prevent the browser from following the link, we prevent that and do our own custom action. Altogether, your new function should look like this: <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>// Make sure the utilities module is loaded (will only load if not already) mw.loader.using( 'mediawiki.util', function () { // Wait for the page to be parsed $( document ).ready( function () { // See the "Portlets (menus and tabs)" subsection below var link = mw.util.addPortletLink( 'p-cactions', '#', 'Wikify', 'ca-wikify', 'Mark for wikification'); $( link ).click( function ( event ) { event.preventDefault(); doQwikify(); } ); } ); } ); </pre></div> Now, we must write our actual <code>doQwikify()</code> function. It will edit the edit box, so we need to get the name of that and its form. Viewing the source of the page shows that the form is named <code>editform</code> and the textbox is named <code>wpTextbox1</code>, meaning that the actual text is <code>document.editform.wpTextbox1.value</code>. To add {{<a href="/wiki/Template:Wikify" title="Template:Wikify">wikify</a>}} (and two new lines), we simply do: <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>document.editform.wpTextbox1.value = "{" + "{wikify}}\n\n" + document.editform.wpTextbox1.value; </pre></div> (We separate the two "{" brackets in the front of the wikify template so it doesn't get expanded when we write this code on the wiki.) Finally, we want to submit the form for the user. Luckily, JavaScript has a built-in function just for this named <code>submit()</code>. To submit our editing form, use <code>document.editform.submit()</code>. Your code should now look something like this: <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>function doQwikify() { document.editform.wpTextbox1.value = "{" + "{wikify}}\n\n" + document.editform.wpTextbox1.value; document.editform.submit(); } </pre></div> And that's it! Save the common.js and then do a hard refresh. Go and edit a page such as the <a href="/wiki/Wikipedia:Sandbox" title="Wikipedia:Sandbox">Sandbox</a>, and see what happens!<a href="#cite_note-2">[1]</a> Note that syntax highlighting must be disabled for this to work. <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Built-in_scripts" data-mw-thread-id="h-Built-in_scripts">Built-in scripts</h2>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=6" title="Edit section: Built-in scripts">edit</a>]</div> All Wikipedia pages include some built-in <a href="/wiki/MediaWiki" title="MediaWiki">MediaWiki</a> JavaScript code, with variables and functions that can be used in user scripts. Some of them were already mentioned (<code>$()</code>, <code>importScript()</code>, <code>mw.util</code>). This code is generally loaded as <a href="https://www.mediawiki.org/wiki/ResourceLoader/Core_modules" class="extiw" title="mw:ResourceLoader/Core modules">ResourceLoader modules</a> (some of it preloaded, some loaded on demand) and ends up in properties of these globally available objects: <ul><li><code>mw</code> (<code>mediaWiki</code>) for MediaWiki core,</li> <li><code>$</code> (<code>jQuery</code>) for <a href="https://www.mediawiki.org/wiki/jQuery" class="extiw" title="mw:jQuery">jQuery</a>,</li> <li><code>OO</code> for <a href="https://www.mediawiki.org/wiki/OOjs" class="extiw" title="mw:OOjs">OOjs</a>.</li></ul> Some commonly accessed properties of <code>mw</code> include <code>mw.config</code>, <code>mw.user.options</code>, <code>mw.util</code>, <code>mw.Title</code>, <code>mw.loader</code>, and <code>mw.hook</code>. <code>OO.ui</code> is the namespace of <a href="https://www.mediawiki.org/wiki/OOUI" class="extiw" title="mw:OOUI">OOUI</a>. See <a href="https://www.mediawiki.org/wiki/ResourceLoader/Core_modules" class="extiw" title="mw:ResourceLoader/Core modules">mw:ResourceLoader/Core modules</a> for more details. <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Development_and_testing" data-mw-thread-id="h-Development_and_testing">Development and testing</h2>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=7" title="Edit section: Development and testing">edit</a>]</div> The following <a href="/wiki/Development_environment" class="mw-redirect" title="Development environment">development environments</a> can be used to develop and test your script. <div class="mw-heading mw-heading3"><h3 id="Basic" data-mw-thread-id="h-Basic-Development_and_testing">Basic</h3>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=8" title="Edit section: Basic">edit</a>]</div> <ul><li>Using the preview button: You can edit your script directly on your <a href="/wiki/Special:MyPage/common.js" title="Special:MyPage/common.js">/common.js</a> page, then click [Show preview] and the new code is executed right away on the preview page.</li> <li>Saving it: If required elements are missing on the preview page (for example, your script does something on history pages), you will have to save the script in order to test it. However, it's not convenient and creates unnecessary entries in the page history.</li> <li>Execute it in your browser's JavaScript console: All modern browsers come with a JavaScript console and other development tools. You can type or paste and execute your code there; script errors and warnings will also be shown there. How to open the console depends on your browser: <ul><li>In Google Chrome and Edge – press <style data-mw-deduplicate="TemplateStyles:r1249182868">.mw-parser-output .keyboard-key{border:1px solid #aaa;border-radius:0.2em;box-shadow:0.1em 0.1em 0.2em rgba(0,0,0,0.1);background-color:var(--background-color-neutral-subtle,#f8f9fa);background-image:linear-gradient(to bottom,var(--background-color-neutral,#eaecf0),var(--background-color-neutral-subtle,#f8f9fa),var(--background-color-neutral,#eaecf0));color:var(--color-base,#202122);padding:0.1em 0.3em;font-family:inherit;font-size:0.85em}</style><kbd class="keyboard-key nowrap">Ctrl</kbd>+<kbd class="keyboard-key nowrap">⇧ Shift</kbd>+<kbd class="keyboard-key nowrap">J</kbd></li> <li>In Firefox – press <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1249182868"><kbd class="keyboard-key nowrap">F12</kbd></li> <li>In Safari – press <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1249182868"><kbd class="keyboard-key nowrap">Ctrl</kbd>+<kbd class="keyboard-key nowrap">Alt</kbd>+<kbd class="keyboard-key nowrap">C</kbd></li></ul></li></ul> <dl><dd>You may need to click the Console tab if a different pane is currently open.</dd></dl> <div class="mw-heading mw-heading3"><h3 id="Loading_it_from_a_localhost_web_server" data-mw-thread-id="h-Loading_it_from_a_localhost_web_server-Development_and_testing">Loading it from a localhost web server</h3>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=9" title="Edit section: Loading it from a localhost web server">edit</a>]</div> The best and most recommended way to load a JavaScript file during development is from your local web server (see below for an easy way to install a web server). Put this string in your <a href="/wiki/Special:MyPage/common.js" title="Special:MyPage/common.js">/common.js</a>: <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>mw.loader.load( 'https://localhost/wikipediatest.js' ); </pre></div> In some environment, you need write this like<a href="#cite_note-3">[2]</a>: <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>mw.loader.load( 'http://127.0.0.1/wikipediatest.js' ); </pre></div> Then run any <a href="/wiki/Web_server" title="Web server">web server</a> on your computer and create the <kbd>wikipediatest.js</kbd> file in the appropriate folder. The code inside this file will be executed as if it was inside your personal script. You can edit your <kbd>wikipediatest.js</kbd> file with any text editor, perhaps with syntax highlighting and other convenient features, save the file and simply reload any Wikipedia page to see the results. (You don't need to wait, and if your web server is nice or you set it right, you don't even need to <a href="/wiki/Wikipedia:Bypass_your_cache" title="Wikipedia:Bypass your cache">bypass your browser cache</a>.) Most modern code editors and IDEs allow you to set up a localhost server – eg. use <a rel="nofollow" class="external text" href="https://atom.io/packages/atom-live-server">atom-live-server</a> in <a href="/wiki/Atom_(text_editor)" title="Atom (text editor)">Atom</a>, and <a rel="nofollow" class="external text" href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer">Live Server</a> in <a href="/wiki/VS_Code" class="mw-redirect" title="VS Code">VS Code</a>. <a href="/wiki/WebStorm" class="mw-redirect" title="WebStorm">WebStorm</a> and <a href="/wiki/PhpStorm" class="mw-redirect" title="PhpStorm">PhpStorm</a> have the feature built in, without requiring an extension. You can also use a third party program such as <a href="/wiki/Node.js" title="Node.js">Node.js</a>'s <code>npx http-server</code> command (<a rel="nofollow" class="external text" href="https://www.youtube.com/watch?v=hnTiNvv5Eec">video tutorial</a>), or <a href="/wiki/XAMPP" title="XAMPP">XAMPP</a>. If you have <a href="/wiki/Python_(language)" class="mw-redirect" title="Python (language)">Python</a> installed, you can run <code>python -m http.server</code> from command-line from the folder your script is in. On Windows, you could also use for example <a rel="nofollow" class="external text" href="https://www.ritlabs.com/en/products/tinyweb/download.php">TinyWeb</a> which is less than 100 kbyte on disk and doesn't require installation. Save and unzip <kbd>tinyweb.zip</kbd> for example into <kbd>c:\Program Files\Tinyweb</kbd>, create a shortcut to <kbd>tiny.exe</kbd>, and add an argument in shortcut properties — path to your folder with <kbd>wikipediatest.js</kbd> and any file <kbd>index.html</kbd> (required). Start TinyWeb with this shortcut; unload it with Task Manager. Note that this method doesn't work in <a href="/wiki/Opera_(web_browser)" title="Opera (web browser)">Opera</a> 9.50 (and later) due to added security restrictions, see <a rel="nofollow" class="external text" href="http://www.opera.com/docs/changelogs/windows/950/">Opera 9.50 for Windows changelog</a>: "Local servers can use remote resources, but not vice versa". In <a href="/wiki/Google_Chrome" title="Google Chrome">Chrome</a>, it may be necessary to <a rel="nofollow" class="external text" href="http://stackoverflow.com/a/25075349/6357045">enable SSL</a>, otherwise the script will refuse to load. <div class="mw-heading mw-heading3"><h3 id="Browser-specific" data-mw-thread-id="h-Browser-specific-Development_and_testing">Browser-specific</h3>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=10" title="Edit section: Browser-specific">edit</a>]</div> Some browsers allow you to automatically execute your JavaScript code on specific web pages. This way you don't have to be logged in to Wikipedia. One example is <a href="/wiki/Tampermonkey" title="Tampermonkey">Tampermonkey</a>. However, making user scripts work with one of these extensions might require some modifications to the script code. <div class="mw-heading mw-heading3"><h3 id="Running_pieces_of_code" data-mw-thread-id="h-Running_pieces_of_code-Development_and_testing">Running pieces of code</h3>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=11" title="Edit section: Running pieces of code">edit</a>]</div> You can run pieces of code on already loaded pages via the JavaScript console. See the <a rel="nofollow" class="external text" href="https://developer.chrome.com/docs/devtools/console/javascript/">guide for doing this in Chrome</a>. It works similarly in most other browsers. In addition, <a href="/wiki/Chromium" title="Chromium">Chromium</a>-based browsers have a <a rel="nofollow" class="external text" href="https://developer.chrome.com/docs/devtools/javascript/snippets">snippets</a> feature where short pieces of JavaScript code can be saved and debugged. <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Publishing" data-mw-thread-id="h-Publishing">Publishing</h2>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=12" title="Edit section: Publishing">edit</a>]</div> Once you have finished the user script code, you can save it as a page so that others can import it. By convention, scripts are in your userspace and have titles ending in ".js",<a href="#cite_note-contentmodel-1">[n. 1]</a> for example "User:YourUsernameHere/MyCoolScript.js". Others can then <a href="/wiki/Wikipedia:US#How_do_you_install_user_scripts?" class="mw-redirect" title="Wikipedia:US">install the new script</a>. <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Text_editors_and_debugging" data-mw-thread-id="h-Text_editors_and_debugging">Text editors and debugging</h2>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=13" title="Edit section: Text editors and debugging">edit</a>]</div> <div class="mw-heading mw-heading3"><h3 id="Text_editors" data-mw-thread-id="h-Text_editors-Text_editors_and_debugging">Text editors</h3>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=14" title="Edit section: Text editors">edit</a>]</div> You can use anything from a simple <a href="/wiki/Text_editor" title="Text editor">text editor</a>, to a more feature-packed <a href="/wiki/Code_editor" class="mw-redirect" title="Code editor">code editor</a> or <a href="/wiki/Integrated_development_environment" title="Integrated development environment">IDE</a>. Here are some features we recommend: <ul><li>Color code JavaScript code</li> <li>Quickly insert standard JavaScript keywords and methods (<a href="/wiki/Code_completion" title="Code completion">code completion</a>) <ul><li>With the help of type definition libraries, you may also get code completion for the <a href="#Built-in_scripts">globally available objects</a> of <a rel="nofollow" class="external text" href="https://www.npmjs.com/package/types-mediawiki">MediaWiki</a>, <a rel="nofollow" class="external text" href="https://www.npmjs.com/package/@types/jquery">jQuery</a>, <a rel="nofollow" class="external text" href="https://www.npmjs.com/package/@types/oojs">OOjs</a>, and <a rel="nofollow" class="external text" href="https://www.npmjs.com/package/@types/oojs-ui">OOUI</a>.</li></ul></li> <li>Show the list of all functions and quickly jump to any function</li></ul> Here are some recommended editors, by operating system. <ul><li>Windows <ul><li><a href="/wiki/VS_Code" class="mw-redirect" title="VS Code">VS Code</a> (cross-platform)</li> <li><a href="/wiki/Notepad%2B%2B" title="Notepad++">Notepad++</a></li></ul></li> <li>Mac OS X <ul><li><a href="/wiki/Xcode" title="Xcode">Xcode</a></li> <li><a href="/wiki/JEdit" title="JEdit">JEdit</a> (cross-platform)</li> <li><a href="/wiki/Komodo_Edit" title="Komodo Edit">Komodo Edit</a> (cross-platform)</li> <li><a href="/wiki/Aptana_Studio" class="mw-redirect" title="Aptana Studio">Aptana Studio</a> (cross-platform)</li> <li><a href="/wiki/TextMate" title="TextMate">TextMate</a> (not free)</li> <li><a href="/wiki/Coda_(web_development_software)" title="Coda (web development software)">Coda</a> (not free)</li> <li><a href="/wiki/PhpStorm" class="mw-redirect" title="PhpStorm">PhpStorm</a> (not free, cross-platform, a free license for MediaWiki Developers is also available<a href="#cite_note-4">[3]</a>)</li></ul></li> <li>Linux <ul><li><a href="/wiki/Gedit" title="Gedit">gedit</a> (may come with Linux)</li> <li><a href="/wiki/Kate_(text_editor)" title="Kate (text editor)">Kate</a> (may come with Linux)</li></ul></li></ul> <div class="mw-heading mw-heading3"><h3 id="JavaScript_Debuggers" data-mw-thread-id="h-JavaScript_Debuggers-Text_editors_and_debugging">JavaScript Debuggers</h3>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=15" title="Edit section: JavaScript Debuggers">edit</a>]</div> These are typically built into browsers, in their DevTools window. Debuggers allow you to step debug (go through your JavaScript code line-by-line, hover over variables to see their values, etc.) <ul><li><a href="/wiki/Firefox" title="Firefox">Firefox</a> - use Tools → JavaScript Console which shows all JavaScript and CSS errors.</li> <li><a href="/wiki/Google_Chrome" title="Google Chrome">Chrome</a> and <a href="/wiki/Microsoft_Edge" title="Microsoft Edge">Edge</a> - use Tools → Developer Tools.</li> <li><a href="/wiki/Safari_(web_browser)" title="Safari (web browser)">Safari</a> - Safari → Preferences → Advanced and enable the "Show Develop menu in menu bar" option. Then use Develop → Show Web Inspector to open up the development tools.</li> <li><a href="/wiki/Opera_browser" class="mw-redirect" title="Opera browser">Opera</a> - use Tools → Advanced → Error Console which shows all JavaScript and CSS errors.</li></ul> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Basic_techniques" data-mw-thread-id="h-Basic_techniques">Basic techniques</h2>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=16" title="Edit section: Basic techniques">edit</a>]</div> <div class="mw-heading mw-heading3"><h3 id="Running_code_on_page_load" data-mw-thread-id="h-Running_code_on_page_load-Basic_techniques">Running code on page load</h3>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=17" title="Edit section: Running code on page load">edit</a>]</div> The personal <code>user</code> module (built from /common.js, /common.css and optionally the skin-specific files for the current skin; see <a href="#Writing_a_script_from_scratch">above</a>) and <a href="/wiki/Wikipedia:Gadget" title="Wikipedia:Gadget">gadgets</a> are loaded on all pages. Most scripts will want to manipulate elements on the page; to do so the page needs to be ready (which may not be the case at the time the modules are loaded). We can defer execution of code by using a special function. <div class="mw-heading mw-heading4"><h4 id="$(document).ready(...)" data-mw-thread-id="h-$(document).ready(...)-Running_code_on_page_load"><code>$(document).ready(...)</code></h4>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=18" title="Edit section: $(document).ready(...)">edit</a>]</div> One option is <code><a rel="nofollow" class="external text" href="//api.jquery.com/ready/">.ready()</a></code> from <a href="/wiki/JQuery" title="JQuery">jQuery</a>. <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>// Define our main function function myScript() { // ... code ... }; // Schedule it to run after the HTML page is parsed $( document ).ready( myScript ); // This shorthand is also valid jQuery( myScript ); </pre></div> Since the function is called only once, many users prefer to shorten this code with an <a href="/wiki/Anonymous_function" title="Anonymous function">anonymous function</a>: <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>$( document ).ready( function () { // ... code ... } ); // Or jQuery( function () { // ... code ... } ); </pre></div> Note: <code>$</code> and <code>jQuery</code> are the same object; choosing between them is purely a matter of opinion. Many scripts use this function simply to add some script interface, such as a link in a portlet. Then the main part of the code is executed after the user clicks on that link. <div class="mw-heading mw-heading4"><h4 id="mw.hook('wikipage.content').add(...)" data-mw-thread-id="h-mw.hook('wikipage.content').add(...)-Running_code_on_page_load"><code>mw.hook('wikipage.content').add(...)</code></h4>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=19" title="Edit section: mw.hook('wikipage.content').add(...)">edit</a>]</div> However, if your code works with the content part of the page (the <code>#mw-content-text</code> element), you should use the <code><a class="external text" href="https://doc.wikimedia.org/mediawiki-core/master/js/Hooks.html#~event:'wikipage.content'">'wikipage.content'</a></code> <a href="/wiki/Hooking" title="Hooking">hook</a> instead. This way your code will successfully reprocess the page when it is updated asynchronously and the hook is fired again. There are plenty of tools which do so, ranging from edit preview to watchlist autoupdate. Be sure to only work with the descendants of the <code>$content</code> element that your handler function takes and not the whole page. Otherwise, you may end up running the same code for the same elements many times. Note that the <code>'wikipage.content'</code> hook may be fired really many times. Be cautious about what comes in the <code>$content</code> argument of the handler function. You shouldn't assume it's the <code>#mw-content-text</code> element. It can be a small portion of the page, e.g. when it is previewed. Code that works with page content and avoids the aforementioned pitfalls may look like this: <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>mw.hook( 'wikipage.content' ).add( function ( $content ) { const $target = $content.find( '.targetClass' ); if ( $target.length ) { // Do things with $target } // Only perform some operations when it is #mw-content-text in the argument if ( $content.is( '#mw-content-text' ) ) { const $note = $( '<div>' ) .addClass( 'myScript-note' ) .text( 'MyScript has successfully processed the content!' ); $content.prepend( $note ); } } ); </pre></div> If your code works with page content and adds event handlers to DOM elements, then, instead of hooking to <code>'wikipage.content'</code> and looking for elements to attach event listeners to when it is fired, you may attach one event listener to an element outside of the content area or the whole <code>document</code> but filter events by a selector (see <a rel="nofollow" class="external text" href="https://api.jquery.com/on/#on-events-selector-data-handler">jQuery's documentation</a>). That is, instead of writing <code class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr">$content.find( '.targetClass' ).on( 'click', ... )</code> you can write <code class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr">$( document ).on( 'click', '.targetClass', ... )</code>. <div class="mw-heading mw-heading3"><h3 id="Finding_elements" data-mw-thread-id="h-Finding_elements-Basic_techniques">Finding elements</h3>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=20" title="Edit section: Finding elements">edit</a>]</div> Every <a href="/wiki/HTML" title="HTML">HTML</a> element is a node in a <a href="/wiki/Document_Object_Model" title="Document Object Model">DOM</a> model which allows scripts to access the element, for example, on the following HTML page. <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><form name="frmname" id="frmid"> <textarea name="txtname" id="txtid"></textarea> <input id="neighbor" /> </form> </pre></div> We can find element <code>textarea</code>: <ul><li>Using its <code>id</code>: <code class="mw-highlight mw-highlight-lang-js mw-content-ltr" dir="ltr">$( '#txtid' )</code></li> <li>In the array of all elements with the same <code>tag</code>: <code class="mw-highlight mw-highlight-lang-js mw-content-ltr" dir="ltr">$( 'textarea' )</code></li> <li>Using an element next to it: <code class="mw-highlight mw-highlight-lang-js mw-content-ltr" dir="ltr">$( '#neighbor' ).prev()</code></li> <li>As a child of its parent: <code class="mw-highlight mw-highlight-lang-js mw-content-ltr" dir="ltr">$( '#frmid' ).children( 'form' )</code></li> <li>As a form element, using <code>name</code>: <code class="mw-highlight mw-highlight-lang-js mw-content-ltr" dir="ltr">$( '#frmid [name="txtname"]' )</code></li></ul> <a rel="nofollow" class="external text" href="http://jsfiddle.net/compwhizii/j2QRf/">This example on jsFiddle</a> The <a rel="nofollow" class="external text" href="//api.jquery.com">jQuery API reference</a> is an excellent source for documentation. <div class="mw-heading mw-heading3"><h3 id="Checking_the_current_page" data-mw-thread-id="h-Checking_the_current_page-Basic_techniques">Checking the current page</h3>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=21" title="Edit section: Checking the current page">edit</a>]</div> Many scripts are supposed to work only on some pages. You can check: <ul><li>The page type<div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>if ( mw.config.get( 'wgAction' ) === 'history' ) { // Continue only on history pages. </pre></div></li> <li><a href="https://www.mediawiki.org/wiki/Manual:Interface/JavaScript#mw.config" class="extiw" title="mw:Manual:Interface/JavaScript"><kbd>wg</kbd> (Wikimedia global) variables</a>; many of them have the same meaning as <a href="/wiki/Help:Magic_words" title="Help:Magic words">Magic words</a><div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>if ( mw.config.get( 'wgCanonicalNamespace' ) === 'User_talk') { // Continue only on User_talk pages. </pre></div><div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>if ( mw.config.get( 'wgPageName' ) === 'Article_name' ) { // Continue only for the article "Article name". </pre></div></li></ul> <ul><li>Presence of elements (only in second and third parts of the script)<div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>function func_start() { if ( $( '#editForm' ).length == 0 ) return; //No edit form ? exit // … </pre></div></li></ul> <div class="mw-heading mw-heading3"><h3 id="Portlets_(menus_and_tabs)" data-mw-thread-id="h-Portlets_(menus_and_tabs)-Basic_techniques">Portlets (menus and tabs)</h3>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=22" title="Edit section: Portlets (menus and tabs)">edit</a>]</div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1236090951"><div role="note" class="hatnote navigation-not-searchable">Main page: <a href="/wiki/Help:Customizing_toolbars" title="Help:Customizing toolbars">Help:Customizing toolbars</a></div><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1252059228"><div class="module-shortcutanchordiv"></div><div class="module-shortcutboxplain noprint" role="note"><div class="module-shortcutlist"><a href="/wiki/Wikipedia:Shortcut" title="Wikipedia:Shortcut">Shortcut</a></div><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1126788409"><div class="plainlist"><ul><li><a class="external text" href="https://en.wikipedia.org/w/index.php?title=Wikipedia:PORTLET&redirect=no">WP:PORTLET</a></li></ul></div></div> Portlets are MediaWiki's name for groups of links located in the topbar and sidebar. Here is a diagram of portlet ID's. <figure typeof="mw:File/Thumb"><a href="/wiki/File:MediaWiki_portlet_names.svg" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/b/b6/MediaWiki_portlet_names.svg/500px-MediaWiki_portlet_names.svg.png" decoding="async" width="500" height="222" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/b/b6/MediaWiki_portlet_names.svg/750px-MediaWiki_portlet_names.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/b/b6/MediaWiki_portlet_names.svg/1000px-MediaWiki_portlet_names.svg.png 2x" data-file-width="1793" data-file-height="797"/></a><figcaption><a href="/wiki/MediaWiki" title="MediaWiki">MediaWiki</a> portlets as seen in <a href="/wiki/Wikipedia:Skin" title="Wikipedia:Skin">Vector legacy skin</a>.</figcaption></figure> <div class="mw-heading mw-heading4"><h4 id="List_of_portlets_(portlet_types)" data-mw-thread-id="h-List_of_portlets_(portlet_types)-Portlets_(menus_and_tabs)">List of portlets (portlet types)</h4>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=23" title="Edit section: List of portlets (portlet types)">edit</a>]</div> <ul><li>Top <ul><li>p-personal - The links at the very top right of the page. "personal" stands for "personal tools".</li> <li>p-namespaces - The tabs on the left that never collapse. Not recommended, not much space. The article and talk tabs are located here.</li> <li>p-views - The tabs in the middle that never collapse. Not recommended, not much space. The favorite page star tab is located here.</li> <li>p-cactions - The items in the "More" tab's dropdown menu. "cactions" stands for "content actions".</li> <li>p-search - Adding things here will mess up the appearance of the search box. Not recommended.</li></ul></li> <li>Left <ul><li>p-logo - Adding things here will mess up the appearance of the logo. Not recommended.</li> <li>p-navigation</li> <li>p-interaction - Has the title "Contribute".</li> <li>p-tb - Has the title "Tools". TB stands for toolbox.</li> <li>p-coll-print_export - Has the title "Print/export". Not a good place to add things, since this should just be for printing and exporting.</li> <li>p-wikibase-otherprojects - Has the title "In other projects". Not a good place to add things, since this should just be for links to other projects such as Wikisource, Wikibooks, etc.</li> <li>p-lang - Has the title "Languages". Not a good place to add things, since this should just be for languages.</li></ul></li></ul> <div class="mw-heading mw-heading4"><h4 id="Portlet_structure" data-mw-thread-id="h-Portlet_structure-Portlets_(menus_and_tabs)">Portlet structure</h4>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=24" title="Edit section: Portlet structure">edit</a>]</div> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><div id="p-myname" class="portlet"> <h5>Header</h5> <div class="body"> <ul> <li id="..."> <a ...> //Links <li id="..."> <a ...> ... </pre></div> <div class="mw-heading mw-heading4"><h4 id="Adding_elements" data-mw-thread-id="h-Adding_elements-Portlets_(menus_and_tabs)">Adding elements</h4>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=25" title="Edit section: Adding elements">edit</a>]</div> There is a special function in <code>mediawiki.util</code>, <code><a class="external text" href="https://www.mediawiki.org/wiki/ResourceLoader/Core_modules#addPortletLink">mw.util.addPortletLink()</a></code> that simplifies the process of adding your own links to portlets. The advantage of using this function is that your code should work across all skins, and not break when these skins change their HTML. Its parameters, in order: <ul><li><code>portletId</code> – ID of the target <a href="#Portlets_(menus_and_tabs)">portlet</a></li> <li><code>href</code> – link URL <ul><li>Set to <code>'#'</code> if you don't need to open a page and want to use a JavaScript listener instead.</li></ul></li> <li><code>text</code> – human-readable link text</li> <li><code>id</code> (optional) – unique ID of the item <ul><li>Use a prefix such as <abbr title="Content Actions (p-cactions)">ca-</abbr>, <abbr title="Personal Tools (p-personal)">pt-</abbr>, <abbr title="Navigation (p-navigation)">n-</abbr>, or <abbr title="Tools/Toolbox (p-tb)">t-</abbr> – for consistency with other links in the group of chosen <code>portletId</code>.</li></ul></li> <li><code>tooltip</code> (optional) – helpful text appearing on mouse hover</li> <li><code>accesskey</code> (optional) – <a rel="nofollow" class="external text" href="https://www.w3schools.com/tags/att_global_accesskey.asp">keyboard shortcut key</a> <ul><li>Set to <code>null</code> if you don't need it.</li> <li>Use <code>$( '[accesskey=x]' )</code> in the console to see if 'x' is already used.</li></ul></li> <li><code>nextNode</code> (optional) – element that this will be added in front of</li></ul> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>// Several examples of portlet links // Adds a link to your js file to the toolbox. tb = toolbox mw.util.addPortletLink ( 'p-tb', mw.util.getUrl( 'Special:MyPage/common.js' ), 'My JS', 'pt-myvector', 'Visit your js file'); // Add a link to the edit page for your Notes in your personal links // Note: We assume that short/pretty URLs are in use with ?action, ideally you would check for that. mw.util.addPortletLink ( 'p-personal', mw.util.getUrl( 'Special:MyPage/Notes' ) + '?action=edit', 'My notes', 'pt-mynotes', 'Edit your personal notes' ); // Adds a link to prefix index for the current page to the toolbox mw.util.addPortletLink ( 'p-tb', mw.util.getUrl( 'Special:Prefixindex/' + mw.config.get( 'wgPageName' ) ), 'Prefixindex', 'tb-prefixindex'); // Adds a link to logs for your account mw.util.addPortletLink ( 'p-personal', mw.util.getUrl( 'Special:Log/' + mw.config.get( 'wgUserName' ) ), 'My logs', 'pt-mylogs'); </pre></div> Or you can use JQuery. Simply attach it in another place with <code>.append()</code>, <code>.prepend()</code>, <code>.before()</code>, or <code>.after()</code>. <a rel="nofollow" class="external autonumber" href="https://www.w3schools.com/jquery/jquery_dom_add.asp">[1]</a><a rel="nofollow" class="external autonumber" href="https://javascript.info/article/modifying-document/before-prepend-append-after.svg">[2]</a>. Warning: This is very fragile. You may get it working on a couple skins, but a couple other skins may look broken. <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>// Add a clickable button on the edit article page, above the edit summary. $('.editOptions').prepend('<button type="button" id="my-custom-button">Do Things</button>'); // Add a listener to your button, that does something when it is clicked. $('#my-custom-button').click(function(e) { // do things }); </pre></div> <div class="mw-heading mw-heading3"><h3 id="Removing_elements" data-mw-thread-id="h-Removing_elements-Basic_techniques">Removing elements</h3>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=26" title="Edit section: Removing elements">edit</a>]</div> To hide an element, you can use JQuery's <a rel="nofollow" class="external text" href="//api.jquery.com/hide/"><code>.hide()</code></a> function. <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>// Example: remove special characters toolbar from edit page $( '#editpage-specialchars' ).hide(); // Or modify the CSS directly $( '#editpage-specialchars' ).css( 'display', 'none' ); </pre></div> Or you can do it by placing code in <a href="/wiki/Special:MyPage/common.css" title="Special:MyPage/common.css">common.css</a>: <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>#editpage-specialchars { display:none; } </pre></div> <div class="mw-heading mw-heading3"><h3 id="Adding_menus" data-mw-thread-id="h-Adding_menus-Basic_techniques">Adding menus</h3>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=27" title="Edit section: Adding menus">edit</a>]</div> You can add menus using <code>mw.util.addPortlet()</code> (see <a href="https://doc.wikimedia.org/mediawiki-core/master/js/module-mediawiki.util.html#.addPortlet" class="extiw" title="wmdoc:mediawiki-core/master/js/module-mediawiki.util.html">documentation</a>). The menu will not show up until you put a portletLink in it. If you add a menu adjacent to #p-cactions, it will be a dropdown menu in the Vector and Vector 2022 skins, with the correct dropdown HTML added for you. <div class="mw-highlight mw-highlight-lang-js mw-content-ltr" dir="ltr"><pre>mw.util.addPortlet('p-twinkle', 'TW', '#p-cactions'); mw.util.addPortletLink('p-twinkle', '#', 'Tag'); mw.util.addPortletLink('p-twinkle', '#', 'CSD'); </pre></div> <div class="mw-heading mw-heading3"><h3 id="Editing" data-mw-thread-id="h-Editing-Basic_techniques">Editing</h3>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=28" title="Edit section: Editing">edit</a>]</div> <div class="mw-heading mw-heading4"><h4 id="Textarea_with_article_wikicode" data-mw-thread-id="h-Textarea_with_article_wikicode-Editing">Textarea with article wikicode</h4>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=29" title="Edit section: Textarea with article wikicode">edit</a>]</div> The most important element on the edit page is a <kbd><textarea></kbd> with the article text inside. You can reference it with <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>var $textbox = $( '#wpTextbox1' ); </pre></div> You can manipulate it using the <a class="external text" href="https://doc.wikimedia.org/mediawiki-core/master/js/jQueryPlugins.html#.textSelection">jquery.textSelection</a> ResourceLoader module. <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>var $textbox = $( '#wpTextbox1' ); $textbox.textSelection( 'setContents', 'This is bold!' ); $textbox.textSelection( 'setSelection', { start: 8, end: 12 } ); $textbox.textSelection( 'encapsulateSelection', { pre: '', post: '' } ); // Result: Textbox contains 'This is bold!', with cursor before the '!' </pre></div> Or you can grab <code><textbox></code>'s text, create a <a href="/wiki/String_(computer_science)" title="String (computer science)">string</a>, modify it, then write it back. Note; other editing tools might not recognise your changes or cause conflicts if you use this methodology instead of the textSelection api. <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>// Get value. let value = $('#wpTextbox1').val(); // Your code goes here. Do things to value. RegEx, .replace(), concatenate, etc. // Then write it back. $('#wpTextbox1').val(value); </pre></div> <div class="mw-heading mw-heading4"><h4 id="Editing_toolbar" data-mw-thread-id="h-Editing_toolbar-Editing">Editing toolbar</h4>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=30" title="Edit section: Editing toolbar">edit</a>]</div> WikiEditor is now the default toolbar when editing the source code of articles, but some users are still using the original toolbar. You can turn on and off WikiEditor by checking and unchecking the "Enable the editing toolbar" check box in <a href="/wiki/Special:Preferences#mw-prefsection-editing" title="Special:Preferences">your preferences</a>.<a href="#cite_note-5">[n. 2]</a><a href="#cite_note-6">[n. 3]</a> <div class="mw-heading mw-heading4"><h4 id="Edittools" data-mw-thread-id="h-Edittools-Editing">Edittools</h4>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=31" title="Edit section: Edittools">edit</a>]</div> There is another edit panel under textarea. Usually it's generated from <a href="/wiki/MediaWiki:Edittools" title="MediaWiki:Edittools">MediaWiki:Edittools</a> by <a href="https://www.mediawiki.org/wiki/Extension:CharInsert" class="extiw" title="mw:Extension:CharInsert">Extension:CharInsert</a> and consists of a lot of JavaScript links. In the English Wikipedia, this approach was replaced by <a href="/wiki/MediaWiki:Gadget-charinsert.js" title="MediaWiki:Gadget-charinsert.js">MediaWiki:Gadget-charinsert.js</a> and <a href="/wiki/MediaWiki:Gadget-charinsert-core.js" title="MediaWiki:Gadget-charinsert-core.js">MediaWiki:Gadget-charinsert-core.js</a>. <div class="mw-heading mw-heading3"><h3 id="Doing_something_after_another_user_script" data-mw-thread-id="h-Doing_something_after_another_user_script-Basic_techniques">Doing something after another user script</h3>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=32" title="Edit section: Doing something after another user script">edit</a>]</div> Sometimes you may want to add or remove something from the DOM, but another user script edits the same area of the DOM. It can be random which user script finishes first, creating a <a href="/wiki/Race_condition" title="Race condition">race condition</a>. One way to coordinate this is use the <a class="external text" href="https://doc.wikimedia.org/mediawiki-core/master/js/Hooks.html">mw.hook</a> interface. Perhaps the other script sends a <code><a href="#mw.hook('wikipage.content').add(...)">wikipage.content</a></code> event when it's done, or can be modified to do so (or you can ask the maintainer). Another way to avoid this is to use the <code>DOMNodeInserted</code> or <code>DOMNodeRemoved</code> events to listen for when the other user script is finished, ensuring that your user script executes last. <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>$('body').on('DOMNodeInserted', '.preferences-link.link', function() { // do things } </pre></div> <div class="mw-heading mw-heading3"><h3 id="User_settings" data-mw-thread-id="h-User_settings-Basic_techniques">User settings</h3>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=33" title="Edit section: User settings">edit</a>]</div> If you want your users to be able to manually set configuration variables, one way to do this is to have them place <code>window.scriptNameSettingName = 'value here';</code> in their common.js file. Then within your user script, you can read this value with <code>if ( window.scriptNameSettingName == 'value here' )</code>. Notice that "scriptName" is one of the pieces of the variable name. This is important to help make sure the variable is unique. Do not use <code>let scriptNameSettingName = 'value here';</code> in the common.js file. If the user forgets the setting, you may get undeclared variable errors. If you want your user script to write and save configuration settings while it is running, you may want to have it write to its own .js file in the user's userspace. See <a href="/wiki/User:Novem_Linguae/twinkleoptions.js" title="User:Novem Linguae/twinkleoptions.js">twinkleoptions.js</a> or <a href="/wiki/User:Novem_Linguae/redwarnConfig.js" title="User:Novem Linguae/redwarnConfig.js">redwarnConfig.js</a> for examples. <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Preventing_bugs" data-mw-thread-id="h-Preventing_bugs">Preventing bugs</h2>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=34" title="Edit section: Preventing bugs">edit</a>]</div> <div class="mw-heading mw-heading3"><h3 id="<nowiki>_tags" data-mw-thread-id="h-<nowiki>_tags-Preventing_bugs">_tags-Preventing_bugs"><nowiki> tags_tags-Preventing_bugs"></h3>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=35" title="Edit section: <nowiki> tags">edit</a>]</div> You may want to place the following code at the top and bottom of your user script, in a comment. This will help prevent bugs, such as <code>~~~~</code> turning into your hard-coded signature when you save the page. <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>//<nowiki> Your code here. //</nowiki> </pre></div> <div class="mw-heading mw-heading3"><h3 id="Function_scope" data-mw-thread-id="h-Function_scope-Preventing_bugs">Function scope</h3>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=36" title="Edit section: Function scope">edit</a>]</div> Don't declare named functions in the global namespace. For example, this is bad: <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>function submitEdit() {/* do stuff */} $(function(){/* main code here */}); </pre></div> What if another of your user scripts also declares a <code>submitEdit()</code> function, but you have modified the code? This can lead to <a href="/wiki/Race_conditions" class="mw-redirect" title="Race conditions">race conditions</a> and hard-to-trace bugs. Instead, use classes named after your script, or place all your functions inside of <code>$(function {});</code>. JavaScript allows <a href="/wiki/Nested_function" title="Nested function">nested functions</a>. <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>$(function(){ function submitEdit() {/* do stuff */} /* main code here */ }); </pre></div> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Ajax" data-mw-thread-id="h-Ajax">Ajax</h2>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=37" title="Edit section: Ajax">edit</a>]</div> <a href="/wiki/Ajax_(programming)" title="Ajax (programming)">AJAX</a> (asynchronous JavaScript and XML) is a popular name for a web programming technique that queries the server or fetches content without reloading the entire page. While programming AJAX can be complex, libraries of functions can make it much easier. Since the <a href="https://www.mediawiki.org/wiki/MediaWiki_1.16" class="extiw" title="mw:MediaWiki 1.16">1.16 release</a>, MediaWiki comes with the <a href="/wiki/JQuery" title="JQuery">jQuery</a> library, which provides a convenient framework for easily making Ajax requests. <div class="mw-heading mw-heading3"><h3 id="Common_problems" data-mw-thread-id="h-Common_problems-Ajax">Common problems</h3>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=38" title="Edit section: Common problems">edit</a>]</div> <ul><li>AJAX programmers commonly run into problems if they don't account for AJAX's asynchronicity. If you try to pop up a box with another page's content, you will almost certainly pop up a box containing <code>null</code>. This occurs because the script continued even though the query wasn't finished.To correct the problem, you need to use <a href="/wiki/Callback_(computer_science)" class="mw-redirect" title="Callback (computer science)">callback functions</a>. Place the next portion of code after a query into a function, and call the function when the query completes. jQuery makes this very easy to do.</li> <li>AJAX scripts cannot reach a page on a different server (for example, google.ca or en.wikisource.org from en.wikipedia.org). Trying to do so will cause the script to halt with or without error. This can be circumvented using a proxy on the current server, but none is available for Wikimedia user scripts.</li></ul> <div class="mw-heading mw-heading3"><h3 id="Basic_examples" data-mw-thread-id="h-Basic_examples-Ajax">Basic examples</h3>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=39" title="Edit section: Basic examples">edit</a>]</div> MediaWiki provides some modules with helper functions which facilitate the use of its API. The main modules available are <ul><li><a class="external text" href="https://doc.wikimedia.org/mediawiki-core/master/js/mw.Api.html">mediawiki.api</a></li></ul> If your script makes use any method or code provided by these modules, remember to indicate the dependencies with <a href="https://www.mediawiki.org/wiki/ResourceLoader/Default_modules#mediaWiki.loader" class="extiw" title="mw:ResourceLoader/Default modules">mw.loader.using</a> or, in case of gadgets, on its definition at <a href="/wiki/MediaWiki:Gadgets-definition" title="MediaWiki:Gadgets-definition">MediaWiki:Gadgets-definition</a>. This API has several advantages especially when dealing with POST requests. It provides automatic token refresh and retry, handles various error situations and does parameter request building for several common use cases like rolling back a revision. Be sure to follow the <a href="https://meta.wikimedia.org/wiki/User-Agent_policy" class="extiw" title="meta:User-Agent policy">user agent policy</a> by setting a user agent header (see code there). See also <a href="https://www.mediawiki.org/wiki/API:Etiquette" class="extiw" title="mw:API:Etiquette">mw:API:Etiquette</a>. <div class="mw-heading mw-heading4"><h4 id="Fetch_page_content" data-mw-thread-id="h-Fetch_page_content-Basic_examples">Fetch page content</h4>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=40" title="Edit section: Fetch page content">edit</a>]</div> Fetching a page content can be done using <a href="/wiki/GET_(HTTP)" class="mw-redirect" title="GET (HTTP)">GET</a>. <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>$.ajax({ url: mw.util.getUrl( 'Wikipedia:Sandbox' ) }) .then(function( data ) { alert( 'The remote page contains:\n' + data ); }) .catch(function() { alert( 'The ajax request failed.' ); }); </pre></div> <div class="mw-heading mw-heading4"><h4 id="Get_the_wikitext_of_a_page" data-mw-thread-id="h-Get_the_wikitext_of_a_page-Basic_examples">Get the wikitext of a page</h4>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=41" title="Edit section: Get the wikitext of a page">edit</a>]</div> <div class="mw-heading mw-heading5"><h5 id="Using_module_mediawiki.api" data-mw-thread-id="h-Using_module_mediawiki.api-Get_the_wikitext_of_a_page">Using module <code>mediawiki.api</code></h5>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=42" title="Edit section: Using module mediawiki.api">edit</a>]</div> Note: make sure to add <code>mediawiki.api</code> to your dependencies! <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>function doSomethingWithText( wikitext ) { /* .. */ alert( 'The wikitext of the page is:\n\n' + wikitext ); } function doSomethingInCaseOfError () { /* .. */ console.log( 'err' ); } (new mw.Api()).get( { prop: 'revisions', rvprop: 'content', rvlimit: 1, indexpageids: true, titles: 'Wikipedia:Sandbox' } ) .then( function ( data ) { var q = data.query, id = q && q.pageids && q.pageids[0], pg = id && q.pages && q.pages[ id ], rv = pg && pg.revisions; if ( rv && rv[0] && rv[0]['*'] ) { doSomethingWithText( rv[0]['*'] ); } } ) .catch( doSomethingInCaseOfError ); </pre></div> <div class="mw-heading mw-heading5"><h5 id="Using_plain_jQuery" data-mw-thread-id="h-Using_plain_jQuery-Get_the_wikitext_of_a_page">Using plain jQuery</h5>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=43" title="Edit section: Using plain jQuery">edit</a>]</div> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>$.getJSON( mw.util.wikiScript('api'), { format: 'json', action: 'query', prop: 'revisions', rvprop: 'content', rvlimit: 1, titles: 'Wikipedia:Sandbox' } ) .then(function ( data ) { var page, wikitext; try { for ( page in data.query.pages ) { wikitext = data.query.pages[page].revisions[0]['*']; doSomethingWithText( wikitext ); } } catch ( e ) { doSomethingInCaseOfError(); } }) .catch( doSomethingInCaseOfError ); </pre></div> <div class="mw-heading mw-heading4"><h4 id="Edit_a_page_and_other_common_actions" data-mw-thread-id="h-Edit_a_page_and_other_common_actions-Basic_examples">Edit a page and other common actions</h4>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=44" title="Edit section: Edit a page and other common actions">edit</a>]</div> Scripts can perform common actions (like editing, protection, blocking, deletion, etc.) through the <a class="external text" href="https://en.wikipedia.org/w/api.php">API</a>. These actions require an edit token, which is valid for any action during the same session. (However, you should get a new token for different tasks in case this changes in the future.) The code below shows how to edit a page, but it can easily be adapted to other actions by reading the <a class="external text" href="https://en.wikipedia.org/w/api.php">API documentation</a>. <div class="mw-heading mw-heading5"><h5 id="Using_module_mediawiki.api_2" data-mw-thread-id="h-Using_module_mediawiki.api_2-Edit_a_page_and_other_common_actions">Using module <code>mediawiki.api</code></h5>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=45" title="Edit section: Using module mediawiki.api">edit</a>]</div> Note: make sure to add <code>mediawiki.api</code> to your dependencies! <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>// Edit page via the mw.Api module. // postWithEditToken( {} ) may be used instead of postWithToken("csrf", {} ) // for actions such as editing that require a CSRF token. // The line "text: info.text," will cause the call // to replace entire page content with supplied data. // alternatively, one can append or prepend the data to the page, by using // "appendtext: info.text," or "prependtext: info.text," instead. // when using "appendtext", it is possible to append the text to a specific section, // by setting the optional field "section". function editPage( info ) { var api = new mw.Api(); api.postWithToken("csrf", { action: 'edit', title: info.title, text: info.text, // will replace entire page content summary: info.summary } ).done(function( data ) { alert( 'Page edited!' ); } ).fail( function(code, data) { console.log( api.getErrorMessage( data ).text()); } ); } editPage({ title: 'User:' + mw.config.get( 'wgUserName' ) + '/Sandbox', text: 'Cool! It works! :-) ~~' + '~~', summary: 'Trying to edit my sandbox [[Project:User scripts/Guide|using API]]...' }); </pre></div> <div class="mw-heading mw-heading5"><h5 id="Using_plain_jQuery_2" data-mw-thread-id="h-Using_plain_jQuery_2-Edit_a_page_and_other_common_actions">Using plain jQuery</h5>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=46" title="Edit section: Using plain jQuery">edit</a>]</div> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>// Edit page (must be done through POST) // the line "text: info.text," will cause the call // to replace entire page content with supplied data. // alternatively, one can append or prepend the data to the page, by using // "appendtext: info.text," or "prependtext: info.text," instead. // when using "appendtext", it is possible to append the text to a specific section, // by setting the optional field "section". function editPage( info ) { $.ajax({ url: mw.util.wikiScript( 'api' ), type: 'POST', dataType: 'json', data: { format: 'json', action: 'edit', title: info.title, text: info.text, // will replace entire page content summary: info.summary, token: mw.user.tokens.get( 'csrfToken' ) } }) .then (function( data ) { if ( data && data.edit && data.edit.result && data.edit.result == 'Success' ) { alert( 'Page edited!' ); } else { alert( 'The edit query returned an error. =(' ); } }) .catch ( function() { alert( 'The ajax request failed.' ); }); } editPage({ title: 'User:' + mw.config.get( 'wgUserName' ) + '/Sandbox', text: 'Cool! It works! :-) ~~' + '~~', summary: 'Trying to edit my sandbox [[Project:User scripts/Guide/Ajax|using AJAX]]...' }); </pre></div> <div class="mw-heading mw-heading4"><h4 id="Load_JavaScript_from_Wiki_page" data-mw-thread-id="h-Load_JavaScript_from_Wiki_page-Basic_examples">Load JavaScript from Wiki page</h4>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=47" title="Edit section: Load JavaScript from Wiki page">edit</a>]</div> Security warning: Do not load Wikipedia pages that do not end in .js into your script using this method, because anybody can edit those pages. <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>let title = "User:YourName/YourScript.js"; mw.loader.load( "https://en.wikipedia.org/w/index.php?title="+title+"&action=raw&ctype=text/javascript" ); </pre></div> <div class="mw-heading mw-heading4"><h4 id="Load_JSON_from_Wiki_page" data-mw-thread-id="h-Load_JSON_from_Wiki_page-Basic_examples">Load JSON from Wiki page</h4>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=48" title="Edit section: Load JSON from Wiki page">edit</a>]</div> JSON is useful when you want to import complex data into your script. For example, maybe you have a bot that publishes certain data to a Wiki page regularly, and you want your script to read that data. Careful with <code>ctype</code>. Set it to <code>raw</code> for normal Wiki pages, and <code>application/json</code> for pages where a template editor or admin has set the <a class="external text" href="https://www.mediawiki.org/wiki/Help:ChangeContentModel">Content Model</a> to JSON. <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>let jsonData; let title = "User:YourName/YourData.json"; $.getJSON(mw.config.get('wgScriptPath')+'/index.php?action=raw&ctype=application/json&title='+title, function(data){ jsonData = data; }); </pre></div> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Working_with_CSS" data-mw-thread-id="h-Working_with_CSS">Working with CSS</h2>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=49" title="Edit section: Working with CSS">edit</a>]</div> Some user scripts also use some CSS code, or even are built with CSS only. Then you need to code and test CSS code. That can be done in your <kbd>/common.css</kbd>, but it is slow and messy. Instead, you can load a CSS file from your local web server (see the previous section for an easy-to-install web server). Put this line at the very top of your <a href="/wiki/Special:MyPage/common.css" title="Special:MyPage/common.css">/common.css</a>: <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>@import "http://localhost/wikipediatest.css"; </pre></div> Note! Such <code>@import</code> statements must come before any other declarations in your CSS. But there can be <code>/* comments */</code> above them. An alternative way is to put this line in your Javascript file instead: <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>mw.loader.load( 'http://localhost/wikipediatest.css', 'text/css' ); </pre></div> <div class="mw-heading mw-heading3"><h3 id="Publishing_a_CSS_file" data-mw-thread-id="h-Publishing_a_CSS_file-Working_with_CSS">Publishing a CSS file</h3>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=50" title="Edit section: Publishing a CSS file">edit</a>]</div> Once you have finished the CSS code, you either need to paste it into your <kbd>/vector.css</kbd> if it is only for personal use. Or if it is for use by others then you should upload it to for instance <a href="/wiki/Special:MyPage/yourscript.css" title="Special:MyPage/yourscript.css">User:Yourname/yourscript.css</a>. Then other users can import it by putting the following line in their <kbd>/common.js</kbd> file. Note, that is in their ".js", not their ".css". <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre>importStylesheet( 'User:Yourname/yourscript.css' ); </pre></div> If the CSS should be used together with a user script written in JavaScript then you can make it easy for the users. Simply put the line above in the JavaScript code for your user script, then the users only need to "install" your JavaScript. For completeness, in case someone wonders, users can import your <kbd>User:Yourname/yourscript.css</kbd> from their <kbd>/common.css</kbd> too. This of course has the advantage that it works even if the user has JavaScript disabled. Although it takes this slightly complex line of code: <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>@import "/w/index.php?title=User:Yourname/yourscript.css&action=raw&ctype=text/css"; </pre></div> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="See_also" data-mw-thread-id="h-See_also">See also</h2>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=51" title="Edit section: See also">edit</a>]</div> <ul><li><a href="https://www.mediawiki.org/wiki/Gadget_kitchen" class="extiw" title="mw:Gadget kitchen">mw:Gadget kitchen</a></li> <li><a href="/wiki/Wikipedia:User_scripts/Techniques" title="Wikipedia:User scripts/Techniques">Wikipedia:User scripts/Techniques</a></li> <li><a href="https://www.mediawiki.org/wiki/ResourceLoader/Migration_guide_(users)" class="extiw" title="mw:ResourceLoader/Migration guide (users)">mw:ResourceLoader/Migration guide (users)</a></li> <li><a href="https://www.mediawiki.org/wiki/ResourceLoader/Core_modules#jquery" class="extiw" title="mw:ResourceLoader/Core modules">mw:ResourceLoader/Core modules § jquery</a></li></ul> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Notes" data-mw-thread-id="h-Notes">Notes</h2>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=52" title="Edit section: Notes">edit</a>]</div> <style data-mw-deduplicate="TemplateStyles:r1239543626">.mw-parser-output .reflist{margin-bottom:0.5em;list-style-type:decimal}@media screen{.mw-parser-output .reflist{font-size:90%}}.mw-parser-output .reflist .references{font-size:100%;margin-bottom:0;list-style-type:inherit}.mw-parser-output .reflist-columns-2{column-width:30em}.mw-parser-output .reflist-columns-3{column-width:25em}.mw-parser-output .reflist-columns{margin-top:0.3em}.mw-parser-output .reflist-columns ol{margin-top:0}.mw-parser-output .reflist-columns li{page-break-inside:avoid;break-inside:avoid-column}.mw-parser-output .reflist-upper-alpha{list-style-type:upper-alpha}.mw-parser-output .reflist-upper-roman{list-style-type:upper-roman}.mw-parser-output .reflist-lower-alpha{list-style-type:lower-alpha}.mw-parser-output .reflist-lower-greek{list-style-type:lower-greek}.mw-parser-output .reflist-lower-roman{list-style-type:lower-roman}</style><div class="reflist"> <div class="mw-references-wrap"><ol class="references"> <li id="cite_note-contentmodel-1">^ <a href="#cite_ref-contentmodel_1-0">a</a> <a href="#cite_ref-contentmodel_1-1">b</a> The actual requirement is that the page have contentmodel "javascript". Making a page whose title ends in ".js" will automatically give it that content model and indicates to readers that the page contains JavaScript. </li> <li id="cite_note-5"><a href="#cite_ref-5">^</a> See <a href="https://www.mediawiki.org/wiki/Extension:WikiEditor/Toolbar_customization" class="extiw" title="mw:Extension:WikiEditor/Toolbar customization">mw:Extension:WikiEditor/Toolbar customization</a> for information on how to customize WikiEditor. </li> <li id="cite_note-6"><a href="#cite_ref-6">^</a> See <a href="/wiki/User:V111P/js/addToolbarButtons" title="User:V111P/js/addToolbarButtons">User:V111P/js/addToolbarButtons</a> for a script which allows you to easily add buttons to whichever of the two toolbars the user is using. </li> </ol></div></div> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="References" data-mw-thread-id="h-References">References</h2>[<a href="/w/index.php?title=Wikipedia:User_scripts/Guide&action=edit&section=53" title="Edit section: References">edit</a>]</div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1239543626"><div class="reflist"> <div class="mw-references-wrap"><ol class="references"> <li id="cite_note-2"><a href="#cite_ref-2">^</a> This section originally written by <a href="/wiki/User:Raylu" title="User:Raylu">raylu</a> <a href="/wiki/User:Raylu/monobook.js" title="User:Raylu/monobook.js">my monobook.js</a> Thanks a ton to all the users who helped improve this tutorial! </li> <li id="cite_note-3"><a href="#cite_ref-3">^</a> <a rel="nofollow" class="external free" href="https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content">https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content</a> </li> <li id="cite_note-4"><a href="#cite_ref-4">^</a> <a class="external free" href="https://lists.wikimedia.org/pipermail/mediawiki-l/2010-June/034396.html">https://lists.wikimedia.org/pipermail/mediawiki-l/2010-June/034396.html</a> </li> </ol></div></div> <div class="navbox-styles"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1129693374"><style data-mw-deduplicate="TemplateStyles:r1236075235">.mw-parser-output .navbox{box-sizing:border-box;border:1px solid #a2a9b1;width:100%;clear:both;font-size:88%;text-align:center;padding:1px;margin:1em auto 0}.mw-parser-output .navbox .navbox{margin-top:0}.mw-parser-output .navbox+.navbox,.mw-parser-output .navbox+.navbox-styles+.navbox{margin-top:-1px}.mw-parser-output .navbox-inner,.mw-parser-output .navbox-subgroup{width:100%}.mw-parser-output .navbox-group,.mw-parser-output .navbox-title,.mw-parser-output .navbox-abovebelow{padding:0.25em 1em;line-height:1.5em;text-align:center}.mw-parser-output .navbox-group{white-space:nowrap;text-align:right}.mw-parser-output .navbox,.mw-parser-output .navbox-subgroup{background-color:#fdfdfd}.mw-parser-output .navbox-list{line-height:1.5em;border-color:#fdfdfd}.mw-parser-output .navbox-list-with-group{text-align:left;border-left-width:2px;border-left-style:solid}.mw-parser-output tr+tr>.navbox-abovebelow,.mw-parser-output tr+tr>.navbox-group,.mw-parser-output tr+tr>.navbox-image,.mw-parser-output tr+tr>.navbox-list{border-top:2px solid #fdfdfd}.mw-parser-output .navbox-title{background-color:#ccf}.mw-parser-output .navbox-abovebelow,.mw-parser-output .navbox-group,.mw-parser-output .navbox-subgroup .navbox-title{background-color:#ddf}.mw-parser-output .navbox-subgroup .navbox-group,.mw-parser-output .navbox-subgroup .navbox-abovebelow{background-color:#e6e6ff}.mw-parser-output .navbox-even{background-color:#f7f7f7}.mw-parser-output .navbox-odd{background-color:transparent}.mw-parser-output .navbox .hlist td dl,.mw-parser-output .navbox .hlist td ol,.mw-parser-output .navbox .hlist td ul,.mw-parser-output .navbox td.hlist dl,.mw-parser-output .navbox td.hlist ol,.mw-parser-output .navbox td.hlist ul{padding:0.125em 0}.mw-parser-output .navbox .navbar{display:block;font-size:100%}.mw-parser-output .navbox-title .navbar{float:left;text-align:left;margin-right:0.5em}body.skin--responsive .mw-parser-output .navbox-image img{max-width:none!important}@media print{body.ns-0 .mw-parser-output .navbox{display:none!important}}</style></div><div role="navigation" class="navbox" aria-labelledby="User_scripts" style="padding:3px"><table class="nowraplinks mw-collapsible mw-collapsed navbox-inner" style="border-spacing:0;background:transparent;color:inherit"><tbody><tr><th scope="col" class="navbox-title" colspan="2"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1129693374"><style data-mw-deduplicate="TemplateStyles:r1239400231">.mw-parser-output .navbar{display:inline;font-size:88%;font-weight:normal}.mw-parser-output .navbar-collapse{float:left;text-align:left}.mw-parser-output .navbar-boxtext{word-spacing:0}.mw-parser-output .navbar ul{display:inline-block;white-space:nowrap;line-height:inherit}.mw-parser-output .navbar-brackets::before{margin-right:-0.125em;content:"[ "}.mw-parser-output .navbar-brackets::after{margin-left:-0.125em;content:" ]"}.mw-parser-output .navbar li{word-spacing:-0.125em}.mw-parser-output .navbar a>span,.mw-parser-output .navbar a>abbr{text-decoration:inherit}.mw-parser-output .navbar-mini abbr{font-variant:small-caps;border-bottom:none;text-decoration:none;cursor:inherit}.mw-parser-output .navbar-ct-full{font-size:114%;margin:0 7em}.mw-parser-output .navbar-ct-mini{font-size:114%;margin:0 4em}html.skin-theme-clientpref-night .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}@media(prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}}@media print{.mw-parser-output .navbar{display:none!important}}</style><div class="navbar plainlinks hlist navbar-mini"><ul><li class="nv-view"><a href="/wiki/Wikipedia:User_scripts/Navbox" title="Wikipedia:User scripts/Navbox"><abbr title="View this template">v</abbr></a></li><li class="nv-talk"><a href="/w/index.php?title=Wikipedia_talk:User_scripts/Navbox&action=edit&redlink=1" class="new" title="Wikipedia talk:User scripts/Navbox (page does not exist)"><abbr title="Discuss this template">t</abbr></a></li><li class="nv-edit"><a href="/wiki/Special:EditPage/Wikipedia:User_scripts/Navbox" title="Special:EditPage/Wikipedia:User scripts/Navbox"><abbr title="Edit this template">e</abbr></a></li></ul></div><div id="User_scripts" style="font-size:114%;margin:0 4em"><a href="/wiki/Wikipedia:User_scripts" title="Wikipedia:User scripts">User scripts</a></div></th></tr><tr><th scope="row" class="navbox-group" style="width:1%">Scripts lists</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Wikipedia:User_scripts/List" title="Wikipedia:User scripts/List">Main scripts list</a></li> <li><a href="/wiki/Category:Wikipedia_scripts" title="Category:Wikipedia scripts">The category for user scripts</a></li> <li><a href="/wiki/Wikipedia:User_scripts/Snippets" title="Wikipedia:User scripts/Snippets">Code snippets</a></li> <li><a href="/wiki/Wikipedia:User_scripts/Most_imported_scripts" title="Wikipedia:User scripts/Most imported scripts">Most imported scripts</a></li> <li><a href="/wiki/Wikipedia:User_scripts/Deprecated_script_list" title="Wikipedia:User scripts/Deprecated script list">Deprecated scripts list</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">New scripts</th><td class="navbox-list-with-group navbox-list navbox-even hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Wikipedia:User_scripts/Requests" title="Wikipedia:User scripts/Requests">Requests</a></li> <li><a href="/wiki/Wikipedia:Scripts%2B%2B" title="Wikipedia:Scripts++">Scripts++ Newsletter</a></li> <li><a href="/wiki/Wikipedia:Code_review" title="Wikipedia:Code review">Code review</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Script writing</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a class="mw-selflink selflink">Guide</a></li> <li><a href="/wiki/Wikipedia:User_scripts/Techniques" title="Wikipedia:User scripts/Techniques">Common techniques</a></li> <li><a href="https://www.mediawiki.org/wiki/ResourceLoader/Default_modules" class="extiw" title="mw:ResourceLoader/Default modules">Default ResourceLoader modules</a></li> <li><a href="https://www.mediawiki.org/wiki/Manual:Interface/JavaScript#mw.config" class="extiw" title="mw:Manual:Interface/JavaScript">Values in mw.config</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Templates</th><td class="navbox-list-with-group navbox-list navbox-even hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li>{{<a href="/wiki/Template:Load_user_script" title="Template:Load user script">Load user script</a>}}</li> <li>{{<a href="/wiki/Template:Infobox_Wikipedia_user_script" title="Template:Infobox Wikipedia user script">Infobox Wikipedia user script</a>}}</li> <li>{{<a href="/wiki/Template:Userscript" title="Template:Userscript">userscript</a>}}</li> <li>{{<a href="/wiki/Template:User_script_table" title="Template:User script table">user script table</a>}}</li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Userboxes</th><td class="navbox-list-with-group navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li>{{<a href="/wiki/Template:User_script_developer" title="Template:User script developer">user script developer</a>}}</li> <li>{{<a href="/wiki/Template:User_script_developer2" title="Template:User script developer2">user script developer2</a>}}</li> <li>{{<a href="/wiki/Template:User_script_developer_upon_request" title="Template:User script developer upon request">User script developer upon request</a>}}</li> <li>{{<a href="/wiki/Template:User_scripts_created" title="Template:User scripts created">user scripts created</a>}}</li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/User:The_Transhumanist/Outline_of_scripts" title="User:The Transhumanist/Outline of scripts">See also</a></th><td class="navbox-list-with-group navbox-list navbox-even hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Wikipedia:Gadget" title="Wikipedia:Gadget">Gadgets</a></li> <li><a href="/wiki/Wikipedia:Tools" title="Wikipedia:Tools">Tools</a></li> <li><a href="/wiki/Help:User_style" title="Help:User style">User styles</a></li> <li><a href="/wiki/Wikipedia:Tools/Greasemonkey_user_scripts" title="Wikipedia:Tools/Greasemonkey user scripts">Greasemonkey</a></li> <li>IRC <ul><li><a href="/wiki/Wikipedia:Scripts" title="Wikipedia:Scripts">scripts</a></li></ul></li> <li><a href="/wiki/Wikipedia:Bots" title="Wikipedia:Bots">Bots</a></li> <li><a href="https://www.mediawiki.org/wiki/Manual:Extensions" class="extiw" title="mw:Manual:Extensions">Extensions</a></li></ul> </div></td></tr></tbody></table></div> <div class="navbox-styles"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1129693374"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1236075235"></div><div role="navigation" class="navbox" aria-labelledby="Wikipedia_technical_help" style="padding:3px"><table class="nowraplinks hlist mw-collapsible mw-collapsed navbox-inner" style="border-spacing:0;background:transparent;color:inherit"><tbody><tr><th scope="col" class="navbox-title" colspan="2" style="text-align: center;"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1129693374"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1239400231"><div class="navbar plainlinks hlist navbar-mini"><ul><li class="nv-view"><a href="/wiki/Template:Wikipedia_technical_help" title="Template:Wikipedia technical help"><abbr title="View this template">v</abbr></a></li><li class="nv-talk"><a href="/wiki/Template_talk:Wikipedia_technical_help" title="Template talk:Wikipedia technical help"><abbr title="Discuss this template">t</abbr></a></li><li class="nv-edit"><a href="/wiki/Special:EditPage/Template:Wikipedia_technical_help" title="Special:EditPage/Template:Wikipedia technical help"><abbr title="Edit this template">e</abbr></a></li></ul></div><div id="Wikipedia_technical_help" style="font-size:114%;margin:0 4em"><a href="/wiki/Help:Directory#Technical_help" title="Help:Directory">Wikipedia technical help</a></div></th></tr><tr><td class="navbox-abovebelow" colspan="2" style="text-align: center;"><div>Get personal technical help at <a href="/wiki/Wikipedia:Teahouse" title="Wikipedia:Teahouse">the Teahouse</a>, <a href="/wiki/Wikipedia:Help_desk" title="Wikipedia:Help desk">help desk</a>, <a href="/wiki/Wikipedia:Village_pump_(technical)" title="Wikipedia:Village pump (technical)">village pump (technical)</a>, <a href="/wiki/Help:Introduction_to_talk_pages/1" title="Help:Introduction to talk pages/1">talk pages</a> or <a href="/wiki/Wikipedia:IRC" title="Wikipedia:IRC">IRC</a>.</div></td></tr><tr><th scope="row" class="navbox-group" style="text-align: center;;width:1%"><a href="/wiki/Wikipedia:FAQ/Technical" title="Wikipedia:FAQ/Technical">General technical help</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Wikipedia:Browser_notes" title="Wikipedia:Browser notes">Browser notes</a> <ul><li><a href="/wiki/Wikipedia:Bypass_your_cache" title="Wikipedia:Bypass your cache">Bypass cache</a></li> <li><a href="/wiki/Wikipedia:Keyboard_shortcuts" class="mw-redirect" title="Wikipedia:Keyboard shortcuts">Keyboard shortcuts</a></li></ul></li> <li><a href="/wiki/Help:Editing" title="Help:Editing">Editing</a> <ul><li><a href="/wiki/Help:CharInsert" title="Help:CharInsert">CharInsert</a></li> <li><a href="/wiki/Help:Edit_conflict" title="Help:Edit conflict">Edit conflict</a></li> <li><a href="/wiki/Help:Edit_toolbar" title="Help:Edit toolbar">Edit toolbar</a></li> <li><a href="/wiki/Help:Reverting" title="Help:Reverting">Reverting</a></li></ul></li> <li><a href="/wiki/Wikipedia:How_to_create_a_page" title="Wikipedia:How to create a page">How to create a page</a></li> <li><a href="/wiki/Wikipedia:IRC" title="Wikipedia:IRC">IRC</a> <ul><li><a href="/wiki/Wikipedia:IRC/Tutorial" title="Wikipedia:IRC/Tutorial">Tutorial</a></li></ul></li> <li><a href="/wiki/Help:Mobile_access" title="Help:Mobile access">Mobile access</a></li> <li><a href="/wiki/Help:Multilingual_support" title="Help:Multilingual support">Multilingual support</a></li> <li><a href="/wiki/Help:Page_history" title="Help:Page history">Page history</a></li> <li><a href="/wiki/Help:Page_information" title="Help:Page information">Page information</a></li> <li><a href="/wiki/Wikipedia:Page_name" title="Wikipedia:Page name">Page name</a> <ul><li><a href="/wiki/Help:Page_name" title="Help:Page name">Help</a></li></ul></li> <li><a href="/wiki/Help:Printing" title="Help:Printing">Printing</a></li> <li><a href="/wiki/Wikipedia:Software_notices" title="Wikipedia:Software notices">Software notices</a> <ul><li><a href="/wiki/Wikipedia:Editnotice" title="Wikipedia:Editnotice">Editnotice</a></li></ul></li> <li><a href="/wiki/Help:Special_characters" title="Help:Special characters">Special Characters</a> <ul><li><a href="/wiki/Help:Entering_special_characters" title="Help:Entering special characters">Entering</a></li></ul></li> <li><a href="/wiki/Wikipedia:User_access_levels" title="Wikipedia:User access levels">User access levels</a></li> <li><a href="/wiki/Wikipedia:VisualEditor" title="Wikipedia:VisualEditor">VisualEditor</a> <ul><li><a href="/wiki/Help:VisualEditor" title="Help:VisualEditor">Help</a></li></ul></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="text-align: center;;width:1%"><a href="/wiki/Special:SpecialPages" title="Special:SpecialPages">Special page</a>-related</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Help:Special_page" title="Help:Special page">Special page help</a></li> <li><a href="/wiki/Help:AllPages" title="Help:AllPages">AllPages</a></li> <li><a href="/wiki/Wikipedia:Edit_filter" title="Wikipedia:Edit filter">Edit filter</a></li> <li><a href="/wiki/Wikipedia:Emailing_users" title="Wikipedia:Emailing users">Emailing users</a></li> <li><a href="/wiki/Help:Logging_in" title="Help:Logging in">Logging in</a> <ul><li><a href="/wiki/Help:Reset_password" title="Help:Reset password">Reset passwords</a></li></ul></li> <li><a href="/wiki/Help:Log" title="Help:Log">Logs</a></li> <li><a href="/wiki/Wikipedia:Moving_a_page" title="Wikipedia:Moving a page">Moving a page</a> <ul><li><a href="/wiki/Wikipedia:History_merging" title="Wikipedia:History merging">History merging</a></li> <li><a href="/wiki/Help:When_to_place_technical_requests_in_%22Administrator_needed%22" title="Help:When to place technical requests in "Administrator needed"">Non-admin and admin-only page moves</a></li></ul></li> <li><a href="/wiki/Help:Notifications" title="Help:Notifications">Notifications/Echo</a> <ul><li><a href="/wiki/Help:Notifications/FAQ" title="Help:Notifications/FAQ">FAQ</a></li></ul></li> <li><a href="/wiki/Wikipedia:Page_Curation/Help" title="Wikipedia:Page Curation/Help">Page Curation</a></li> <li><a href="/wiki/Help:Import" title="Help:Import">Page import</a></li> <li><a href="/wiki/Wikipedia:Pending_changes" title="Wikipedia:Pending changes">Pending changes</a></li> <li><a href="/wiki/Wikipedia:Random" title="Wikipedia:Random">Random pages</a></li> <li><a href="/wiki/Help:Recent_changes" title="Help:Recent changes">Recent changes</a></li> <li><a href="/wiki/Help:Related_changes" title="Help:Related changes">Related changes</a></li> <li><a href="/wiki/Help:Searching" title="Help:Searching">Searching</a> <ul><li><a href="/wiki/Help:Linksearch" title="Help:Linksearch">Linksearch</a></li></ul></li> <li><a href="/wiki/Wikipedia:Tags" title="Wikipedia:Tags">Tags</a></li> <li><a href="/wiki/Help:User_contributions" title="Help:User contributions">User contributions</a></li> <li><a href="/wiki/Help:Watchlist" title="Help:Watchlist">Watchlist</a></li> <li><a href="/wiki/Help:What_links_here" title="Help:What links here">What links here</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="text-align: center;;width:1%"><a href="/wiki/Help:Wikitext" title="Help:Wikitext">Wikitext</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Help:Wikitext" title="Help:Wikitext">Wikitext</a> <ul><li><a href="/wiki/Help:Cheatsheet" title="Help:Cheatsheet">Cheatsheet</a></li></ul></li> <li><a href="/wiki/Help:Columns" title="Help:Columns">Columns</a></li> <li><a href="/wiki/Help:Line-break_handling" title="Help:Line-break handling">Line-break handling</a></li> <li><a href="/wiki/Help:List" title="Help:List">Lists</a></li> <li><a href="/wiki/Help:Magic_words" title="Help:Magic words">Magic words</a> <ul><li><a href="/wiki/Help:Magic_words_for_beginners" title="Help:Magic words for beginners">For beginners</a></li> <li><a href="/wiki/Help:Conditional_expressions" title="Help:Conditional expressions">Conditional expressions</a></li> <li><a href="/wiki/Help:Switch_parser_function" title="Help:Switch parser function">Switch parser function</a></li> <li><a href="/wiki/Help:Time_function" title="Help:Time function">Time function</a></li></ul></li> <li><a href="/wiki/Help:Redirect" title="Help:Redirect">Redirects</a></li> <li><a href="/wiki/Help:Section" title="Help:Section">Sections and TOCs</a></li> <li><a href="/wiki/Help:Table" title="Help:Table">Tables</a> <ul><li><a href="/wiki/Help:Introduction_to_tables_with_Wiki_Markup/1" title="Help:Introduction to tables with Wiki Markup/1">Introduction</a></li> <li><a href="/wiki/Help:Basic_table_markup" title="Help:Basic table markup">Basics</a></li> <li><a href="/wiki/Help:Advanced_table_formatting" title="Help:Advanced table formatting">Advanced table formatting</a></li> <li><a href="/wiki/Help:Collapsing" class="mw-redirect" title="Help:Collapsing">Collapsing</a></li> <li><a href="/wiki/Help:Conditional_tables" title="Help:Conditional tables">Conditional tables</a></li> <li><a href="/wiki/Help:Sortable_tables" title="Help:Sortable tables">Sortable tables</a></li></ul></li> <li><a href="/wiki/Help:Using_colours" title="Help:Using colours">Using colours</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="text-align: center;;width:1%"><a href="/wiki/Help:Link" title="Help:Link">Links</a> and <a href="/wiki/Help:Diff" title="Help:Diff">diffs</a></th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Help:Link" title="Help:Link">Links</a> <ul><li><a href="/wiki/Help:Interlanguage_links" title="Help:Interlanguage links">Interlanguage</a></li> <li><a href="/wiki/Help:Interwiki_linking" title="Help:Interwiki linking">Interwiki</a></li> <li><a href="/wiki/Help:Permanent_link" title="Help:Permanent link">Permanent</a></li></ul></li> <li><a href="/wiki/Help:Diff" title="Help:Diff">Diffs</a> <ul><li><a href="/wiki/Wikipedia:Simplest_diff_guide" title="Wikipedia:Simplest diff guide">Simplest diff guide</a></li> <li><a href="/wiki/Wikipedia:Simple_diff_and_link_guide" title="Wikipedia:Simple diff and link guide">Simple diff and link guide</a></li> <li><a href="/wiki/Wikipedia:Complete_diff_and_link_guide" title="Wikipedia:Complete diff and link guide">Complete diff and link guide</a></li></ul></li> <li><a href="/wiki/Help:Colon_trick" title="Help:Colon trick">Colon trick</a></li> <li><a href="/wiki/Help:Link_color" title="Help:Link color">Link color</a></li> <li><a href="/wiki/Help:Pipe_trick" title="Help:Pipe trick">Pipe trick</a></li> <li><a href="/wiki/Help:URL" title="Help:URL">URLs</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="text-align: center;;width:1%"><a href="/wiki/Wikipedia:Media" class="mw-disambig" title="Wikipedia:Media">Media</a> files: images, videos and sounds</th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Help:Media" title="Help:Media">Media help</a></li> <li><a href="/wiki/Help:Files" title="Help:Files">Files</a> <ul><li><a href="/wiki/Help:Creation_and_usage_of_media_files" title="Help:Creation and usage of media files">Creation and usage</a></li> <li><a href="/wiki/Wikipedia:Moving_files_to_Commons" title="Wikipedia:Moving files to Commons">Moving files to Commons</a></li></ul></li> <li><a href="/wiki/Wikipedia:Images" title="Wikipedia:Images">Images</a> <ul><li><a href="/wiki/Help:Introduction_to_images_with_Wiki_Markup/1" title="Help:Introduction to images with Wiki Markup/1">Introduction to images</a></li> <li><a href="/wiki/Help:Pictures" title="Help:Pictures">Picture tutorial</a></li> <li><a href="/wiki/Wikipedia:Preparing_images_for_upload" title="Wikipedia:Preparing images for upload">Preparing images for upload</a></li> <li><a href="/wiki/Wikipedia:Uploading_images" title="Wikipedia:Uploading images">Uploading images</a></li> <li><a href="/wiki/Help:Options_to_hide_an_image" title="Help:Options to hide an image">Options to hide an image</a></li> <li><a href="/wiki/Wikipedia:Extended_image_syntax" title="Wikipedia:Extended image syntax">Extended image syntax</a></li> <li><a href="/wiki/Wikipedia:SVG_help" title="Wikipedia:SVG help">SVG help</a></li></ul></li> <li><a href="/wiki/Help:Gallery_tag" title="Help:Gallery tag">Gallery tag</a></li> <li><a href="/wiki/Wikipedia:Graphics_tutorials" title="Wikipedia:Graphics tutorials">Graphics tutorials</a> <ul><li><a href="/wiki/Wikipedia:Basic_bitmap_image_editing" title="Wikipedia:Basic bitmap image editing">Basic bitmap image editing</a></li> <li><a href="/wiki/Wikipedia:How_to_improve_image_quality" title="Wikipedia:How to improve image quality">How to improve image quality</a></li> <li><a href="/wiki/Wikipedia:Graphics_Lab/Resources" title="Wikipedia:Graphics Lab/Resources">Graphics Lab resources</a></li></ul></li> <li><a href="/wiki/Help:Sound_file_markup" title="Help:Sound file markup">Sound file markup</a></li> <li><a href="/wiki/Help:Visual_file_markup" title="Help:Visual file markup">Visual file markup</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="text-align: center;;width:1%">Other graphics</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Help:Family_trees" title="Help:Family trees">Family trees</a></li> <li><a href="/wiki/Wikipedia:Graphs_and_charts" title="Wikipedia:Graphs and charts">Graphs and charts</a> <ul><li><a href="/wiki/Wikipedia:How_to_create_charts_for_Wikipedia_articles" title="Wikipedia:How to create charts for Wikipedia articles">How to create</a></li> <li><a href="/wiki/Help:Barchart" title="Help:Barchart">Barcharts</a></li> <li><a href="/wiki/Wikipedia:To_scale_charts" title="Wikipedia:To scale charts">To scale charts</a></li></ul></li> <li><a href="/wiki/Help:Displaying_a_formula" title="Help:Displaying a formula">Math formulas</a> <ul><li><a href="/wiki/Help:Displaying_a_formula#Use_of_HTML_templates" title="Help:Displaying a formula">Math symbols</a></li></ul></li> <li><a href="/wiki/Help:Score" title="Help:Score">Musical scores</a> <ul><li><a href="/wiki/Help:Musical_symbols" title="Help:Musical symbols">Musical symbols</a></li></ul></li> <li><a href="/wiki/Wikipedia:Timeline" title="Wikipedia:Timeline">Timeline</a> <ul><li><a href="/wiki/Help:EasyTimeline_syntax" title="Help:EasyTimeline syntax">EasyTimeline syntax</a></li></ul></li> <li><a href="/wiki/Help:WikiHiero_syntax" title="Help:WikiHiero syntax">WikiHiero syntax</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="text-align: center;;width:1%"><a href="/wiki/Help:A_quick_guide_to_templates" title="Help:A quick guide to templates">Templates</a> and <a href="/wiki/Lua_(programming_language)" title="Lua (programming language)">Lua</a> modules</th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Help:Template" title="Help:Template">Templates</a></li> <li><a href="/wiki/Wikipedia:Advanced_template_coding" title="Wikipedia:Advanced template coding">Advanced template coding</a></li> <li><a href="/wiki/Wikipedia:Template_documentation" title="Wikipedia:Template documentation">Template documentation</a></li> <li><a href="/wiki/Wikipedia:Template_index" title="Wikipedia:Template index">Template index</a></li> <li><a href="/wiki/Help:Template_limits" title="Help:Template limits">Template limits</a></li> <li><a href="/wiki/Wikipedia:Template_sandbox_and_test_cases" title="Wikipedia:Template sandbox and test cases">Template sandbox and test cases</a></li> <li><a href="/wiki/Wikipedia:Citation_templates" title="Wikipedia:Citation templates">Citation templates</a></li> <li><a href="/wiki/Help:Lua" title="Help:Lua">Lua help</a></li> <li><a href="/wiki/Wikipedia:Lua" title="Wikipedia:Lua">Lua project</a> <ul><li><a href="/wiki/Wikipedia:Lua/Resources" title="Wikipedia:Lua/Resources">Resources</a></li> <li><a href="/wiki/Wikipedia:Lua/To_do" title="Wikipedia:Lua/To do">To do</a></li></ul></li> <li><a href="/wiki/Help:Substitution" title="Help:Substitution">Substitution</a></li> <li><a href="/wiki/Help:Purge" title="Help:Purge">Purge</a> <ul><li><a href="/wiki/Help:Job_queue" title="Help:Job queue">Job queue</a></li></ul></li> <li><a href="/wiki/Help:Transclusion" title="Help:Transclusion">Transclusion</a> <ul><li><a href="/wiki/Help:Labeled_section_transclusion" title="Help:Labeled section transclusion">Labeled section</a></li> <li><a href="/wiki/Wikipedia:Transclusion_costs_and_benefits" title="Wikipedia:Transclusion costs and benefits">Costs and benefits</a></li></ul></li> <li><a href="/wiki/Wikipedia:Guide_to_Scribbling" title="Wikipedia:Guide to Scribbling">Guide to Scribbling</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="text-align: center;;width:1%"><a href="/wiki/Wikipedia:Administration#Data_structure_and_development" title="Wikipedia:Administration">Data structure</a></th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Wikipedia:Namespace" title="Wikipedia:Namespace">Namespaces</a></li> <li><a href="/wiki/Wikipedia:What_is_an_article%3F" title="Wikipedia:What is an article?">Main/Article</a></li> <li><a href="/wiki/Help:Category" title="Help:Category">Category</a></li> <li><a href="/wiki/Wikipedia:Drafts" title="Wikipedia:Drafts">Draft</a></li> <li><a href="/wiki/Help:Files" title="Help:Files">File</a> <ul><li><a href="/wiki/Help:File_description_page" title="Help:File description page">File description page</a></li></ul></li> <li><a href="/wiki/Wikipedia:Help_namespace" title="Wikipedia:Help namespace">Help</a></li> <li><a href="/wiki/Wikipedia:Portal" title="Wikipedia:Portal">Portal</a></li> <li><a href="/wiki/Wikipedia:Project_namespace" title="Wikipedia:Project namespace">Project/Wikipedia</a></li> <li><a href="/wiki/Help:Talk_pages" title="Help:Talk pages">Talk</a> <ul><li><a href="/wiki/Help:Archiving_a_talk_page" title="Help:Archiving a talk page">Archiving</a> <ul><li><a href="/wiki/Help:Archiving_(plain_and_simple)" title="Help:Archiving (plain and simple)">Simple</a></li></ul></li></ul></li> <li><a href="/wiki/Wikipedia:Template_namespace" title="Wikipedia:Template namespace">Template</a></li> <li><a href="/wiki/Wikipedia:User_pages" title="Wikipedia:User pages">User</a> <ul><li><a href="/wiki/Wikipedia:User_page_design_guide" title="Wikipedia:User page design guide">User page design</a></li></ul></li> <li><a href="/wiki/Help:MediaWiki_namespace" title="Help:MediaWiki namespace">MediaWiki</a> <ul><li><a href="/wiki/Wikipedia:Bug_reports_and_feature_requests" title="Wikipedia:Bug reports and feature requests">Bug reports and feature requests</a></li> <li><a href="https://www.mediawiki.org/wiki/Extension:TimedMediaHandler" class="extiw" title="mw:Extension:TimedMediaHandler">TimedMediaHandler extension</a></li></ul></li> <li><a href="/wiki/Wikipedia:Lua" title="Wikipedia:Lua">Module</a></li> <li><a href="/wiki/Help:Special_page" title="Help:Special page">Special</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="text-align: center;;width:1%"><a href="/wiki/HTML" title="HTML">HTML</a> and <a href="/wiki/CSS" title="CSS">CSS</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Help:Cascading_Style_Sheets" title="Help:Cascading Style Sheets">Cascading Style Sheets</a></li> <li><a href="/wiki/Help:HTML_in_wikitext" title="Help:HTML in wikitext">HTML in wikitext</a></li> <li><a href="/wiki/Wikipedia:Catalogue_of_CSS_classes" title="Wikipedia:Catalogue of CSS classes">Catalogue of CSS classes</a></li> <li><a href="/wiki/Wikipedia:Common.js_and_common.css" title="Wikipedia:Common.js and common.css">Common.js and common.css</a></li> <li><a href="/wiki/Template:Mxt/User_CSS_for_a_monospaced_coding_font" title="Template:Mxt/User CSS for a monospaced coding font">User CSS for monospaced coding font</a></li> <li><a href="/wiki/Wikipedia:WikiProject_Microformats/classes" title="Wikipedia:WikiProject Microformats/classes">Classes in microformats</a></li> <li><a href="/wiki/Help:Markup_validation" title="Help:Markup validation">Markup validation</a></li> <li><a href="/wiki/Wikipedia:Span_tags" title="Wikipedia:Span tags">Span tags</a></li> <li><a href="/wiki/Help:Useful_styles" title="Help:Useful styles">Useful styles</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="text-align: center;;width:1%"><a href="/wiki/Wikipedia:Customisation" title="Wikipedia:Customisation">Customisation</a> and tools</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Help:Preferences" title="Help:Preferences">Preferences</a></li> <li><a href="/wiki/Wikipedia:Gadget" title="Wikipedia:Gadget">Gadgets</a></li> <li><a href="/wiki/Wikipedia:Skin" title="Wikipedia:Skin">Skins</a></li> <li><a href="/wiki/Help:Citation_tools" title="Help:Citation tools">Citation tools</a></li> <li><a href="/wiki/Wikipedia:Cleaning_up_vandalism/Tools" title="Wikipedia:Cleaning up vandalism/Tools">Cleaning up vandalism tools</a></li> <li><a href="/wiki/Wikipedia:Customizing_watchlists" title="Wikipedia:Customizing watchlists">Customizing watchlists</a> <ul><li><a href="/wiki/Help:Hide_Pages_in_Watchlist" title="Help:Hide Pages in Watchlist">Hide pages</a></li></ul></li> <li><a href="/wiki/Wikipedia:Scripts" title="Wikipedia:Scripts">IRC Scripts</a></li> <li><a href="/wiki/Wikipedia:User_scripts" title="Wikipedia:User scripts">User scripts</a> <ul><li><a class="mw-selflink selflink">Guide</a></li> <li><a href="/wiki/Wikipedia:User_scripts/List" title="Wikipedia:User scripts/List">List</a></li> <li><a href="/wiki/Wikipedia:User_scripts/Techniques" title="Wikipedia:User scripts/Techniques">Techniques</a></li></ul></li> <li><a href="/wiki/Help:User_style" title="Help:User style">User style</a></li> <li><a href="/wiki/Wikipedia:Tools" title="Wikipedia:Tools">Tools</a> <ul><li><a href="/wiki/Wikipedia:Tools/Alternative_browsing" title="Wikipedia:Tools/Alternative browsing">Alternative browsing</a></li> <li><a href="/wiki/Wikipedia:Tools/Browser_tools" title="Wikipedia:Tools/Browser tools">Browser tools</a></li> <li><a href="/wiki/Wikipedia:Tools/Editing_tools" title="Wikipedia:Tools/Editing tools">Editing tools</a></li> <li><a href="/wiki/Wikipedia:Tools/Navigation_shortcuts" title="Wikipedia:Tools/Navigation shortcuts">Navigation shortcuts</a></li> <li><a href="/wiki/Wikipedia:Tools/Optimum_tool_set" title="Wikipedia:Tools/Optimum tool set">Optimum tool set</a></li></ul></li> <li><a href="/wiki/Wikipedia:Wikimedia_Cloud_Services" title="Wikipedia:Wikimedia Cloud Services">Wikimedia Cloud Services</a></li> <li><a href="https://www.mediawiki.org/wiki/Beta_Features" class="extiw" title="mw:Beta Features">Beta Features at MediaWiki</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="text-align: center;;width:1%">Automated editing</th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Wikipedia:WikiProject_Articles_for_creation/Helper_script" title="Wikipedia:WikiProject Articles for creation/Helper script">AfC helper script</a></li> <li><a href="/wiki/Wikipedia:AntiVandal" title="Wikipedia:AntiVandal">AntiVandal</a></li> <li><a href="/wiki/Wikipedia:AutoWikiBrowser" title="Wikipedia:AutoWikiBrowser">AutoWikiBrowser</a></li> <li><a href="/wiki/Wikipedia:Bots" title="Wikipedia:Bots">Bots</a> <ul><li><a href="/wiki/Help:Creating_a_bot" title="Help:Creating a bot">Creating</a></li> <li><a href="/wiki/Wikipedia:History_of_Wikipedia_bots" title="Wikipedia:History of Wikipedia bots">history</a></li></ul></li> <li><a href="/wiki/Wikipedia:HotCat" title="Wikipedia:HotCat">HotCat</a></li> <li><a href="/wiki/Wikipedia:Huggle" title="Wikipedia:Huggle">Huggle</a></li> <li><a href="/wiki/Wikipedia:Tools/Navigation_popups" title="Wikipedia:Tools/Navigation popups">Navigation popups</a></li> <li><a href="/wiki/Wikipedia:RedWarn" title="Wikipedia:RedWarn">RedWarn</a></li> <li><a href="/wiki/Wikipedia:Twinkle" title="Wikipedia:Twinkle">Twinkle</a></li> <li><a href="/wiki/Wikipedia:Ultraviolet" title="Wikipedia:Ultraviolet">Ultraviolet</a></li> <li><a href="/wiki/Wikipedia:WPCleaner" title="Wikipedia:WPCleaner">WPCleaner</a></li> <li>Inactive <ul><li><a href="/wiki/Wikipedia:Igloo" title="Wikipedia:Igloo">igloo</a></li> <li><a href="/wiki/Wikipedia:STiki" title="Wikipedia:STiki">STiki</a></li></ul></li></ul> </div></td></tr><tr><td class="navbox-abovebelow" colspan="2" style="text-align: center;"><div> <ul><li>See also: <a href="/wiki/Category:Wikipedia_how-to" title="Category:Wikipedia how-to">Category:Wikipedia how-to</a></li> <li><a href="/wiki/Category:Wikipedia_information_pages" title="Category:Wikipedia information pages">Category:Wikipedia information pages</a> Further navigation at: <a href="/wiki/Template:Wikipedia_help_pages" title="Template:Wikipedia help pages">Help pages</a> <ul><li><a href="/wiki/Template:Administrators%27_guide" title="Template:Administrators' guide">Administrators</a></li></ul></li> <li><a href="/wiki/Wikipedia:WikiProject_Accessibility/Navigation_menu" title="Wikipedia:WikiProject Accessibility/Navigation menu">Accessibility</a></li> <li><a href="/wiki/Template:Wikipedia_accounts" title="Template:Wikipedia accounts">Accounts</a></li> <li><a href="/wiki/Template:Botnav" title="Template:Botnav">Bots</a></li> <li><a href="/wiki/Template:Wikipedia_referencing" title="Template:Wikipedia referencing">Referencing</a> <ul><li><a href="/wiki/Template:Citation_metadata_navbox" title="Template:Citation metadata navbox">Citation metadata</a></li></ul></li> <li><a href="/wiki/Template:Wikipedia_templates" title="Template:Wikipedia templates">Templates</a></li> <li><a href="/wiki/Wikipedia:User_scripts/Navbox" title="Wikipedia:User scripts/Navbox">User scripts</a></li></ul> </div></td></tr></tbody></table></div>    </div><noscript><img src="https://login.wikimedia.org/wiki/Special:CentralAutoLogin/start?type=1x1" alt="" width="1" height="1" style="border: none; position: absolute;"></noscript> <div class="printfooter" data-nosnippet="">Retrieved from "<a dir="ltr" href="https://en.wikipedia.org/w/index.php?title=Wikipedia:User_scripts/Guide&oldid=1241694437">https://en.wikipedia.org/w/index.php?title=Wikipedia:User_scripts/Guide&oldid=1241694437</a>"</div></div> <div id="catlinks" class="catlinks" data-mw="interface"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/wiki/Help:Category" title="Help:Category">Categories</a>: <ul><li><a href="/wiki/Category:Wikipedia_scripts" title="Category:Wikipedia scripts">Wikipedia scripts</a></li><li><a href="/wiki/Category:Wikipedia_how-to" title="Category:Wikipedia how-to">Wikipedia how-to</a></li></ul></div></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" > <ul id="footer-info"> <li id="footer-info-lastmod"> This page was last edited on 22 August 2024, at 16:54 (UTC).</li> <li id="footer-info-copyright">Text is available under the <a href="/wiki/Wikipedia:Text_of_the_Creative_Commons_Attribution-ShareAlike_4.0_International_License" title="Wikipedia:Text of the Creative Commons Attribution-ShareAlike 4.0 International License">Creative Commons Attribution-ShareAlike 4.0 License</a>; additional terms may apply. By using this site, you agree to the <a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Terms_of_Use" class="extiw" title="foundation:Special:MyLanguage/Policy:Terms of Use">Terms of Use</a> and <a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy" class="extiw" title="foundation:Special:MyLanguage/Policy:Privacy policy">Privacy Policy</a>. Wikipedia® is a registered trademark of the <a rel="nofollow" class="external text" href="https://wikimediafoundation.org/">Wikimedia Foundation, Inc.</a>, a non-profit organization.</li> </ul> <ul id="footer-places"> <li id="footer-places-privacy"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy policy</a></li> <li id="footer-places-about"><a href="/wiki/Wikipedia:About">About Wikipedia</a></li> <li id="footer-places-disclaimers"><a href="/wiki/Wikipedia:General_disclaimer">Disclaimers</a></li> <li id="footer-places-contact"><a href="//en.wikipedia.org/wiki/Wikipedia:Contact_us">Contact Wikipedia</a></li> <li id="footer-places-wm-codeofconduct"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Universal_Code_of_Conduct">Code of Conduct</a></li> <li id="footer-places-developers"><a href="https://developer.wikimedia.org">Developers</a></li> <li id="footer-places-statslink"><a href="https://stats.wikimedia.org/#/en.wikipedia.org">Statistics</a></li> <li id="footer-places-cookiestatement"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Cookie_statement">Cookie statement</a></li> <li id="footer-places-mobileview"><a href="//en.m.wikipedia.org/w/index.php?title=Wikipedia:User_scripts/Guide&mobileaction=toggle_view_mobile" class="noprint stopMobileRedirectToggle">Mobile view</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-copyrightico"><a href="https://wikimediafoundation.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/static/images/footer/wikimedia-button.svg" width="84" height="29" alt="Wikimedia Foundation" loading="lazy"></a></li> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/w/resources/assets/poweredby_mediawiki.svg" alt="Powered by MediaWiki" width="88" height="31" loading="lazy"></a></li> </ul> </footer> </div> </div> </div> <div class="vector-settings" id="p-dock-bottom"> <ul></ul> </div><script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgHostname":"mw-web.codfw.main-7d9797f5d-4c7mf","wgBackendResponseTime":150,"wgDiscussionToolsPageThreads":[{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Prerequisites","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Forking_an_existing_script","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Writing_a_script_from_scratch","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Hello_world-Writing_a_script_from_scratch","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Your_first_script-Writing_a_script_from_scratch","replies":[]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Built-in_scripts","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Development_and_testing","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Basic-Development_and_testing","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Loading_it_from_a_localhost_web_server-Development_and_testing","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Browser-specific-Development_and_testing","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Running_pieces_of_code-Development_and_testing","replies":[]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Publishing","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Text_editors_and_debugging","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Text_editors-Text_editors_and_debugging","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-JavaScript_Debuggers-Text_editors_and_debugging","replies":[]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Basic_techniques","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Running_code_on_page_load-Basic_techniques","replies":[{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-$(document).ready(...)-Running_code_on_page_load","replies":[]},{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-mw.hook('wikipage.content').add(...)-Running_code_on_page_load","replies":[]}]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Finding_elements-Basic_techniques","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Checking_the_current_page-Basic_techniques","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Portlets_(menus_and_tabs)-Basic_techniques","replies":[{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-List_of_portlets_(portlet_types)-Portlets_(menus_and_tabs)","replies":[]},{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-Portlet_structure-Portlets_(menus_and_tabs)","replies":[]},{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-Adding_elements-Portlets_(menus_and_tabs)","replies":[]}]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Removing_elements-Basic_techniques","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Adding_menus-Basic_techniques","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Editing-Basic_techniques","replies":[{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-Textarea_with_article_wikicode-Editing","replies":[]},{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-Editing_toolbar-Editing","replies":[]},{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-Edittools-Editing","replies":[]}]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Doing_something_after_another_user_script-Basic_techniques","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-User_settings-Basic_techniques","replies":[]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Preventing_bugs","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-\u003Cnowiki\u003E_tags-Preventing_bugs","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Function_scope-Preventing_bugs","replies":[]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Ajax","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Common_problems-Ajax","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Basic_examples-Ajax","replies":[{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-Fetch_page_content-Basic_examples","replies":[]},{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-Get_the_wikitext_of_a_page-Basic_examples","replies":[{"headingLevel":5,"name":"h-","type":"heading","level":0,"id":"h-Using_module_mediawiki.api-Get_the_wikitext_of_a_page","replies":[]},{"headingLevel":5,"name":"h-","type":"heading","level":0,"id":"h-Using_plain_jQuery-Get_the_wikitext_of_a_page","replies":[]}]},{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-Edit_a_page_and_other_common_actions-Basic_examples","replies":[{"headingLevel":5,"name":"h-","type":"heading","level":0,"id":"h-Using_module_mediawiki.api_2-Edit_a_page_and_other_common_actions","replies":[]},{"headingLevel":5,"name":"h-","type":"heading","level":0,"id":"h-Using_plain_jQuery_2-Edit_a_page_and_other_common_actions","replies":[]}]},{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-Load_JavaScript_from_Wiki_page-Basic_examples","replies":[]},{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-Load_JSON_from_Wiki_page-Basic_examples","replies":[]}]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Working_with_CSS","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Publishing_a_CSS_file-Working_with_CSS","replies":[]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-See_also","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Notes","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-References","replies":[]}],"wgPageParseReport":{"discussiontools":{"limitreport-timeusage":"0.127"},"limitreport":{"cputime":"0.546","walltime":"0.666","ppvisitednodes":{"value":1399,"limit":1000000},"postexpandincludesize":{"value":46974,"limit":2097152},"templateargumentsize":{"value":1722,"limit":2097152},"expansiondepth":{"value":8,"limit":100},"expensivefunctioncount":{"value":49,"limit":500},"unstrip-depth":{"value":0,"limit":20},"unstrip-size":{"value":97520,"limit":5000000},"entityaccesscount":{"value":0,"limit":400},"timingprofile":["100.00% 351.656 1 -total"," 23.35% 82.096 1 Template:Wikipedia_programs"," 22.23% 78.180 1 Template:Mbox"," 17.14% 60.290 1 Template:About"," 16.49% 57.972 1 Wikipedia:User_scripts/Navbox"," 14.62% 51.427 2 Template:Shortcut"," 10.39% 36.554 2 Template:Flatlist"," 7.54% 26.518 2 Template:Reflist"," 3.66% 12.885 3 Template:Press_key"," 2.50% 8.775 4 Template:Abbr"]},"scribunto":{"limitreport-timeusage":{"value":"0.140","limit":"10.000"},"limitreport-memusage":{"value":2488061,"limit":52428800}},"cachereport":{"origin":"mw-api-int.codfw.main-746bf6896b-dqkf2","timestamp":"20241119005205","ttl":2592000,"transientcontent":false}}});});</script> </body> </html>