CINXE.COM

Wikipedia:User scripts/Guide - Wikipedia

<!DOCTYPE html> <html class="client-nojs skin-theme-clientpref-day mf-expand-sections-clientpref-0 mf-font-size-clientpref-small mw-mf-amc-clientpref-0" lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>Wikipedia:User scripts/Guide - Wikipedia</title> <script>(function(){var className="client-js skin-theme-clientpref-day mf-expand-sections-clientpref-0 mf-font-size-clientpref-small mw-mf-amc-clientpref-0";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":"710922ca-fab6-49cc-8e80-acfb212c600e","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":["*"],"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"},"wgMFMode":"stable","wgMFAmc":false,"wgMFAmcOutreachActive":false,"wgMFAmcOutreachUserEligible":false,"wgMFLazyLoadImages":true,"wgMFEditNoticesFeatureConflict":false,"wgMFDisplayWikibaseDescriptions":{"search":true,"watchlist":true,"tagline":false,"nearby":true},"wgMFIsSupportedEditRequest": true,"wgMFScriptPath":"","wgWMESchemaEditAttemptStepOversample":false,"wgWMEPageLength":40000,"wgRelatedArticlesCompat":[],"wgCentralAuthMobileDomain":true,"wgEditSubmitButtonLabelPublish":true,"wgDiscussionToolsFeaturesEnabled":{"replytool":true,"newtopictool":true,"sourcemodetoolbar":true,"topicsubscription":false,"autotopicsub":false,"visualenhancements":false,"visualenhancements_reply":false,"visualenhancements_pageframe":false},"wgDiscussionToolsFallbackEditMode":"source","wgSectionTranslationTargetLanguages":["ace","ady","alt","am","ami","an","ang","ann","anp","ar","ary","arz","as","ast","av","avk","awa","ay","az","azb","ba","ban","bar","bbc","bcl","bdr","be","bew","bg","bho","bi","bjn","blk","bm","bn","bo","bpy","br","bs","btm","bug","ca","cdo","ce","ceb","ch","chr","ckb","co","cr","crh","cs","cu","cy","da","dag","de","dga","din","diq","dsb","dtp","dv","dz","ee","el","eml","eo","es","et","eu","fa","fat","ff","fi","fj","fo","fon","fr","frp","frr","fur","fy","gag","gan","gcr","gl" ,"glk","gn","gom","gor","gpe","gu","guc","gur","guw","gv","ha","hak","haw","he","hi","hif","hr","hsb","ht","hu","hy","hyw","ia","iba","ie","ig","igl","ilo","io","is","it","iu","ja","jam","jv","ka","kaa","kab","kbd","kbp","kcg","kg","kge","ki","kk","kl","km","kn","ko","koi","krc","ks","ku","kus","kv","kw","ky","lad","lb","lez","lg","li","lij","lld","lmo","ln","lo","lt","ltg","lv","mad","mai","map-bms","mdf","mg","mhr","mi","min","mk","ml","mn","mni","mnw","mos","mr","mrj","ms","mt","mwl","my","myv","mzn","nah","nan","nap","nb","nds","nds-nl","ne","new","nia","nl","nn","nqo","nr","nso","ny","oc","om","or","os","pa","pag","pam","pap","pcd","pcm","pdc","pl","pms","pnb","ps","pt","pwn","qu","rm","rn","ro","rsk","rue","rup","rw","sa","sah","sat","sc","scn","sco","sd","se","sg","sgs","sh","shi","shn","si","sk","skr","sl","sm","smn","sn","so","sq","sr","srn","ss","st","stq","su","sv","sw","szl","ta","tay","tcy","tdd","te","tet","tg","th","ti","tk","tl","tly","tn","to","tpi","tr","trv","ts", "tt","tum","tw","ty","tyv","udm","ur","uz","ve","vec","vep","vi","vls","vo","vro","wa","war","wo","wuu","xal","xh","xmf","yi","yo","yue","za","zgh","zh","zu"],"isLanguageSearcherCXEntrypointEnabled":false,"mintEntrypointLanguages":["ace","ast","azb","bcl","bjn","bh","crh","ff","fon","ig","is","ki","ks","lmo","min","sat","ss","tn","vec"],"wgWikibaseItemId":"Q13359134","wgCheckUserClientHintsHeadersJsApi":["brands","architecture","bitness","fullVersionList","mobile","model","platform","platformVersion"],"GEHomepageSuggestedEditsEnableTopics":true,"wgGETopicsMatchModeEnabled":false,"wgGEStructuredTaskRejectionReasonTextInputEnabled":false,"wgGELevelingUpEnabledForUser":false,"wgMinervaPermissions":{"watchable":true,"watch":false},"wgMinervaFeatures":{"beta":false,"donate":true,"mobileOptionsLink":true,"categories":false,"pageIssues":true,"talkAtTop":true,"historyInPageActions":false,"overflowSubmenu":false,"tabsOnSpecials":true,"personalMenu":false,"mainMenuExpanded":false,"echo":true, "nightMode":true},"wgMinervaDownloadNamespaces":[0]};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.minerva.styles":"ready","skins.minerva.content.styles.images":"ready","mediawiki.hlist":"ready","skins.minerva.codex.styles":"ready","skins.minerva.icons":"ready","skins.minerva.amc.styles":"ready","ext.wikimediamessages.styles":"ready","mobile.init.styles":"ready","wikibase.client.init":"ready","ext.wikimediaBadges":"ready"};RLPAGEMODULES=["ext.cite.ux-enhancements","ext.pygments.view","mediawiki.page.media","site","mediawiki.page.ready","skins.minerva.scripts","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.gadget.switcher", "ext.urlShortener.toolbar","ext.centralauth.centralautologin","ext.popups","mobile.init","ext.echo.centralauth","ext.discussionTools.init","ext.eventLogging","ext.wikimediaEvents","ext.navigationTiming","ext.cx.eventlogging.campaigns","ext.cx.entrypoints.languagesearcher.init","mw.externalguidance.init","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&amp;modules=ext.cite.styles%7Cext.discussionTools.init.styles%7Cext.pygments%2CwikimediaBadges%7Cext.wikimediamessages.styles%7Cmediawiki.hlist%7Cmediawiki.widgets.styles%7Cmobile.init.styles%7Coojs-ui-core.icons%2Cstyles%7Coojs-ui.styles.indicators%7Cskins.minerva.amc.styles%7Cskins.minerva.codex.styles%7Cskins.minerva.content.styles.images%7Cskins.minerva.icons%2Cstyles%7Cwikibase.client.init&amp;only=styles&amp;skin=minerva"> <script async="" src="/w/load.php?lang=en&amp;modules=startup&amp;only=scripts&amp;raw=1&amp;skin=minerva"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/w/load.php?lang=en&amp;modules=site.styles&amp;only=styles&amp;skin=minerva"> <meta name="generator" content="MediaWiki 1.44.0-wmf.4"> <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="theme-color" content="#eaecf0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=0.25, maximum-scale=5.0"> <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="manifest" href="/w/api.php?action=webapp-manifest"> <link rel="alternate" type="application/x-wiki" title="Edit this page" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;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="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 mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-4 ns-subject mw-editable page-Wikipedia_User_scripts_Guide rootpage-Wikipedia_User_scripts stable skin-minerva action-view skin--responsive mw-mf-amc-disabled mw-mf"><div id="mw-mf-viewport"> <div id="mw-mf-page-center"> <a class="mw-mf-page-center__mask" href="#"></a> <header class="header-container header-chrome"> <div class="minerva-header"> <nav class="navigation-drawer toggle-list view-border-box"> <input type="checkbox" id="main-menu-input" class="toggle-list__checkbox" role="button" aria-haspopup="true" aria-expanded="false" aria-labelledby="mw-mf-main-menu-button"> <label role="button" for="main-menu-input" id="mw-mf-main-menu-button" aria-hidden="true" data-event-name="ui.mainmenu" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet toggle-list__toggle"> <span class="minerva-icon minerva-icon--menu"></span> <span></span> </label> <div id="mw-mf-page-left" class="menu view-border-box"> <ul id="p-navigation" class="toggle-list__list"> <li class="toggle-list-item "> <a class="toggle-list-item__anchor menu__item--home" href="/wiki/Main_Page" data-mw="interface"> <span class="minerva-icon minerva-icon--home"></span> <span class="toggle-list-item__label">Home</span> </a> </li> <li class="toggle-list-item "> <a class="toggle-list-item__anchor menu__item--random" href="/wiki/Special:Random" data-mw="interface"> <span class="minerva-icon minerva-icon--die"></span> <span class="toggle-list-item__label">Random</span> </a> </li> <li class="toggle-list-item skin-minerva-list-item-jsonly"> <a class="toggle-list-item__anchor menu__item--nearby" href="/wiki/Special:Nearby" data-event-name="menu.nearby" data-mw="interface"> <span class="minerva-icon minerva-icon--mapPin"></span> <span class="toggle-list-item__label">Nearby</span> </a> </li> </ul> <ul id="p-personal" class="toggle-list__list"> <li class="toggle-list-item "> <a class="toggle-list-item__anchor menu__item--login" href="/w/index.php?title=Special:UserLogin&amp;returnto=Wikipedia%3AUser+scripts%2FGuide" data-event-name="menu.login" data-mw="interface"> <span class="minerva-icon minerva-icon--logIn"></span> <span class="toggle-list-item__label">Log in</span> </a> </li> </ul> <ul id="pt-preferences" class="toggle-list__list"> <li class="toggle-list-item skin-minerva-list-item-jsonly"> <a class="toggle-list-item__anchor menu__item--settings" href="/w/index.php?title=Special:MobileOptions&amp;returnto=Wikipedia%3AUser+scripts%2FGuide" data-event-name="menu.settings" data-mw="interface"> <span class="minerva-icon minerva-icon--settings"></span> <span class="toggle-list-item__label">Settings</span> </a> </li> </ul> <ul id="p-donation" class="toggle-list__list"> <li class="toggle-list-item "> <a class="toggle-list-item__anchor menu__item--donate" href="https://donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&amp;utm_medium=sidebar&amp;utm_campaign=C13_en.wikipedia.org&amp;uselang=en&amp;utm_key=minerva" data-event-name="menu.donate" data-mw="interface"> <span class="minerva-icon minerva-icon--heart"></span> <span class="toggle-list-item__label">Donate</span> </a> </li> </ul> <ul class="hlist"> <li class="toggle-list-item "> <a class="toggle-list-item__anchor menu__item--about" href="/wiki/Wikipedia:About" data-mw="interface"> <span class="toggle-list-item__label">About Wikipedia</span> </a> </li> <li class="toggle-list-item "> <a class="toggle-list-item__anchor menu__item--disclaimers" href="/wiki/Wikipedia:General_disclaimer" data-mw="interface"> <span class="toggle-list-item__label">Disclaimers</span> </a> </li> </ul> </div> <label class="main-menu-mask" for="main-menu-input"></label> </nav> <div class="branding-box"> <a href="/wiki/Main_Page"> <span><img src="/static/images/mobile/copyright/wikipedia-wordmark-en.svg" alt="Wikipedia" width="120" height="18" style="width: 7.5em; height: 1.125em;"/> </span> </a> </div> <form action="/w/index.php" method="get" class="minerva-search-form"> <div class="search-box"> <input type="hidden" name="title" value="Special:Search"/> <input class="search skin-minerva-search-trigger" id="searchInput" type="search" name="search" placeholder="Search Wikipedia" aria-label="Search Wikipedia" autocapitalize="sentences" title="Search Wikipedia [f]" accesskey="f"> <span class="search-box-icon-overlay"><span class="minerva-icon minerva-icon--search"></span> </span> </div> <button id="searchIcon" class="cdx-button cdx-button--size-large cdx-button--icon-only cdx-button--weight-quiet skin-minerva-search-trigger"> <span class="minerva-icon minerva-icon--search"></span> <span>Search</span> </button> </form> <nav class="minerva-user-navigation" aria-label="User navigation"> </nav> </div> </header> <main id="content" class="mw-body"> <div class="banner-container"> <div id="siteNotice"></div> </div> <div class="pre-content heading-holder"> <div class="page-heading"> <h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-namespace">Wikipedia</span><span class="mw-page-title-separator">:</span><span class="mw-page-title-main">User scripts/Guide</span></h1> <div class="tagline"></div> </div> <ul id="p-associated-pages" class="minerva__tab-container"> <li class="minerva__tab selected"> <a class="minerva__tab-text" href="/wiki/Wikipedia:User_scripts/Guide" rel="" data-event-name="tabs.subject">Project page</a> </li> <li class="minerva__tab "> <a class="minerva__tab-text" href="/wiki/Wikipedia_talk:User_scripts/Guide" rel="" data-event-name="tabs.talk">Talk</a> </li> </ul> <nav class="page-actions-menu"> <ul id="p-views" class="page-actions-menu__list"> <li id="language-selector" class="page-actions-menu__list-item"> <a role="button" href="#p-lang" data-mw="interface" data-event-name="menu.languages" title="Language" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet language-selector"> <span class="minerva-icon minerva-icon--language"></span> <span>Language</span> </a> </li> <li id="page-actions-watch" class="page-actions-menu__list-item"> <a role="button" id="ca-watch" href="/w/index.php?title=Special:UserLogin&amp;returnto=Wikipedia%3AUser+scripts%2FGuide" data-event-name="menu.watch" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet menu__item--page-actions-watch"> <span class="minerva-icon minerva-icon--star"></span> <span>Watch</span> </a> </li> <li id="page-actions-edit" class="page-actions-menu__list-item"> <a role="button" id="ca-edit" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit" data-event-name="menu.edit" data-mw="interface" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet edit-page menu__item--page-actions-edit"> <span class="minerva-icon minerva-icon--edit"></span> <span>Edit</span> </a> </li> </ul> </nav> <!-- version 1.0.2 (change every time you update a partial) --> <div id="mw-content-subtitle"><div class="subpages">&lt; <bdi dir="ltr"><a href="/wiki/Wikipedia:User_scripts" title="Wikipedia:User scripts">Wikipedia:User scripts</a></bdi></div></div> </div> <div id="bodyContent" class="content"> <div id="mw-content-text" class="mw-body-content"><script>function mfTempOpenSection(id){var block=document.getElementById("mf-section-"+id);block.className+=" open-block";block.previousSibling.className+=" open-block";}</script><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr"><section class="mf-section-0" id="mf-section-0"><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><b><a href="/wiki/Wikipedia:Customisation" title="Wikipedia:Customisation">Wikipedia programming</a></b></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"><span id="WP:US/G"></span></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><span class="plainlinks"><a class="external text" href="https://en.wikipedia.org/w/index.php?title=Wikipedia:US/G&amp;redirect=no">WP:US/G</a></span></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> <div id="toc" class="toc" role="navigation" aria-labelledby="mw-toc-heading"><input type="checkbox" role="button" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none"><div class="toctitle" lang="en" dir="ltr"><h2 id="mw-toc-heading">Contents</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctogglecheckbox"></label></span></div> <ul> <li class="toclevel-1 tocsection-1"><a href="#Prerequisites"><span class="tocnumber">1</span> <span class="toctext">Prerequisites</span></a></li> <li class="toclevel-1 tocsection-2"><a href="#Forking_an_existing_script"><span class="tocnumber">2</span> <span class="toctext">Forking an existing script</span></a></li> <li class="toclevel-1 tocsection-3"><a href="#Writing_a_script_from_scratch"><span class="tocnumber">3</span> <span class="toctext">Writing a script from scratch</span></a> <ul> <li class="toclevel-2 tocsection-4"><a href="#Hello_world"><span class="tocnumber">3.1</span> <span class="toctext">Hello world</span></a></li> <li class="toclevel-2 tocsection-5"><a href="#Your_first_script"><span class="tocnumber">3.2</span> <span class="toctext">Your first script</span></a></li> </ul> </li> <li class="toclevel-1 tocsection-6"><a href="#Built-in_scripts"><span class="tocnumber">4</span> <span class="toctext">Built-in scripts</span></a></li> <li class="toclevel-1 tocsection-7"><a href="#Development_and_testing"><span class="tocnumber">5</span> <span class="toctext">Development and testing</span></a> <ul> <li class="toclevel-2 tocsection-8"><a href="#Basic"><span class="tocnumber">5.1</span> <span class="toctext">Basic</span></a></li> <li class="toclevel-2 tocsection-9"><a href="#Loading_it_from_a_localhost_web_server"><span class="tocnumber">5.2</span> <span class="toctext">Loading it from a localhost web server</span></a></li> <li class="toclevel-2 tocsection-10"><a href="#Browser-specific"><span class="tocnumber">5.3</span> <span class="toctext">Browser-specific</span></a></li> <li class="toclevel-2 tocsection-11"><a href="#Running_pieces_of_code"><span class="tocnumber">5.4</span> <span class="toctext">Running pieces of code</span></a></li> </ul> </li> <li class="toclevel-1 tocsection-12"><a href="#Publishing"><span class="tocnumber">6</span> <span class="toctext">Publishing</span></a></li> <li class="toclevel-1 tocsection-13"><a href="#Text_editors_and_debugging"><span class="tocnumber">7</span> <span class="toctext">Text editors and debugging</span></a> <ul> <li class="toclevel-2 tocsection-14"><a href="#Text_editors"><span class="tocnumber">7.1</span> <span class="toctext">Text editors</span></a></li> <li class="toclevel-2 tocsection-15"><a href="#JavaScript_Debuggers"><span class="tocnumber">7.2</span> <span class="toctext">JavaScript Debuggers</span></a></li> </ul> </li> <li class="toclevel-1 tocsection-16"><a href="#Basic_techniques"><span class="tocnumber">8</span> <span class="toctext">Basic techniques</span></a> <ul> <li class="toclevel-2 tocsection-17"><a href="#Running_code_on_page_load"><span class="tocnumber">8.1</span> <span class="toctext">Running code on page load</span></a> <ul> <li class="toclevel-3 tocsection-18"><a href="#%24(document).ready(...)"><span class="tocnumber">8.1.1</span> <span class="toctext">$(document).ready(...)</span></a></li> <li class="toclevel-3 tocsection-19"><a href="#mw.hook('wikipage.content').add(...)"><span class="tocnumber">8.1.2</span> <span class="toctext">mw.hook('wikipage.content').add(...)</span></a></li> </ul> </li> <li class="toclevel-2 tocsection-20"><a href="#Finding_elements"><span class="tocnumber">8.2</span> <span class="toctext">Finding elements</span></a></li> <li class="toclevel-2 tocsection-21"><a href="#Checking_the_current_page"><span class="tocnumber">8.3</span> <span class="toctext">Checking the current page</span></a></li> <li class="toclevel-2 tocsection-22"><a href="#Portlets_(menus_and_tabs)"><span class="tocnumber">8.4</span> <span class="toctext">Portlets (menus and tabs)</span></a> <ul> <li class="toclevel-3 tocsection-23"><a href="#List_of_portlets_(portlet_types)"><span class="tocnumber">8.4.1</span> <span class="toctext">List of portlets (portlet types)</span></a></li> <li class="toclevel-3 tocsection-24"><a href="#Portlet_structure"><span class="tocnumber">8.4.2</span> <span class="toctext">Portlet structure</span></a></li> <li class="toclevel-3 tocsection-25"><a href="#Adding_elements"><span class="tocnumber">8.4.3</span> <span class="toctext">Adding elements</span></a></li> </ul> </li> <li class="toclevel-2 tocsection-26"><a href="#Removing_elements"><span class="tocnumber">8.5</span> <span class="toctext">Removing elements</span></a></li> <li class="toclevel-2 tocsection-27"><a href="#Adding_menus"><span class="tocnumber">8.6</span> <span class="toctext">Adding menus</span></a></li> <li class="toclevel-2 tocsection-28"><a href="#Editing"><span class="tocnumber">8.7</span> <span class="toctext">Editing</span></a> <ul> <li class="toclevel-3 tocsection-29"><a href="#Textarea_with_article_wikicode"><span class="tocnumber">8.7.1</span> <span class="toctext">Textarea with article wikicode</span></a></li> <li class="toclevel-3 tocsection-30"><a href="#Editing_toolbar"><span class="tocnumber">8.7.2</span> <span class="toctext">Editing toolbar</span></a></li> <li class="toclevel-3 tocsection-31"><a href="#Edittools"><span class="tocnumber">8.7.3</span> <span class="toctext">Edittools</span></a></li> </ul> </li> <li class="toclevel-2 tocsection-32"><a href="#Doing_something_after_another_user_script"><span class="tocnumber">8.8</span> <span class="toctext">Doing something after another user script</span></a></li> <li class="toclevel-2 tocsection-33"><a href="#User_settings"><span class="tocnumber">8.9</span> <span class="toctext">User settings</span></a></li> </ul> </li> <li class="toclevel-1 tocsection-34"><a href="#Preventing_bugs"><span class="tocnumber">9</span> <span class="toctext">Preventing bugs</span></a> <ul> <li class="toclevel-2 tocsection-35"><a href="#&lt;nowiki&gt;_tags"><span class="tocnumber">9.1</span> <span class="toctext">&lt;nowiki&gt; tags</span></a></li> <li class="toclevel-2 tocsection-36"><a href="#Function_scope"><span class="tocnumber">9.2</span> <span class="toctext">Function scope</span></a></li> </ul> </li> <li class="toclevel-1 tocsection-37"><a href="#Ajax"><span class="tocnumber">10</span> <span class="toctext">Ajax</span></a> <ul> <li class="toclevel-2 tocsection-38"><a href="#Common_problems"><span class="tocnumber">10.1</span> <span class="toctext">Common problems</span></a></li> <li class="toclevel-2 tocsection-39"><a href="#Basic_examples"><span class="tocnumber">10.2</span> <span class="toctext">Basic examples</span></a> <ul> <li class="toclevel-3 tocsection-40"><a href="#Fetch_page_content"><span class="tocnumber">10.2.1</span> <span class="toctext">Fetch page content</span></a></li> <li class="toclevel-3 tocsection-41"><a href="#Get_the_wikitext_of_a_page"><span class="tocnumber">10.2.2</span> <span class="toctext">Get the wikitext of a page</span></a> <ul> <li class="toclevel-4 tocsection-42"><a href="#Using_module_mediawiki.api"><span class="tocnumber">10.2.2.1</span> <span class="toctext">Using module mediawiki.api</span></a></li> <li class="toclevel-4 tocsection-43"><a href="#Using_plain_jQuery"><span class="tocnumber">10.2.2.2</span> <span class="toctext">Using plain jQuery</span></a></li> </ul> </li> <li class="toclevel-3 tocsection-44"><a href="#Edit_a_page_and_other_common_actions"><span class="tocnumber">10.2.3</span> <span class="toctext">Edit a page and other common actions</span></a> <ul> <li class="toclevel-4 tocsection-45"><a href="#Using_module_mediawiki.api_2"><span class="tocnumber">10.2.3.1</span> <span class="toctext">Using module mediawiki.api</span></a></li> <li class="toclevel-4 tocsection-46"><a href="#Using_plain_jQuery_2"><span class="tocnumber">10.2.3.2</span> <span class="toctext">Using plain jQuery</span></a></li> </ul> </li> <li class="toclevel-3 tocsection-47"><a href="#Load_JavaScript_from_Wiki_page"><span class="tocnumber">10.2.4</span> <span class="toctext">Load JavaScript from Wiki page</span></a></li> <li class="toclevel-3 tocsection-48"><a href="#Load_JSON_from_Wiki_page"><span class="tocnumber">10.2.5</span> <span class="toctext">Load JSON from Wiki page</span></a></li> </ul> </li> </ul> </li> <li class="toclevel-1 tocsection-49"><a href="#Working_with_CSS"><span class="tocnumber">11</span> <span class="toctext">Working with CSS</span></a> <ul> <li class="toclevel-2 tocsection-50"><a href="#Publishing_a_CSS_file"><span class="tocnumber">11.1</span> <span class="toctext">Publishing a CSS file</span></a></li> </ul> </li> <li class="toclevel-1 tocsection-51"><a href="#See_also"><span class="tocnumber">12</span> <span class="toctext">See also</span></a></li> <li class="toclevel-1 tocsection-52"><a href="#Notes"><span class="tocnumber">13</span> <span class="toctext">Notes</span></a></li> <li class="toclevel-1 tocsection-53"><a href="#References"><span class="tocnumber">14</span> <span class="toctext">References</span></a></li> </ul> </div> </section><div class="mw-heading mw-heading2 ext-discussiontools-init-section section-heading" onclick="mfTempOpenSection(1)"><span class="indicator mf-icon mf-icon-expand mf-icon--small"></span><h2 id="Prerequisites" data-mw-thread-id="h-Prerequisites"><span data-mw-comment-start="" id="h-Prerequisites"></span>Prerequisites<span data-mw-comment-end="h-Prerequisites"></span></h2><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=1" title="Edit section: Prerequisites" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> <!--__DTELLIPSISBUTTON__{"threadItem":{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Prerequisites","replies":[]}}--></div><section class="mf-section-1 collapsible-block" id="mf-section-1"> <p>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>. </p><p>Try these links: </p> <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> <p>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 <i><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></i>). </p> </section><div class="mw-heading mw-heading2 ext-discussiontools-init-section section-heading" onclick="mfTempOpenSection(2)"><span class="indicator mf-icon mf-icon-expand mf-icon--small"></span><h2 id="Forking_an_existing_script" data-mw-thread-id="h-Forking_an_existing_script"><span data-mw-comment-start="" id="h-Forking_an_existing_script"></span>Forking an existing script<span data-mw-comment-end="h-Forking_an_existing_script"></span></h2><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=2" title="Edit section: Forking an existing script" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> <!--__DTELLIPSISBUTTON__{"threadItem":{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Forking_an_existing_script","replies":[]}}--></div><section class="mf-section-2 collapsible-block" id="mf-section-2"> <p>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",<sup id="cite_ref-contentmodel_1-0" class="reference"><a href="#cite_note-contentmodel-1"><span class="cite-bracket">[</span>n. 1<span class="cite-bracket">]</span></a></sup> 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. </p> </section><div class="mw-heading mw-heading2 ext-discussiontools-init-section section-heading" onclick="mfTempOpenSection(3)"><span class="indicator mf-icon mf-icon-expand mf-icon--small"></span><h2 id="Writing_a_script_from_scratch" data-mw-thread-id="h-Writing_a_script_from_scratch"><span data-mw-comment-start="" id="h-Writing_a_script_from_scratch"></span>Writing a script from scratch<span data-mw-comment-end="h-Writing_a_script_from_scratch"></span></h2><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=3" title="Edit section: Writing a script from scratch" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> <!--__DTELLIPSISBUTTON__{"threadItem":{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Writing_a_script_from_scratch","replies":["h-Hello_world-Writing_a_script_from_scratch","h-Your_first_script-Writing_a_script_from_scratch"]}}--></div><section class="mf-section-3 collapsible-block" id="mf-section-3"> <p>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 <i>skin</i>.js (such as vector.js) page, it is usually better to create a new subpage for it in the form <i>YourUserName/title</i>.js, where <i>title</i> 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>. </p> <div class="mw-heading mw-heading3"><h3 id="Hello_world" data-mw-thread-id="h-Hello_world-Writing_a_script_from_scratch"><span data-mw-comment-start="" id="h-Hello_world-Writing_a_script_from_scratch"></span>Hello world<span data-mw-comment-end="h-Hello_world-Writing_a_script_from_scratch"></span></h3><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=4" title="Edit section: Hello world" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <p>To make a <a href="/wiki/Hello_world" class="mw-redirect" title="Hello world">Hello world</a> program, insert this code into your <i>User:YourUserName/common.js</i> file. </p> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="nx">importScript</span><span class="p">(</span><span class="s1">'User:YourUserName/hello-world.js'</span><span class="p">);</span> </pre></div> <p>Next, create the page <i>User:YourUserName/hello-world.js</i>, and insert this code. </p> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="nx">$</span><span class="p">(</span><span class="s1">'#bodyContent'</span><span class="p">).</span><span class="nx">prepend</span><span class="p">(</span><span class="s1">'&lt;p&gt;Hello world!&lt;/p&gt;'</span><span class="p">);</span> </pre></div> <p>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>&lt;p&gt;Hello world!&lt;/p&gt;</code> is the HTML code to be inserted. </p> <div class="mw-heading mw-heading3"><h3 id="Your_first_script" data-mw-thread-id="h-Your_first_script-Writing_a_script_from_scratch"><span data-mw-comment-start="" id="h-Your_first_script-Writing_a_script_from_scratch"></span>Your first script<span data-mw-comment-end="h-Your_first_script-Writing_a_script_from_scratch"></span></h3><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=5" title="Edit section: Your first script" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <p>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: </p> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="c1">// Qwikify</span> <span class="nx">$</span><span class="p">(</span><span class="w"> </span><span class="nb">document</span><span class="w"> </span><span class="p">).</span><span class="nx">ready</span><span class="p">(</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">MODULE_CODE</span><span class="p">;</span> <span class="p">}</span><span class="w"> </span><span class="p">);</span> </pre></div> <p>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-<i>name</i></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. </p><p>Altogether, your new function should look like this: </p> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="c1">// Make sure the utilities module is loaded (will only load if not already)</span> <span class="nx">mw</span><span class="p">.</span><span class="nx">loader</span><span class="p">.</span><span class="nx">using</span><span class="p">(</span><span class="w"> </span><span class="s1">'mediawiki.util'</span><span class="p">,</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="c1">// Wait for the page to be parsed</span> <span class="w"> </span><span class="nx">$</span><span class="p">(</span><span class="w"> </span><span class="nb">document</span><span class="w"> </span><span class="p">).</span><span class="nx">ready</span><span class="p">(</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="w"> </span> <span class="w"> </span><span class="c1">// See the "Portlets (menus and tabs)" subsection below</span> <span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">link</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">mw</span><span class="p">.</span><span class="nx">util</span><span class="p">.</span><span class="nx">addPortletLink</span><span class="p">(</span><span class="w"> </span><span class="s1">'p-cactions'</span><span class="p">,</span><span class="w"> </span><span class="s1">'#'</span><span class="p">,</span><span class="w"> </span><span class="s1">'Wikify'</span><span class="p">,</span><span class="w"> </span><span class="s1">'ca-wikify'</span><span class="p">,</span><span class="w"> </span><span class="s1">'Mark for wikification'</span><span class="p">);</span><span class="w"> </span> <span class="w"> </span><span class="nx">$</span><span class="p">(</span><span class="w"> </span><span class="nx">link</span><span class="w"> </span><span class="p">).</span><span class="nx">click</span><span class="p">(</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">(</span><span class="w"> </span><span class="nx">event</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span> <span class="w"> </span><span class="nx">doQwikify</span><span class="p">();</span> <span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="p">);</span> <span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="p">);</span> <span class="p">}</span><span class="w"> </span><span class="p">);</span> </pre></div> <p>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 <span class="nowrap">{{</span><a href="/wiki/Template:Wikify" title="Template:Wikify">wikify</a><span class="nowrap">}}</span> (and two new lines), we simply do: </p> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="nb">document</span><span class="p">.</span><span class="nx">editform</span><span class="p">.</span><span class="nx">wpTextbox1</span><span class="p">.</span><span class="nx">value</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"{"</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="s2">"{wikify}}\n\n"</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">editform</span><span class="p">.</span><span class="nx">wpTextbox1</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span> </pre></div> <p>(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.) </p><p>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: </p> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="kd">function</span><span class="w"> </span><span class="nx">doQwikify</span><span class="p">()</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">editform</span><span class="p">.</span><span class="nx">wpTextbox1</span><span class="p">.</span><span class="nx">value</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"{"</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="s2">"{wikify}}\n\n"</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">editform</span><span class="p">.</span><span class="nx">wpTextbox1</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span> <span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">editform</span><span class="p">.</span><span class="nx">submit</span><span class="p">();</span> <span class="p">}</span> </pre></div> <p>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!<sup id="cite_ref-2" class="reference"><a href="#cite_note-2"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup> Note that syntax highlighting must be disabled for this to work. </p> </section><div class="mw-heading mw-heading2 ext-discussiontools-init-section section-heading" onclick="mfTempOpenSection(4)"><span class="indicator mf-icon mf-icon-expand mf-icon--small"></span><h2 id="Built-in_scripts" data-mw-thread-id="h-Built-in_scripts"><span data-mw-comment-start="" id="h-Built-in_scripts"></span>Built-in scripts<span data-mw-comment-end="h-Built-in_scripts"></span></h2><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=6" title="Edit section: Built-in scripts" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> <!--__DTELLIPSISBUTTON__{"threadItem":{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Built-in_scripts","replies":[]}}--></div><section class="mf-section-4 collapsible-block" id="mf-section-4"> <p>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: </p> <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> <p>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. </p> </section><div class="mw-heading mw-heading2 ext-discussiontools-init-section section-heading" onclick="mfTempOpenSection(5)"><span class="indicator mf-icon mf-icon-expand mf-icon--small"></span><h2 id="Development_and_testing" data-mw-thread-id="h-Development_and_testing"><span data-mw-comment-start="" id="h-Development_and_testing"></span>Development and testing<span data-mw-comment-end="h-Development_and_testing"></span></h2><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=7" title="Edit section: Development and testing" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> <!--__DTELLIPSISBUTTON__{"threadItem":{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Development_and_testing","replies":["h-Basic-Development_and_testing","h-Loading_it_from_a_localhost_web_server-Development_and_testing","h-Browser-specific-Development_and_testing","h-Running_pieces_of_code-Development_and_testing"]}}--></div><section class="mf-section-5 collapsible-block" id="mf-section-5"> <p>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. </p> <div class="mw-heading mw-heading3"><h3 id="Basic" data-mw-thread-id="h-Basic-Development_and_testing"><span data-mw-comment-start="" id="h-Basic-Development_and_testing"></span>Basic<span data-mw-comment-end="h-Basic-Development_and_testing"></span></h3><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=8" title="Edit section: Basic" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </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"><span data-mw-comment-start="" id="h-Loading_it_from_a_localhost_web_server-Development_and_testing"></span>Loading it from a localhost web server<span data-mw-comment-end="h-Loading_it_from_a_localhost_web_server-Development_and_testing"></span></h3><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=9" title="Edit section: Loading it from a localhost web server" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <p>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>: </p> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="nx">mw</span><span class="p">.</span><span class="nx">loader</span><span class="p">.</span><span class="nx">load</span><span class="p">(</span><span class="w"> </span><span class="s1">'https://localhost/wikipediatest.js'</span><span class="w"> </span><span class="p">);</span> </pre></div> <p>In some environment, you need write this like<sup id="cite_ref-3" class="reference"><a href="#cite_note-3"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup>: </p> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="nx">mw</span><span class="p">.</span><span class="nx">loader</span><span class="p">.</span><span class="nx">load</span><span class="p">(</span><span class="w"> </span><span class="s1">'http://127.0.0.1/wikipediatest.js'</span><span class="w"> </span><span class="p">);</span> </pre></div> <p>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. </p><p>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>.) </p><p>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>. </p><p>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. </p><p>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. </p><p>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. </p> <div class="mw-heading mw-heading3"><h3 id="Browser-specific" data-mw-thread-id="h-Browser-specific-Development_and_testing"><span data-mw-comment-start="" id="h-Browser-specific-Development_and_testing"></span>Browser-specific<span data-mw-comment-end="h-Browser-specific-Development_and_testing"></span></h3><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=10" title="Edit section: Browser-specific" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <p>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. </p> <div class="mw-heading mw-heading3"><h3 id="Running_pieces_of_code" data-mw-thread-id="h-Running_pieces_of_code-Development_and_testing"><span data-mw-comment-start="" id="h-Running_pieces_of_code-Development_and_testing"></span>Running pieces of code<span data-mw-comment-end="h-Running_pieces_of_code-Development_and_testing"></span></h3><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=11" title="Edit section: Running pieces of code" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <p>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. </p> </section><div class="mw-heading mw-heading2 ext-discussiontools-init-section section-heading" onclick="mfTempOpenSection(6)"><span class="indicator mf-icon mf-icon-expand mf-icon--small"></span><h2 id="Publishing" data-mw-thread-id="h-Publishing"><span data-mw-comment-start="" id="h-Publishing"></span>Publishing<span data-mw-comment-end="h-Publishing"></span></h2><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=12" title="Edit section: Publishing" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> <!--__DTELLIPSISBUTTON__{"threadItem":{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Publishing","replies":[]}}--></div><section class="mf-section-6 collapsible-block" id="mf-section-6"> <p>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",<sup id="cite_ref-contentmodel_1-1" class="reference"><a href="#cite_note-contentmodel-1"><span class="cite-bracket">[</span>n. 1<span class="cite-bracket">]</span></a></sup> 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>. </p> </section><div class="mw-heading mw-heading2 ext-discussiontools-init-section section-heading" onclick="mfTempOpenSection(7)"><span class="indicator mf-icon mf-icon-expand mf-icon--small"></span><h2 id="Text_editors_and_debugging" data-mw-thread-id="h-Text_editors_and_debugging"><span data-mw-comment-start="" id="h-Text_editors_and_debugging"></span>Text editors and debugging<span data-mw-comment-end="h-Text_editors_and_debugging"></span></h2><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=13" title="Edit section: Text editors and debugging" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> <!--__DTELLIPSISBUTTON__{"threadItem":{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Text_editors_and_debugging","replies":["h-Text_editors-Text_editors_and_debugging","h-JavaScript_Debuggers-Text_editors_and_debugging"]}}--></div><section class="mf-section-7 collapsible-block" id="mf-section-7"> <div class="mw-heading mw-heading3"><h3 id="Text_editors" data-mw-thread-id="h-Text_editors-Text_editors_and_debugging"><span data-mw-comment-start="" id="h-Text_editors-Text_editors_and_debugging"></span>Text editors<span data-mw-comment-end="h-Text_editors-Text_editors_and_debugging"></span></h3><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=14" title="Edit section: Text editors" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <p>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: </p> <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> <p>Here are some recommended editors, by operating system. </p> <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<sup id="cite_ref-4" class="reference"><a href="#cite_note-4"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup>)</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"><span data-mw-comment-start="" id="h-JavaScript_Debuggers-Text_editors_and_debugging"></span>JavaScript Debuggers<span data-mw-comment-end="h-JavaScript_Debuggers-Text_editors_and_debugging"></span></h3><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=15" title="Edit section: JavaScript Debuggers" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <p>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.) </p> <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> </section><div class="mw-heading mw-heading2 ext-discussiontools-init-section section-heading" onclick="mfTempOpenSection(8)"><span class="indicator mf-icon mf-icon-expand mf-icon--small"></span><h2 id="Basic_techniques" data-mw-thread-id="h-Basic_techniques"><span data-mw-comment-start="" id="h-Basic_techniques"></span>Basic techniques<span data-mw-comment-end="h-Basic_techniques"></span></h2><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=16" title="Edit section: Basic techniques" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> <!--__DTELLIPSISBUTTON__{"threadItem":{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Basic_techniques","replies":["h-Running_code_on_page_load-Basic_techniques","h-Finding_elements-Basic_techniques","h-Checking_the_current_page-Basic_techniques","h-Portlets_(menus_and_tabs)-Basic_techniques","h-Removing_elements-Basic_techniques","h-Adding_menus-Basic_techniques","h-Editing-Basic_techniques","h-Doing_something_after_another_user_script-Basic_techniques","h-User_settings-Basic_techniques"]}}--></div><section class="mf-section-8 collapsible-block" id="mf-section-8"> <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"><span data-mw-comment-start="" id="h-Running_code_on_page_load-Basic_techniques"></span>Running code on page load<span data-mw-comment-end="h-Running_code_on_page_load-Basic_techniques"></span></h3><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=17" title="Edit section: Running code on page load" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <p>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. </p> <div class="mw-heading mw-heading4"><h4 id="$(document).ready(...)" data-mw-thread-id="h-$(document).ready(...)-Running_code_on_page_load"><span id=".24.28document.29.ready.28....29"></span><span data-mw-comment-start="" id="h-$(document).ready(...)-Running_code_on_page_load"></span><code>$(document).ready(...)</code><span data-mw-comment-end="h-$(document).ready(...)-Running_code_on_page_load"></span></h4><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=18" title="Edit section: $(document).ready(...)" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <p>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>. </p> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="c1">// Define our main function</span> <span class="kd">function</span><span class="w"> </span><span class="nx">myScript</span><span class="p">()</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="c1">// ... code ...</span> <span class="p">};</span> <span class="c1">// Schedule it to run after the HTML page is parsed</span> <span class="nx">$</span><span class="p">(</span><span class="w"> </span><span class="nb">document</span><span class="w"> </span><span class="p">).</span><span class="nx">ready</span><span class="p">(</span><span class="w"> </span><span class="nx">myScript</span><span class="w"> </span><span class="p">);</span> <span class="c1">// This shorthand is also valid</span> <span class="nx">jQuery</span><span class="p">(</span><span class="w"> </span><span class="nx">myScript</span><span class="w"> </span><span class="p">);</span> </pre></div> <p>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>: </p> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="nx">$</span><span class="p">(</span><span class="w"> </span><span class="nb">document</span><span class="w"> </span><span class="p">).</span><span class="nx">ready</span><span class="p">(</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="c1">// ... code ...</span> <span class="p">}</span><span class="w"> </span><span class="p">);</span> <span class="c1">// Or</span> <span class="nx">jQuery</span><span class="p">(</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="c1">// ... code ...</span> <span class="p">}</span><span class="w"> </span><span class="p">);</span> </pre></div> <p><i> <b>Note:</b> <code>$</code> and <code>jQuery</code> are the same object; choosing between them is purely a matter of opinion.</i> </p><p>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. </p> <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"><span id="mw.hook.28.27wikipage.content.27.29.add.28....29"></span><span data-mw-comment-start="" id="h-mw.hook('wikipage.content').add(...)-Running_code_on_page_load"></span><code>mw.hook('wikipage.content').add(...)</code><span data-mw-comment-end="h-mw.hook('wikipage.content').add(...)-Running_code_on_page_load"></span></h4><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=19" title="Edit section: mw.hook('wikipage.content').add(...)" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <p>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. </p><p>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 <i>really</i> many times. </p><p>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. </p><p>Code that works with page content and avoids the aforementioned pitfalls may look like this: </p> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="nx">mw</span><span class="p">.</span><span class="nx">hook</span><span class="p">(</span><span class="w"> </span><span class="s1">'wikipage.content'</span><span class="w"> </span><span class="p">).</span><span class="nx">add</span><span class="p">(</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">(</span><span class="w"> </span><span class="nx">$content</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">$target</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">$content</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="w"> </span><span class="s1">'.targetClass'</span><span class="w"> </span><span class="p">);</span> <span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="w"> </span><span class="nx">$target</span><span class="p">.</span><span class="nx">length</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="c1">// Do things with $target</span> <span class="w"> </span><span class="p">}</span> <span class="w"> </span><span class="c1">// Only perform some operations when it is #mw-content-text in the argument</span> <span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="w"> </span><span class="nx">$content</span><span class="p">.</span><span class="nx">is</span><span class="p">(</span><span class="w"> </span><span class="s1">'#mw-content-text'</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">$note</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">$</span><span class="p">(</span><span class="w"> </span><span class="s1">'&lt;div&gt;'</span><span class="w"> </span><span class="p">)</span> <span class="w"> </span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="w"> </span><span class="s1">'myScript-note'</span><span class="w"> </span><span class="p">)</span> <span class="w"> </span><span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="w"> </span><span class="s1">'MyScript has successfully processed the content!'</span><span class="w"> </span><span class="p">);</span> <span class="w"> </span><span class="nx">$content</span><span class="p">.</span><span class="nx">prepend</span><span class="p">(</span><span class="w"> </span><span class="nx">$note</span><span class="w"> </span><span class="p">);</span> <span class="w"> </span><span class="p">}</span> <span class="p">}</span><span class="w"> </span><span class="p">);</span> </pre></div> <p>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"><span class="nx">$content</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="w"> </span><span class="s1">'.targetClass'</span><span class="w"> </span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="w"> </span><span class="s1">'click'</span><span class="p">,</span><span class="w"> </span><span class="p">...</span><span class="w"> </span><span class="p">)</span></code> you can write <code class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><span class="nx">$</span><span class="p">(</span><span class="w"> </span><span class="nb">document</span><span class="w"> </span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="w"> </span><span class="s1">'click'</span><span class="p">,</span><span class="w"> </span><span class="s1">'.targetClass'</span><span class="p">,</span><span class="w"> </span><span class="p">...</span><span class="w"> </span><span class="p">)</span></code>. </p> <div class="mw-heading mw-heading3"><h3 id="Finding_elements" data-mw-thread-id="h-Finding_elements-Basic_techniques"><span data-mw-comment-start="" id="h-Finding_elements-Basic_techniques"></span>Finding elements<span data-mw-comment-end="h-Finding_elements-Basic_techniques"></span></h3><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=20" title="Edit section: Finding elements" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <p>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. </p> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="p">&lt;</span><span class="nt">form</span> <span class="na">name</span><span class="o">=</span><span class="s">"frmname"</span> <span class="na">id</span><span class="o">=</span><span class="s">"frmid"</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">textarea</span> <span class="na">name</span><span class="o">=</span><span class="s">"txtname"</span> <span class="na">id</span><span class="o">=</span><span class="s">"txtid"</span><span class="p">&gt;&lt;/</span><span class="nt">textarea</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">input</span> <span class="na">id</span><span class="o">=</span><span class="s">"neighbor"</span> <span class="p">/&gt;</span> <span class="p">&lt;/</span><span class="nt">form</span><span class="p">&gt;</span> </pre></div> <p>We can find element <code>textarea</code>: </p> <ul><li>Using its <code>id</code>: <code class="mw-highlight mw-highlight-lang-js mw-content-ltr" dir="ltr"><span class="nx">$</span><span class="p">(</span><span class="w"> </span><span class="s1">'#txtid'</span><span class="w"> </span><span class="p">)</span></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"><span class="nx">$</span><span class="p">(</span><span class="w"> </span><span class="s1">'textarea'</span><span class="w"> </span><span class="p">)</span></code></li> <li>Using an element next to it: <code class="mw-highlight mw-highlight-lang-js mw-content-ltr" dir="ltr"><span class="nx">$</span><span class="p">(</span><span class="w"> </span><span class="s1">'#neighbor'</span><span class="w"> </span><span class="p">).</span><span class="nx">prev</span><span class="p">()</span></code></li> <li>As a child of its parent: <code class="mw-highlight mw-highlight-lang-js mw-content-ltr" dir="ltr"><span class="nx">$</span><span class="p">(</span><span class="w"> </span><span class="s1">'#frmid'</span><span class="w"> </span><span class="p">).</span><span class="nx">children</span><span class="p">(</span><span class="w"> </span><span class="s1">'form'</span><span class="w"> </span><span class="p">)</span></code></li> <li>As a form element, using <code>name</code>: <code class="mw-highlight mw-highlight-lang-js mw-content-ltr" dir="ltr"><span class="nx">$</span><span class="p">(</span><span class="w"> </span><span class="s1">'#frmid [name="txtname"]'</span><span class="w"> </span><span class="p">)</span></code></li></ul> <p><i> <a rel="nofollow" class="external text" href="http://jsfiddle.net/compwhizii/j2QRf/">This example on jsFiddle</a></i> </p><p>The <a rel="nofollow" class="external text" href="//api.jquery.com">jQuery API reference</a> is an excellent source for documentation. </p> <div class="mw-heading mw-heading3"><h3 id="Checking_the_current_page" data-mw-thread-id="h-Checking_the_current_page-Basic_techniques"><span data-mw-comment-start="" id="h-Checking_the_current_page-Basic_techniques"></span>Checking the current page<span data-mw-comment-end="h-Checking_the_current_page-Basic_techniques"></span></h3><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=21" title="Edit section: Checking the current page" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <p>Many scripts are supposed to work only on some pages. You can check: </p> <ul><li>The page type<div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="w"> </span><span class="nx">mw</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="w"> </span><span class="s1">'wgAction'</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="s1">'history'</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="c1">// Continue only on history pages.</span> </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><span></span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="w"> </span><span class="nx">mw</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="w"> </span><span class="s1">'wgCanonicalNamespace'</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="s1">'User_talk'</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="c1">// Continue only on User_talk pages.</span> </pre></div><div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="w"> </span><span class="nx">mw</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="w"> </span><span class="s1">'wgPageName'</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="s1">'Article_name'</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="c1">// Continue only for the article "Article name".</span> </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><span></span><span class="kd">function</span><span class="w"> </span><span class="nx">func_start</span><span class="p">()</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="w"> </span><span class="nx">$</span><span class="p">(</span><span class="w"> </span><span class="s1">'#editForm'</span><span class="w"> </span><span class="p">).</span><span class="nx">length</span><span class="w"> </span><span class="o">==</span><span class="w"> </span><span class="mf">0</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="k">return</span><span class="p">;</span><span class="w"> </span><span class="c1">//No edit form  ? exit</span> <span class="w"> </span><span class="c1">// …</span> </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"><span id="Portlets_.28menus_and_tabs.29"></span><span data-mw-comment-start="" id="h-Portlets_(menus_and_tabs)-Basic_techniques"></span>Portlets (menus and tabs)<span data-mw-comment-end="h-Portlets_(menus_and_tabs)-Basic_techniques"></span></h3><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=22" title="Edit section: Portlets (menus and tabs)" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </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"><span id="WP:PORTLET"></span></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><span class="plainlinks"><a class="external text" href="https://en.wikipedia.org/w/index.php?title=Wikipedia:PORTLET&amp;redirect=no">WP:PORTLET</a></span></li></ul></div></div> <p>Portlets are MediaWiki's name for groups of links located in the topbar and sidebar. Here is a diagram of portlet ID's. </p> <figure typeof="mw:File/Thumb"><a href="/wiki/File:MediaWiki_portlet_names.svg" class="mw-file-description"><noscript><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" data-file-width="1793" data-file-height="797"></noscript><span class="lazy-image-placeholder" style="width: 500px;height: 222px;" data-src="//upload.wikimedia.org/wikipedia/commons/thumb/b/b6/MediaWiki_portlet_names.svg/500px-MediaWiki_portlet_names.svg.png" data-width="500" data-height="222" data-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-class="mw-file-element">&nbsp;</span></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)"><span id="List_of_portlets_.28portlet_types.29"></span><span data-mw-comment-start="" id="h-List_of_portlets_(portlet_types)-Portlets_(menus_and_tabs)"></span>List of portlets (portlet types)<span class="anchor" id="List_of_portlets"></span><span data-mw-comment-end="h-List_of_portlets_(portlet_types)-Portlets_(menus_and_tabs)"></span></h4><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=23" title="Edit section: List of portlets (portlet types)" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <ul><li>Top <ul><li><span style="color:green;">p-personal</span> - The links at the very top right of the page. "personal" stands for "personal tools".</li> <li><span style="color:red;">p-namespaces</span> - The tabs on the left that never collapse. Not recommended, not much space. The article and talk tabs are located here.</li> <li><span style="color:red;">p-views</span> - The tabs in the middle that never collapse. Not recommended, not much space. The favorite page star tab is located here.</li> <li><span style="color:green;">p-cactions</span> - The items in the "More" tab's dropdown menu. "cactions" stands for "content actions".</li> <li><span style="color:red;">p-search</span> - Adding things here will mess up the appearance of the search box. Not recommended.</li></ul></li> <li>Left <ul><li><span style="color:red;">p-logo</span> - Adding things here will mess up the appearance of the logo. Not recommended.</li> <li><span style="color:green;">p-navigation</span></li> <li><span style="color:green;">p-interaction</span> - Has the title "Contribute".</li> <li><span style="color:green;">p-tb</span> - Has the title "Tools". TB stands for toolbox.</li> <li><span style="color:red;">p-coll-print_export</span> - Has the title "Print/export". Not a good place to add things, since this should just be for printing and exporting.</li> <li><span style="color:red;">p-wikibase-otherprojects</span> - 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><span style="color:red;">p-lang</span> - 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)"><span data-mw-comment-start="" id="h-Portlet_structure-Portlets_(menus_and_tabs)"></span>Portlet structure<span data-mw-comment-end="h-Portlet_structure-Portlets_(menus_and_tabs)"></span></h4><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=24" title="Edit section: Portlet structure" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"p-myname"</span> <span class="na">class</span><span class="o">=</span><span class="s">"portlet"</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">h5</span><span class="p">&gt;</span>Header<span class="p">&lt;/</span><span class="nt">h5</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"body"</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">li</span> <span class="na">id</span><span class="o">=</span><span class="s">"..."</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">a</span> <span class="err">...</span><span class="p">&gt;</span> //Links <span class="p">&lt;</span><span class="nt">li</span> <span class="na">id</span><span class="o">=</span><span class="s">"..."</span><span class="p">&gt;</span> <span class="p">&lt;</span><span class="nt">a</span> <span class="err">...</span><span class="p">&gt;</span> ... </pre></div> <div class="mw-heading mw-heading4"><h4 id="Adding_elements" data-mw-thread-id="h-Adding_elements-Portlets_(menus_and_tabs)"><span data-mw-comment-start="" id="h-Adding_elements-Portlets_(menus_and_tabs)"></span>Adding elements<span data-mw-comment-end="h-Adding_elements-Portlets_(menus_and_tabs)"></span></h4><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=25" title="Edit section: Adding elements" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <p>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: </p> <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><span></span><span class="c1">// Several examples of portlet links</span> <span class="c1">// Adds a link to your js file to the toolbox. tb = toolbox</span> <span class="nx">mw</span><span class="p">.</span><span class="nx">util</span><span class="p">.</span><span class="nx">addPortletLink</span><span class="w"> </span><span class="p">(</span><span class="w"> </span><span class="s1">'p-tb'</span><span class="p">,</span><span class="w"> </span><span class="nx">mw</span><span class="p">.</span><span class="nx">util</span><span class="p">.</span><span class="nx">getUrl</span><span class="p">(</span><span class="w"> </span><span class="s1">'Special:MyPage/common.js'</span><span class="w"> </span><span class="p">),</span><span class="w"> </span><span class="s1">'My JS'</span><span class="p">,</span><span class="w"> </span><span class="s1">'pt-myvector'</span><span class="p">,</span><span class="w"> </span><span class="s1">'Visit your js file'</span><span class="p">);</span> <span class="c1">// Add a link to the edit page for your Notes in your personal links</span> <span class="c1">// Note: We assume that short/pretty URLs are in use with ?action, ideally you would check for that.</span> <span class="nx">mw</span><span class="p">.</span><span class="nx">util</span><span class="p">.</span><span class="nx">addPortletLink</span><span class="w"> </span><span class="p">(</span><span class="w"> </span><span class="s1">'p-personal'</span><span class="p">,</span><span class="w"> </span><span class="nx">mw</span><span class="p">.</span><span class="nx">util</span><span class="p">.</span><span class="nx">getUrl</span><span class="p">(</span><span class="w"> </span><span class="s1">'Special:MyPage/Notes'</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="s1">'?action=edit'</span><span class="p">,</span><span class="w"> </span><span class="s1">'My notes'</span><span class="p">,</span><span class="w"> </span><span class="s1">'pt-mynotes'</span><span class="p">,</span><span class="w"> </span><span class="s1">'Edit your personal notes'</span><span class="w"> </span><span class="p">);</span> <span class="c1">// Adds a link to prefix index for the current page to the toolbox</span> <span class="nx">mw</span><span class="p">.</span><span class="nx">util</span><span class="p">.</span><span class="nx">addPortletLink</span><span class="w"> </span><span class="p">(</span><span class="w"> </span><span class="s1">'p-tb'</span><span class="p">,</span><span class="w"> </span><span class="nx">mw</span><span class="p">.</span><span class="nx">util</span><span class="p">.</span><span class="nx">getUrl</span><span class="p">(</span><span class="w"> </span><span class="s1">'Special:Prefixindex/'</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">mw</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="w"> </span><span class="s1">'wgPageName'</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">),</span><span class="w"> </span><span class="s1">'Prefixindex'</span><span class="p">,</span><span class="w"> </span><span class="s1">'tb-prefixindex'</span><span class="p">);</span> <span class="c1">// Adds a link to logs for your account</span> <span class="nx">mw</span><span class="p">.</span><span class="nx">util</span><span class="p">.</span><span class="nx">addPortletLink</span><span class="w"> </span><span class="p">(</span><span class="w"> </span><span class="s1">'p-personal'</span><span class="p">,</span><span class="w"> </span><span class="nx">mw</span><span class="p">.</span><span class="nx">util</span><span class="p">.</span><span class="nx">getUrl</span><span class="p">(</span><span class="w"> </span><span class="s1">'Special:Log/'</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">mw</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="w"> </span><span class="s1">'wgUserName'</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">),</span><span class="w"> </span><span class="s1">'My logs'</span><span class="p">,</span><span class="w"> </span><span class="s1">'pt-mylogs'</span><span class="p">);</span> </pre></div> <p>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. </p> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="c1">// Add a clickable button on the edit article page, above the edit summary.</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'.editOptions'</span><span class="p">).</span><span class="nx">prepend</span><span class="p">(</span><span class="s1">'&lt;button type="button" id="my-custom-button"&gt;Do Things&lt;/button&gt;'</span><span class="p">);</span> <span class="c1">// Add a listener to your button, that does something when it is clicked.</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'#my-custom-button'</span><span class="p">).</span><span class="nx">click</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="c1">// do things</span> <span class="p">});</span> </pre></div> <div class="mw-heading mw-heading3"><h3 id="Removing_elements" data-mw-thread-id="h-Removing_elements-Basic_techniques"><span data-mw-comment-start="" id="h-Removing_elements-Basic_techniques"></span>Removing elements<span data-mw-comment-end="h-Removing_elements-Basic_techniques"></span></h3><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=26" title="Edit section: Removing elements" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <p>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. </p> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="c1">// Example: remove special characters toolbar from edit page</span> <span class="nx">$</span><span class="p">(</span><span class="w"> </span><span class="s1">'#editpage-specialchars'</span><span class="w"> </span><span class="p">).</span><span class="nx">hide</span><span class="p">();</span> <span class="c1">// Or modify the CSS directly</span> <span class="nx">$</span><span class="p">(</span><span class="w"> </span><span class="s1">'#editpage-specialchars'</span><span class="w"> </span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="w"> </span><span class="s1">'display'</span><span class="p">,</span><span class="w"> </span><span class="s1">'none'</span><span class="w"> </span><span class="p">);</span> </pre></div> <p>Or you can do it by placing code in <a href="/wiki/Special:MyPage/common.css" title="Special:MyPage/common.css">common.css</a>: </p> <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span></span><span class="p">#</span><span class="nn">editpage-specialchars</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">display</span><span class="p">:</span><span class="kc">none</span><span class="p">;</span> <span class="p">}</span> </pre></div> <div class="mw-heading mw-heading3"><h3 id="Adding_menus" data-mw-thread-id="h-Adding_menus-Basic_techniques"><span data-mw-comment-start="" id="h-Adding_menus-Basic_techniques"></span>Adding menus<span data-mw-comment-end="h-Adding_menus-Basic_techniques"></span></h3><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=27" title="Edit section: Adding menus" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <p>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. </p> <div class="mw-highlight mw-highlight-lang-js mw-content-ltr" dir="ltr"><pre><span></span><span class="nx">mw</span><span class="p">.</span><span class="nx">util</span><span class="p">.</span><span class="nx">addPortlet</span><span class="p">(</span><span class="s1">'p-twinkle'</span><span class="p">,</span><span class="w"> </span><span class="s1">'TW'</span><span class="p">,</span><span class="w"> </span><span class="s1">'#p-cactions'</span><span class="p">);</span> <span class="nx">mw</span><span class="p">.</span><span class="nx">util</span><span class="p">.</span><span class="nx">addPortletLink</span><span class="p">(</span><span class="s1">'p-twinkle'</span><span class="p">,</span><span class="w"> </span><span class="s1">'#'</span><span class="p">,</span><span class="w"> </span><span class="s1">'Tag'</span><span class="p">);</span> <span class="nx">mw</span><span class="p">.</span><span class="nx">util</span><span class="p">.</span><span class="nx">addPortletLink</span><span class="p">(</span><span class="s1">'p-twinkle'</span><span class="p">,</span><span class="w"> </span><span class="s1">'#'</span><span class="p">,</span><span class="w"> </span><span class="s1">'CSD'</span><span class="p">);</span> </pre></div> <div class="mw-heading mw-heading3"><h3 id="Editing" data-mw-thread-id="h-Editing-Basic_techniques"><span data-mw-comment-start="" id="h-Editing-Basic_techniques"></span>Editing<span data-mw-comment-end="h-Editing-Basic_techniques"></span></h3><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=28" title="Edit section: Editing" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <div class="mw-heading mw-heading4"><h4 id="Textarea_with_article_wikicode" data-mw-thread-id="h-Textarea_with_article_wikicode-Editing"><span data-mw-comment-start="" id="h-Textarea_with_article_wikicode-Editing"></span>Textarea with article wikicode<span data-mw-comment-end="h-Textarea_with_article_wikicode-Editing"></span></h4><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=29" title="Edit section: Textarea with article wikicode" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <p>The most important element on the edit page is a <kbd>&lt;textarea&gt;</kbd> with the article text inside. You can reference it with </p> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="kd">var</span><span class="w"> </span><span class="nx">$textbox</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">$</span><span class="p">(</span><span class="w"> </span><span class="s1">'#wpTextbox1'</span><span class="w"> </span><span class="p">);</span> </pre></div> <p>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. </p> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="kd">var</span><span class="w"> </span><span class="nx">$textbox</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">$</span><span class="p">(</span><span class="w"> </span><span class="s1">'#wpTextbox1'</span><span class="w"> </span><span class="p">);</span> <span class="nx">$textbox</span><span class="p">.</span><span class="nx">textSelection</span><span class="p">(</span><span class="w"> </span><span class="s1">'setContents'</span><span class="p">,</span><span class="w"> </span><span class="s1">'This is bold!'</span><span class="w"> </span><span class="p">);</span> <span class="nx">$textbox</span><span class="p">.</span><span class="nx">textSelection</span><span class="p">(</span><span class="w"> </span><span class="s1">'setSelection'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">start</span><span class="o">:</span><span class="w"> </span><span class="mf">8</span><span class="p">,</span><span class="w"> </span><span class="nx">end</span><span class="o">:</span><span class="w"> </span><span class="mf">12</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="p">);</span> <span class="nx">$textbox</span><span class="p">.</span><span class="nx">textSelection</span><span class="p">(</span><span class="w"> </span><span class="s1">'encapsulateSelection'</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">pre</span><span class="o">:</span><span class="w"> </span><span class="s1">'&lt;b&gt;'</span><span class="p">,</span><span class="w"> </span><span class="nx">post</span><span class="o">:</span><span class="w"> </span><span class="s1">'&lt;/b&gt;'</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="p">);</span> <span class="c1">// Result: Textbox contains 'This is &lt;b&gt;bold&lt;/b&gt;!', with cursor before the '!'</span> </pre></div> <p>Or you can grab <code>&lt;textbox&gt;</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. </p> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="c1">// Get value.</span> <span class="kd">let</span><span class="w"> </span><span class="nx">value</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">$</span><span class="p">(</span><span class="s1">'#wpTextbox1'</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span> <span class="c1">// Your code goes here. Do things to value. RegEx, .replace(), concatenate, etc.</span> <span class="c1">// Then write it back.</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'#wpTextbox1'</span><span class="p">).</span><span class="nx">val</span><span class="p">(</span><span class="nx">value</span><span class="p">);</span> </pre></div> <div class="mw-heading mw-heading4"><h4 id="Editing_toolbar" data-mw-thread-id="h-Editing_toolbar-Editing"><span data-mw-comment-start="" id="h-Editing_toolbar-Editing"></span>Editing toolbar<span data-mw-comment-end="h-Editing_toolbar-Editing"></span></h4><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=30" title="Edit section: Editing toolbar" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <p>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>.<sup id="cite_ref-5" class="reference"><a href="#cite_note-5"><span class="cite-bracket">[</span>n. 2<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-6" class="reference"><a href="#cite_note-6"><span class="cite-bracket">[</span>n. 3<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading4"><h4 id="Edittools" data-mw-thread-id="h-Edittools-Editing"><span data-mw-comment-start="" id="h-Edittools-Editing"></span>Edittools<span data-mw-comment-end="h-Edittools-Editing"></span></h4><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=31" title="Edit section: Edittools" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <p>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>. </p> <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"><span data-mw-comment-start="" id="h-Doing_something_after_another_user_script-Basic_techniques"></span>Doing something after another user script<span data-mw-comment-end="h-Doing_something_after_another_user_script-Basic_techniques"></span></h3><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=32" title="Edit section: Doing something after another user script" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <p>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>. </p><p>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). </p><p>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. </p> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="nx">$</span><span class="p">(</span><span class="s1">'body'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'DOMNodeInserted'</span><span class="p">,</span><span class="w"> </span><span class="s1">'.preferences-link.link'</span><span class="p">,</span><span class="w"> </span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="c1">// do things</span> <span class="p">}</span> </pre></div> <div class="mw-heading mw-heading3"><h3 id="User_settings" data-mw-thread-id="h-User_settings-Basic_techniques"><span data-mw-comment-start="" id="h-User_settings-Basic_techniques"></span>User settings<span data-mw-comment-end="h-User_settings-Basic_techniques"></span></h3><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=33" title="Edit section: User settings" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <p>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>. </p><p>Notice that "scriptName" is one of the pieces of the variable name. This is important to help make sure the variable is unique. </p><p>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. </p><p>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. </p> </section><div class="mw-heading mw-heading2 ext-discussiontools-init-section section-heading" onclick="mfTempOpenSection(9)"><span class="indicator mf-icon mf-icon-expand mf-icon--small"></span><h2 id="Preventing_bugs" data-mw-thread-id="h-Preventing_bugs"><span data-mw-comment-start="" id="h-Preventing_bugs"></span>Preventing bugs<span data-mw-comment-end="h-Preventing_bugs"></span></h2><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=34" title="Edit section: Preventing bugs" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> <!--__DTELLIPSISBUTTON__{"threadItem":{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Preventing_bugs","replies":["h-&lt;nowiki&gt;_tags-Preventing_bugs","h-Function_scope-Preventing_bugs"]}}--></div><section class="mf-section-9 collapsible-block" id="mf-section-9"> <div class="mw-heading mw-heading3"><h3 id="&lt;nowiki&gt;_tags" data-mw-thread-id="h-&lt;nowiki&gt;_tags-Preventing_bugs"><span id=".3Cnowiki.3E_tags"></span><span data-mw-comment-start="" id="h-&lt;nowiki&gt;_tags-Preventing_bugs"></span>&lt;nowiki&gt; tags<span data-mw-comment-end="h-&lt;nowiki&gt;_tags-Preventing_bugs"></span></h3><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=35" title="Edit section: &lt;nowiki&gt; tags" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <p>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. </p> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="c1">//&lt;nowiki&gt;</span> <span class="nx">Your</span><span class="w"> </span><span class="nx">code</span><span class="w"> </span><span class="nx">here</span><span class="p">.</span> <span class="c1">//&lt;/nowiki&gt;</span> </pre></div> <div class="mw-heading mw-heading3"><h3 id="Function_scope" data-mw-thread-id="h-Function_scope-Preventing_bugs"><span data-mw-comment-start="" id="h-Function_scope-Preventing_bugs"></span>Function scope<span data-mw-comment-end="h-Function_scope-Preventing_bugs"></span></h3><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=36" title="Edit section: Function scope" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <p>Don't declare named functions in the global namespace. For example, this is bad: </p> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="kd">function</span><span class="w"> </span><span class="nx">submitEdit</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="cm">/* do stuff */</span><span class="p">}</span> <span class="nx">$</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span><span class="cm">/* main code here */</span><span class="p">});</span> </pre></div> <p>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>. </p> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="nx">$</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span> <span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="nx">submitEdit</span><span class="p">()</span><span class="w"> </span><span class="p">{</span><span class="cm">/* do stuff */</span><span class="p">}</span> <span class="w"> </span> <span class="w"> </span><span class="cm">/* main code here */</span> <span class="p">});</span> </pre></div> </section><div class="mw-heading mw-heading2 ext-discussiontools-init-section section-heading" onclick="mfTempOpenSection(10)"><span class="indicator mf-icon mf-icon-expand mf-icon--small"></span><h2 id="Ajax" data-mw-thread-id="h-Ajax"><span data-mw-comment-start="" id="h-Ajax"></span>Ajax<span data-mw-comment-end="h-Ajax"></span></h2><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=37" title="Edit section: Ajax" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> <!--__DTELLIPSISBUTTON__{"threadItem":{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Ajax","replies":["h-Common_problems-Ajax","h-Basic_examples-Ajax"]}}--></div><section class="mf-section-10 collapsible-block" id="mf-section-10"> <p><a href="/wiki/Ajax_(programming)" title="Ajax (programming)">AJAX</a> (<i>asynchronous JavaScript and XML</i>) is a popular name for a web programming technique that queries the server or fetches content without reloading the entire page. </p><p>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. </p> <div class="mw-heading mw-heading3"><h3 id="Common_problems" data-mw-thread-id="h-Common_problems-Ajax"><span data-mw-comment-start="" id="h-Common_problems-Ajax"></span>Common problems<span data-mw-comment-end="h-Common_problems-Ajax"></span></h3><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=38" title="Edit section: Common problems" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <ul><li><p>AJAX programmers commonly run into problems if they don't account for AJAX's <i>asynchronicity</i>. If you try to pop up a box with another page's content, you will almost certainly pop up a box containing <code><b>null</b></code>. This occurs because the script continued even though the query wasn't finished.</p><p>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.</p></li> <li>AJAX scripts cannot reach a page on a different server (for example, <i>google.ca</i> or <i>en.wikisource.org</i> from <i>en.wikipedia.org</i>). 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"><span data-mw-comment-start="" id="h-Basic_examples-Ajax"></span>Basic examples<span data-mw-comment-end="h-Basic_examples-Ajax"></span></h3><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=39" title="Edit section: Basic examples" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <p>MediaWiki provides some modules with helper functions which facilitate the use of its API. The main modules available are </p> <ul><li><a class="external text" href="https://doc.wikimedia.org/mediawiki-core/master/js/mw.Api.html">mediawiki.api</a></li></ul> <p>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>. </p><p>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. </p><p>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>. </p> <div class="mw-heading mw-heading4"><h4 id="Fetch_page_content" data-mw-thread-id="h-Fetch_page_content-Basic_examples"><span data-mw-comment-start="" id="h-Fetch_page_content-Basic_examples"></span>Fetch page content<span data-mw-comment-end="h-Fetch_page_content-Basic_examples"></span></h4><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=40" title="Edit section: Fetch page content" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <p>Fetching a page content can be done using <a href="/wiki/GET_(HTTP)" class="mw-redirect" title="GET (HTTP)">GET</a>. </p> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="nx">$</span><span class="p">.</span><span class="nx">ajax</span><span class="p">({</span> <span class="w"> </span><span class="nx">url</span><span class="o">:</span><span class="w"> </span><span class="nx">mw</span><span class="p">.</span><span class="nx">util</span><span class="p">.</span><span class="nx">getUrl</span><span class="p">(</span><span class="w"> </span><span class="s1">'Wikipedia:Sandbox'</span><span class="w"> </span><span class="p">)</span> <span class="p">})</span> <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="w"> </span><span class="nx">data</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">alert</span><span class="p">(</span><span class="w"> </span><span class="s1">'The remote page contains:\n'</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">data</span><span class="w"> </span><span class="p">);</span> <span class="p">})</span> <span class="p">.</span><span class="k">catch</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">alert</span><span class="p">(</span><span class="w"> </span><span class="s1">'The ajax request failed.'</span><span class="w"> </span><span class="p">);</span> <span class="p">});</span> </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"><span data-mw-comment-start="" id="h-Get_the_wikitext_of_a_page-Basic_examples"></span>Get the wikitext of a page<span data-mw-comment-end="h-Get_the_wikitext_of_a_page-Basic_examples"></span></h4><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=41" title="Edit section: Get the wikitext of a page" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </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"><span data-mw-comment-start="" id="h-Using_module_mediawiki.api-Get_the_wikitext_of_a_page"></span>Using module <code>mediawiki.api</code><span data-mw-comment-end="h-Using_module_mediawiki.api-Get_the_wikitext_of_a_page"></span></h5><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=42" title="Edit section: Using module mediawiki.api" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <p>Note: make sure to add <code>mediawiki.api</code> to your dependencies! </p> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="kd">function</span><span class="w"> </span><span class="nx">doSomethingWithText</span><span class="p">(</span><span class="w"> </span><span class="nx">wikitext</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="cm">/* .. */</span> <span class="w"> </span><span class="nx">alert</span><span class="p">(</span><span class="w"> </span><span class="s1">'The wikitext of the page is:\n\n'</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">wikitext</span><span class="w"> </span><span class="p">);</span> <span class="p">}</span> <span class="kd">function</span><span class="w"> </span><span class="nx">doSomethingInCaseOfError</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="cm">/* .. */</span> <span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="w"> </span><span class="s1">'err'</span><span class="w"> </span><span class="p">);</span> <span class="p">}</span> <span class="p">(</span><span class="ow">new</span><span class="w"> </span><span class="nx">mw</span><span class="p">.</span><span class="nx">Api</span><span class="p">()).</span><span class="nx">get</span><span class="p">(</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">prop</span><span class="o">:</span><span class="w"> </span><span class="s1">'revisions'</span><span class="p">,</span> <span class="w"> </span><span class="nx">rvprop</span><span class="o">:</span><span class="w"> </span><span class="s1">'content'</span><span class="p">,</span> <span class="w"> </span><span class="nx">rvlimit</span><span class="o">:</span><span class="w"> </span><span class="mf">1</span><span class="p">,</span> <span class="w"> </span><span class="nx">indexpageids</span><span class="o">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span> <span class="w"> </span><span class="nx">titles</span><span class="o">:</span><span class="w"> </span><span class="s1">'Wikipedia:Sandbox'</span> <span class="p">}</span><span class="w"> </span><span class="p">)</span> <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">(</span><span class="w"> </span><span class="nx">data</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">q</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">data</span><span class="p">.</span><span class="nx">query</span><span class="p">,</span> <span class="w"> </span><span class="nx">id</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">q</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nx">q</span><span class="p">.</span><span class="nx">pageids</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nx">q</span><span class="p">.</span><span class="nx">pageids</span><span class="p">[</span><span class="mf">0</span><span class="p">],</span> <span class="w"> </span><span class="nx">pg</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">id</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nx">q</span><span class="p">.</span><span class="nx">pages</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nx">q</span><span class="p">.</span><span class="nx">pages</span><span class="p">[</span><span class="w"> </span><span class="nx">id</span><span class="w"> </span><span class="p">],</span> <span class="w"> </span><span class="nx">rv</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">pg</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nx">pg</span><span class="p">.</span><span class="nx">revisions</span><span class="p">;</span> <span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="w"> </span><span class="nx">rv</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nx">rv</span><span class="p">[</span><span class="mf">0</span><span class="p">]</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nx">rv</span><span class="p">[</span><span class="mf">0</span><span class="p">][</span><span class="s1">'*'</span><span class="p">]</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">doSomethingWithText</span><span class="p">(</span><span class="w"> </span><span class="nx">rv</span><span class="p">[</span><span class="mf">0</span><span class="p">][</span><span class="s1">'*'</span><span class="p">]</span><span class="w"> </span><span class="p">);</span> <span class="w"> </span><span class="p">}</span> <span class="p">}</span><span class="w"> </span><span class="p">)</span> <span class="p">.</span><span class="k">catch</span><span class="p">(</span><span class="w"> </span><span class="nx">doSomethingInCaseOfError</span><span class="w"> </span><span class="p">);</span> </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"><span data-mw-comment-start="" id="h-Using_plain_jQuery-Get_the_wikitext_of_a_page"></span>Using plain jQuery<span data-mw-comment-end="h-Using_plain_jQuery-Get_the_wikitext_of_a_page"></span></h5><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=43" title="Edit section: Using plain jQuery" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="nx">$</span><span class="p">.</span><span class="nx">getJSON</span><span class="p">(</span> <span class="w"> </span><span class="nx">mw</span><span class="p">.</span><span class="nx">util</span><span class="p">.</span><span class="nx">wikiScript</span><span class="p">(</span><span class="s1">'api'</span><span class="p">),</span> <span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">format</span><span class="o">:</span><span class="w"> </span><span class="s1">'json'</span><span class="p">,</span> <span class="w"> </span><span class="nx">action</span><span class="o">:</span><span class="w"> </span><span class="s1">'query'</span><span class="p">,</span> <span class="w"> </span><span class="nx">prop</span><span class="o">:</span><span class="w"> </span><span class="s1">'revisions'</span><span class="p">,</span> <span class="w"> </span><span class="nx">rvprop</span><span class="o">:</span><span class="w"> </span><span class="s1">'content'</span><span class="p">,</span> <span class="w"> </span><span class="nx">rvlimit</span><span class="o">:</span><span class="w"> </span><span class="mf">1</span><span class="p">,</span> <span class="w"> </span><span class="nx">titles</span><span class="o">:</span><span class="w"> </span><span class="s1">'Wikipedia:Sandbox'</span> <span class="w"> </span><span class="p">}</span> <span class="p">)</span> <span class="w"> </span><span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="w"> </span><span class="p">(</span><span class="w"> </span><span class="nx">data</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">page</span><span class="p">,</span><span class="w"> </span><span class="nx">wikitext</span><span class="p">;</span> <span class="w"> </span><span class="k">try</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="w"> </span><span class="nx">page</span><span class="w"> </span><span class="ow">in</span><span class="w"> </span><span class="nx">data</span><span class="p">.</span><span class="nx">query</span><span class="p">.</span><span class="nx">pages</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">wikitext</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">data</span><span class="p">.</span><span class="nx">query</span><span class="p">.</span><span class="nx">pages</span><span class="p">[</span><span class="nx">page</span><span class="p">].</span><span class="nx">revisions</span><span class="p">[</span><span class="mf">0</span><span class="p">][</span><span class="s1">'*'</span><span class="p">];</span> <span class="w"> </span><span class="nx">doSomethingWithText</span><span class="p">(</span><span class="w"> </span><span class="nx">wikitext</span><span class="w"> </span><span class="p">);</span> <span class="w"> </span><span class="p">}</span> <span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">catch</span><span class="w"> </span><span class="p">(</span><span class="w"> </span><span class="nx">e</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">doSomethingInCaseOfError</span><span class="p">();</span> <span class="w"> </span><span class="p">}</span> <span class="w"> </span><span class="p">})</span> <span class="w"> </span><span class="p">.</span><span class="k">catch</span><span class="p">(</span><span class="w"> </span><span class="nx">doSomethingInCaseOfError</span><span class="w"> </span><span class="p">);</span> </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"><span data-mw-comment-start="" id="h-Edit_a_page_and_other_common_actions-Basic_examples"></span>Edit a page and other common actions<span data-mw-comment-end="h-Edit_a_page_and_other_common_actions-Basic_examples"></span></h4><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=44" title="Edit section: Edit a page and other common actions" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <p>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.) </p><p>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>. </p> <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"><span data-mw-comment-start="" id="h-Using_module_mediawiki.api_2-Edit_a_page_and_other_common_actions"></span>Using module <code>mediawiki.api</code><span data-mw-comment-end="h-Using_module_mediawiki.api_2-Edit_a_page_and_other_common_actions"></span></h5><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=45" title="Edit section: Using module mediawiki.api" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <p>Note: make sure to add <code>mediawiki.api</code> to your dependencies! </p> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="c1">// Edit page via the mw.Api module.</span> <span class="c1">// postWithEditToken( {} ) may be used instead of postWithToken("csrf", {} )</span> <span class="c1">// for actions such as editing that require a CSRF token.</span> <span class="c1">// The line "text: info.text," will cause the call </span> <span class="c1">// to replace entire page content with supplied data.</span> <span class="c1">// alternatively, one can append or prepend the data to the page, by using</span> <span class="c1">// "appendtext: info.text," or "prependtext: info.text," instead.</span> <span class="c1">// when using "appendtext", it is possible to append the text to a specific section,</span> <span class="c1">// by setting the optional field "section".</span> <span class="kd">function</span><span class="w"> </span><span class="nx">editPage</span><span class="p">(</span><span class="w"> </span><span class="nx">info</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">api</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">mw</span><span class="p">.</span><span class="nx">Api</span><span class="p">();</span> <span class="w"> </span><span class="nx">api</span><span class="p">.</span><span class="nx">postWithToken</span><span class="p">(</span><span class="s2">"csrf"</span><span class="p">,</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">action</span><span class="o">:</span><span class="w"> </span><span class="s1">'edit'</span><span class="p">,</span> <span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="nx">info</span><span class="p">.</span><span class="nx">title</span><span class="p">,</span> <span class="w"> </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="nx">info</span><span class="p">.</span><span class="nx">text</span><span class="p">,</span><span class="w"> </span><span class="c1">// will replace entire page content</span> <span class="w"> </span><span class="nx">summary</span><span class="o">:</span><span class="w"> </span><span class="nx">info</span><span class="p">.</span><span class="nx">summary</span> <span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="p">).</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="w"> </span><span class="nx">data</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">alert</span><span class="p">(</span><span class="w"> </span><span class="s1">'Page edited!'</span><span class="w"> </span><span class="p">);</span> <span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="p">).</span><span class="nx">fail</span><span class="p">(</span><span class="w"> </span><span class="kd">function</span><span class="p">(</span><span class="nx">code</span><span class="p">,</span><span class="w"> </span><span class="nx">data</span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="w"> </span><span class="nx">api</span><span class="p">.</span><span class="nx">getErrorMessage</span><span class="p">(</span><span class="w"> </span><span class="nx">data</span><span class="w"> </span><span class="p">).</span><span class="nx">text</span><span class="p">());</span> <span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="p">);</span> <span class="p">}</span> <span class="nx">editPage</span><span class="p">({</span> <span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s1">'User:'</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">mw</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="w"> </span><span class="s1">'wgUserName'</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="s1">'/Sandbox'</span><span class="p">,</span> <span class="w"> </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="s1">'Cool! It works! :-) ~~'</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="s1">'~~'</span><span class="p">,</span> <span class="w"> </span><span class="nx">summary</span><span class="o">:</span><span class="w"> </span><span class="s1">'Trying to edit my sandbox [[Project:User scripts/Guide|using API]]...'</span> <span class="p">});</span> </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"><span data-mw-comment-start="" id="h-Using_plain_jQuery_2-Edit_a_page_and_other_common_actions"></span>Using plain jQuery<span data-mw-comment-end="h-Using_plain_jQuery_2-Edit_a_page_and_other_common_actions"></span></h5><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=46" title="Edit section: Using plain jQuery" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="c1">// Edit page (must be done through POST)</span> <span class="c1">// the line "text: info.text," will cause the call </span> <span class="c1">// to replace entire page content with supplied data.</span> <span class="c1">// alternatively, one can append or prepend the data to the page, by using</span> <span class="c1">// "appendtext: info.text," or "prependtext: info.text," instead.</span> <span class="c1">// when using "appendtext", it is possible to append the text to a specific section,</span> <span class="c1">// by setting the optional field "section".</span> <span class="kd">function</span><span class="w"> </span><span class="nx">editPage</span><span class="p">(</span><span class="w"> </span><span class="nx">info</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">$</span><span class="p">.</span><span class="nx">ajax</span><span class="p">({</span> <span class="w"> </span><span class="nx">url</span><span class="o">:</span><span class="w"> </span><span class="nx">mw</span><span class="p">.</span><span class="nx">util</span><span class="p">.</span><span class="nx">wikiScript</span><span class="p">(</span><span class="w"> </span><span class="s1">'api'</span><span class="w"> </span><span class="p">),</span> <span class="w"> </span><span class="nx">type</span><span class="o">:</span><span class="w"> </span><span class="s1">'POST'</span><span class="p">,</span> <span class="w"> </span><span class="nx">dataType</span><span class="o">:</span><span class="w"> </span><span class="s1">'json'</span><span class="p">,</span> <span class="w"> </span><span class="nx">data</span><span class="o">:</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">format</span><span class="o">:</span><span class="w"> </span><span class="s1">'json'</span><span class="p">,</span> <span class="w"> </span><span class="nx">action</span><span class="o">:</span><span class="w"> </span><span class="s1">'edit'</span><span class="p">,</span> <span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="nx">info</span><span class="p">.</span><span class="nx">title</span><span class="p">,</span> <span class="w"> </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="nx">info</span><span class="p">.</span><span class="nx">text</span><span class="p">,</span><span class="w"> </span><span class="c1">// will replace entire page content</span> <span class="w"> </span><span class="nx">summary</span><span class="o">:</span><span class="w"> </span><span class="nx">info</span><span class="p">.</span><span class="nx">summary</span><span class="p">,</span> <span class="w"> </span><span class="nx">token</span><span class="o">:</span><span class="w"> </span><span class="nx">mw</span><span class="p">.</span><span class="nx">user</span><span class="p">.</span><span class="nx">tokens</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="w"> </span><span class="s1">'csrfToken'</span><span class="w"> </span><span class="p">)</span> <span class="w"> </span><span class="p">}</span> <span class="w"> </span><span class="p">})</span> <span class="w"> </span><span class="p">.</span><span class="nx">then</span><span class="w"> </span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="w"> </span><span class="nx">data</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="w"> </span><span class="nx">data</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nx">data</span><span class="p">.</span><span class="nx">edit</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nx">data</span><span class="p">.</span><span class="nx">edit</span><span class="p">.</span><span class="nx">result</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nx">data</span><span class="p">.</span><span class="nx">edit</span><span class="p">.</span><span class="nx">result</span><span class="w"> </span><span class="o">==</span><span class="w"> </span><span class="s1">'Success'</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">alert</span><span class="p">(</span><span class="w"> </span><span class="s1">'Page edited!'</span><span class="w"> </span><span class="p">);</span> <span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">alert</span><span class="p">(</span><span class="w"> </span><span class="s1">'The edit query returned an error. =('</span><span class="w"> </span><span class="p">);</span> <span class="w"> </span><span class="p">}</span> <span class="w"> </span><span class="p">})</span> <span class="w"> </span><span class="p">.</span><span class="k">catch</span><span class="w"> </span><span class="p">(</span><span class="w"> </span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">alert</span><span class="p">(</span><span class="w"> </span><span class="s1">'The ajax request failed.'</span><span class="w"> </span><span class="p">);</span> <span class="w"> </span><span class="p">});</span> <span class="p">}</span> <span class="nx">editPage</span><span class="p">({</span> <span class="w"> </span><span class="nx">title</span><span class="o">:</span><span class="w"> </span><span class="s1">'User:'</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">mw</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="w"> </span><span class="s1">'wgUserName'</span><span class="w"> </span><span class="p">)</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="s1">'/Sandbox'</span><span class="p">,</span> <span class="w"> </span><span class="nx">text</span><span class="o">:</span><span class="w"> </span><span class="s1">'Cool! It works! :-) ~~'</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="s1">'~~'</span><span class="p">,</span> <span class="w"> </span><span class="nx">summary</span><span class="o">:</span><span class="w"> </span><span class="s1">'Trying to edit my sandbox [[Project:User scripts/Guide/Ajax|using AJAX]]...'</span> <span class="p">});</span> </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"><span data-mw-comment-start="" id="h-Load_JavaScript_from_Wiki_page-Basic_examples"></span>Load JavaScript from Wiki page<span data-mw-comment-end="h-Load_JavaScript_from_Wiki_page-Basic_examples"></span></h4><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=47" title="Edit section: Load JavaScript from Wiki page" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <p>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. </p> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="kd">let</span><span class="w"> </span><span class="nx">title</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"User:YourName/YourScript.js"</span><span class="p">;</span> <span class="nx">mw</span><span class="p">.</span><span class="nx">loader</span><span class="p">.</span><span class="nx">load</span><span class="p">(</span><span class="w"> </span><span class="s2">"https://en.wikipedia.org/w/index.php?title="</span><span class="o">+</span><span class="nx">title</span><span class="o">+</span><span class="s2">"&amp;action=raw&amp;ctype=text/javascript"</span><span class="w"> </span><span class="p">);</span> </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"><span data-mw-comment-start="" id="h-Load_JSON_from_Wiki_page-Basic_examples"></span>Load JSON from Wiki page<span data-mw-comment-end="h-Load_JSON_from_Wiki_page-Basic_examples"></span></h4><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=48" title="Edit section: Load JSON from Wiki page" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <p>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. </p><p>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. </p> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="kd">let</span><span class="w"> </span><span class="nx">jsonData</span><span class="p">;</span> <span class="kd">let</span><span class="w"> </span><span class="nx">title</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"User:YourName/YourData.json"</span><span class="p">;</span> <span class="nx">$</span><span class="p">.</span><span class="nx">getJSON</span><span class="p">(</span><span class="nx">mw</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'wgScriptPath'</span><span class="p">)</span><span class="o">+</span><span class="s1">'/index.php?action=raw&amp;ctype=application/json&amp;title='</span><span class="o">+</span><span class="nx">title</span><span class="p">,</span><span class="w"> </span><span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">){</span> <span class="w"> </span><span class="nx">jsonData</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">data</span><span class="p">;</span> <span class="p">});</span> </pre></div> </section><div class="mw-heading mw-heading2 ext-discussiontools-init-section section-heading" onclick="mfTempOpenSection(11)"><span class="indicator mf-icon mf-icon-expand mf-icon--small"></span><h2 id="Working_with_CSS" data-mw-thread-id="h-Working_with_CSS"><span data-mw-comment-start="" id="h-Working_with_CSS"></span>Working with CSS<span data-mw-comment-end="h-Working_with_CSS"></span></h2><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=49" title="Edit section: Working with CSS" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> <!--__DTELLIPSISBUTTON__{"threadItem":{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Working_with_CSS","replies":["h-Publishing_a_CSS_file-Working_with_CSS"]}}--></div><section class="mf-section-11 collapsible-block" id="mf-section-11"> <p>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. </p><p>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>: </p> <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span></span><span class="p">@</span><span class="k">import</span><span class="w"> </span><span class="s2">"http://localhost/wikipediatest.css"</span><span class="p">;</span> </pre></div> <p><b>Note!</b> Such <code>@import</code> statements must come before any other declarations in your CSS. But there can be <code>/* comments */</code> above them. </p><p>An alternative way is to put this line in your Javascript file instead: </p> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="nx">mw</span><span class="p">.</span><span class="nx">loader</span><span class="p">.</span><span class="nx">load</span><span class="p">(</span><span class="w"> </span><span class="s1">'http://localhost/wikipediatest.css'</span><span class="p">,</span><span class="w"> </span><span class="s1">'text/css'</span><span class="w"> </span><span class="p">);</span> </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"><span data-mw-comment-start="" id="h-Publishing_a_CSS_file-Working_with_CSS"></span>Publishing a CSS file<span data-mw-comment-end="h-Publishing_a_CSS_file-Working_with_CSS"></span></h3><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=50" title="Edit section: Publishing a CSS file" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> </div> <p>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". </p> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="nx">importStylesheet</span><span class="p">(</span><span class="w"> </span><span class="s1">'User:Yourname/yourscript.css'</span><span class="w"> </span><span class="p">);</span> </pre></div> <p>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. </p><p>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: </p> <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span></span><span class="p">@</span><span class="k">import</span><span class="w"> </span><span class="s2">"/w/index.php?title=User:Yourname/yourscript.css&amp;action=raw&amp;ctype=text/css"</span><span class="p">;</span> </pre></div> </section><div class="mw-heading mw-heading2 ext-discussiontools-init-section section-heading" onclick="mfTempOpenSection(12)"><span class="indicator mf-icon mf-icon-expand mf-icon--small"></span><h2 id="See_also" data-mw-thread-id="h-See_also"><span data-mw-comment-start="" id="h-See_also"></span>See also<span data-mw-comment-end="h-See_also"></span></h2><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=51" title="Edit section: See also" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> <!--__DTELLIPSISBUTTON__{"threadItem":{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-See_also","replies":[]}}--></div><section class="mf-section-12 collapsible-block" id="mf-section-12"> <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> </section><div class="mw-heading mw-heading2 ext-discussiontools-init-section section-heading" onclick="mfTempOpenSection(13)"><span class="indicator mf-icon mf-icon-expand mf-icon--small"></span><h2 id="Notes" data-mw-thread-id="h-Notes"><span data-mw-comment-start="" id="h-Notes"></span>Notes<span data-mw-comment-end="h-Notes"></span></h2><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=52" title="Edit section: Notes" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> <!--__DTELLIPSISBUTTON__{"threadItem":{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Notes","replies":[]}}--></div><section class="mf-section-13 collapsible-block" id="mf-section-13"> <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"><span class="mw-cite-backlink">^ <a href="#cite_ref-contentmodel_1-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-contentmodel_1-1"><sup><i><b>b</b></i></sup></a></span> <span class="reference-text">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.</span> </li> <li id="cite_note-5"><span class="mw-cite-backlink"><b><a href="#cite_ref-5">^</a></b></span> <span class="reference-text">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.</span> </li> <li id="cite_note-6"><span class="mw-cite-backlink"><b><a href="#cite_ref-6">^</a></b></span> <span class="reference-text">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.</span> </li> </ol></div></div> </section><div class="mw-heading mw-heading2 ext-discussiontools-init-section section-heading" onclick="mfTempOpenSection(14)"><span class="indicator mf-icon mf-icon-expand mf-icon--small"></span><h2 id="References" data-mw-thread-id="h-References"><span data-mw-comment-start="" id="h-References"></span>References<span data-mw-comment-end="h-References"></span></h2><span class="mw-editsection"> <a role="button" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=edit&amp;section=53" title="Edit section: References" class="cdx-button cdx-button--size-large cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--icon-only cdx-button--weight-quiet "> <span class="minerva-icon minerva-icon--edit"></span> <span>edit</span> </a> </span> <!--__DTELLIPSISBUTTON__{"threadItem":{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-References","replies":[]}}--></div><section class="mf-section-14 collapsible-block" id="mf-section-14"> <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"><span class="mw-cite-backlink"><b><a href="#cite_ref-2">^</a></b></span> <span class="reference-text">This section originally written by <a href="/wiki/User:Raylu" title="User:Raylu">raylu</a> <sup><a href="/wiki/User:Raylu/monobook.js" title="User:Raylu/monobook.js">my monobook.js</a></sup> Thanks a ton to all the users who helped improve this tutorial!</span> </li> <li id="cite_note-3"><span class="mw-cite-backlink"><b><a href="#cite_ref-3">^</a></b></span> <span class="reference-text"><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></span> </li> <li id="cite_note-4"><span class="mw-cite-backlink"><b><a href="#cite_ref-4">^</a></b></span> <span class="reference-text"><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></span> </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&amp;action=edit&amp;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><span class="nowrap">{{</span><a href="/wiki/Template:Load_user_script" title="Template:Load user script">Load user script</a><span class="nowrap">}}</span></li> <li><span class="nowrap">{{</span><a href="/wiki/Template:Infobox_Wikipedia_user_script" title="Template:Infobox Wikipedia user script">Infobox Wikipedia user script</a><span class="nowrap">}}</span></li> <li><span class="nowrap">{{</span><a href="/wiki/Template:Userscript" title="Template:Userscript">userscript</a><span class="nowrap">}}</span></li> <li><span class="nowrap">{{</span><a href="/wiki/Template:User_script_table" title="Template:User script table">user script table</a><span class="nowrap">}}</span></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><span class="nowrap">{{</span><a href="/wiki/Template:User_script_developer" title="Template:User script developer">user script developer</a><span class="nowrap">}}</span></li> <li><span class="nowrap">{{</span><a href="/wiki/Template:User_script_developer2" title="Template:User script developer2">user script developer2</a><span class="nowrap">}}</span></li> <li><span class="nowrap">{{</span><a href="/wiki/Template:User_script_developer_upon_request" title="Template:User script developer upon request">User script developer upon request</a><span class="nowrap">}}</span></li> <li><span class="nowrap">{{</span><a href="/wiki/Template:User_scripts_created" title="Template:User scripts created">user scripts created</a><span class="nowrap">}}</span></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><b>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>.</b></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<br>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<br>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,<br>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<br><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><br>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: <b><a href="/wiki/Category:Wikipedia_how-to" title="Category:Wikipedia how-to">Category:Wikipedia how-to</a></b></li> <li><b><a href="/wiki/Category:Wikipedia_information_pages" title="Category:Wikipedia information pages">Category:Wikipedia information pages</a></b><br>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> <!-- NewPP limit report Parsed by mw‐api‐int.codfw.main‐746bf6896b‐dqkf2 Cached time: 20241119005205 Cache expiry: 2592000 Reduced expiry: false Complications: [vary‐revision‐sha1, show‐toc] DiscussionTools time usage: 0.127 seconds CPU time usage: 0.546 seconds Real time usage: 0.666 seconds Preprocessor visited node count: 1399/1000000 Post‐expand include size: 46974/2097152 bytes Template argument size: 1722/2097152 bytes Highest expansion depth: 8/100 Expensive parser function count: 49/500 Unstrip recursion depth: 0/20 Unstrip post‐expand size: 97520/5000000 bytes Lua time usage: 0.140/10.000 seconds Lua memory usage: 2488061/52428800 bytes Number of Wikibase entities loaded: 0/400 --> <!-- Transclusion expansion time report (%,ms,calls,template) 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 --> <!-- Saved in parser cache with key enwiki:pcache:idhash:10762503-0!canonical and timestamp 20241119005205 and revision id 1241694437. Rendering was triggered because: api-parse --> </section></div> <!-- MobileFormatter took 0.033 seconds --><!--esi <esi:include src="/esitest-fa8a495983347898/content" /> --><noscript><img src="https://login.m.wikimedia.org/wiki/Special:CentralAutoLogin/start?type=1x1&amp;mobile=1" 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&amp;oldid=1241694437">https://en.wikipedia.org/w/index.php?title=Wikipedia:User_scripts/Guide&amp;oldid=1241694437</a>"</div></div> </div> <div class="post-content" id="page-secondary-actions"> </div> </main> <footer class="mw-footer minerva-footer" role="contentinfo"> <a class="last-modified-bar" href="/w/index.php?title=Wikipedia:User_scripts/Guide&amp;action=history"> <div class="post-content last-modified-bar__content"> <span class="minerva-icon minerva-icon-size-medium minerva-icon--modified-history"></span> <span class="last-modified-bar__text modified-enhancement" data-user-name="Bugghost" data-user-gender="unknown" data-timestamp="1724345661"> <span>Last edited on 22 August 2024, at 16:54</span> </span> <span class="minerva-icon minerva-icon-size-small minerva-icon--expand"></span> </div> </a> <div class="post-content footer-content"> <div id="p-lang"> <h4>Languages</h4> <section> <ul id="p-variants" class="minerva-languages"></ul> <ul class="minerva-languages"><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"><span>עברית</span></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"><span>Nederlands</span></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"><span>Русский</span></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"><span>සිංහල</span></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"><span>中文</span></a></li></ul> </section> </div> <div class="minerva-footer-logo"><img src="/static/images/mobile/copyright/wikipedia-wordmark-en.svg" alt="Wikipedia" width="120" height="18" style="width: 7.5em; height: 1.125em;"/> </div> <ul id="footer-info" class="footer-info hlist hlist-separated"> <li id="footer-info-lastmod"> This page was last edited on 22 August 2024, at 16:54<span class="anonymous-show">&#160;(UTC)</span>.</li> <li id="footer-info-copyright">Content is available under <a class="external" rel="nofollow" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">CC BY-SA 4.0</a> unless otherwise noted.</li> </ul> <ul id="footer-places" class="footer-places hlist hlist-separated"> <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-terms-use"><a href="https://foundation.m.wikimedia.org/wiki/Special:MyLanguage/Policy:Terms_of_Use">Terms of Use</a></li> <li id="footer-places-desktop-toggle"><a id="mw-mf-display-toggle" href="//en.wikipedia.org/w/index.php?title=Wikipedia:User_scripts/Guide&amp;mobileaction=toggle_view_desktop" data-event-name="switch_to_desktop">Desktop</a></li> </ul> </div> </footer> </div> </div> <div class="mw-notification-area" data-mw="interface"></div> <!-- v:8.3.1 --> <script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgHostname":"mw-web.codfw.main-f69cdc8f6-ktpz4","wgBackendResponseTime":178,"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> <script>(window.NORLQ=window.NORLQ||[]).push(function(){var ns,i,p,img;ns=document.getElementsByTagName('noscript');for(i=0;i<ns.length;i++){p=ns[i].nextSibling;if(p&&p.className&&p.className.indexOf('lazy-image-placeholder')>-1){img=document.createElement('img');img.setAttribute('src',p.getAttribute('data-src'));img.setAttribute('width',p.getAttribute('data-width'));img.setAttribute('height',p.getAttribute('data-height'));img.setAttribute('alt',p.getAttribute('data-alt'));p.parentNode.replaceChild(img,p);}}});</script> </body> </html>

Pages: 1 2 3 4 5 6 7 8 9 10