Wikipedia:User scripts/Guide: Difference between revisions

Revision as of 17:00, 8 January 2025

Latest revision as of 20:01, 3 August 2025

(11 intermediate revisions by 8 users not shown)

Line 136:

</syntaxhighlight>

In some environmentenvironments, you need to write this likeas:<ref>https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content</ref>:

<syntaxhighlight lang="javascript" copy style="min-width:fit-content; max-width: 40%">

mw.loader.load( 'http://127.0.0.1/wikipediatest.js' );

Line 180:

** [[PhpStorm]] (not free, cross-platform, a free license for MediaWiki Developers is also available<ref>https://lists.wikimedia.org/pipermail/mediawiki-l/2010-June/034396.html</ref>)

* Linux

** [[Neovim]]/[[Emacs]]

** [[gedit]] (may come with Linux)

** [[Kate (text editor)|Kate]], (mayfor comeKDE-based with Linux)desktops

** [[GNOME Text Editor]], for [[GNOME]]

=== JavaScript Debuggers ===

Line 269 ⟶ 271:

We can find element <code>textarea</code>:

* Using its <code>id</code>: <syntaxhighlight lang="js" copy style="min-width:fit-content; max-width: 40%" inline>$( '#txtid' )</syntaxhighlight>

* In the array of all elements with the same <code>tag</code>: <syntaxhighlight lang="js" copy style="min-width:fit-content; max-width: 40%" inline>$( 'textarea' )</syntaxhighlight>

* Using an element next to it: <syntaxhighlight lang="js" copy style="min-width:fit-content; max-width: 40%" inline>$( '#neighbor' ).prev()</syntaxhighlight>

* As a child of its parent: <syntaxhighlight lang="js" copy style="min-width:fit-content; max-width: 40%" inline>$( '#frmid' ).children( 'form' )</syntaxhighlight>

* As a form element, using <code>name</code>: <syntaxhighlight lang="js" copy style="min-width:fit-content; max-width: 40%" inline>$( '#frmid [name="txtname"]' )</syntaxhighlight>

'' [http://jsfiddle.net/compwhizii/j2QRf/ This example on jsFiddle] ''

The [//api.jquery.com jQuery API reference] is an excellent source for documentation.

Line 401 ⟶ 403:

You can add menus using <code>mw.util.addPortlet()</code> (see [[wmdoc:mediawiki-core/master/js/module-mediawiki.util.html#.addPortlet|documentation]]). 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.

<syntaxhighlight lang="js" copy style="min-width:fit-content; max-width: 40%">mw.util.addPortlet('p-twinkle', 'TW', '#p-cactions');

mw.util.addPortletLink('p-twinkle', '#', 'Tag');

mw.util.addPortletLink('p-twinkle', '#', 'CSD');</syntaxhighlight>

Line 414 ⟶ 416:

</syntaxhighlight>

You can manipulate it using the [https://doc.wikimedia.org/mediawiki-core/master/js/jQueryPlugins.html#module-jquery.textSelection.html jquery.textSelection] ResourceLoader module.

<syntaxhighlight lang="javascript" copy style="min-width:fit-content; max-width: 40%">

var $textbox = $( '#wpTextbox1' );

Line 440 ⟶ 442:

==== Edittools ====

There is another edit panel under textarea. Usually it is generated from [[MediaWiki:Edittools]] by [[mw:Extension:CharInsert|Extension:CharInsert]] and consists of a lot of JavaScript links. In the English Wikipedia, this approach was replaced by [[MediaWiki:Gadget-charinsert.js]] and [[MediaWiki:Gadget-charinsert-core.js]].

==== Automatic and semi-automatic editing ====

You can automate the editing of a page using the following code template:

<syntaxhighlight lang="javascript" copy style="min-width:fit-content; max-width:40%;">

mw.loader.using("mediawiki.user", () => {

$.post( mw.config.get('wgScriptPath') + '/api.php', {

action: 'edit',

title: "[Page title]",

text: "[Text]",

summary: "[Edit summary]",

token: mw.user.tokens.get('csrfToken'), // This is the user token required to authorize the edit.

format: 'json'

}).then(function(r){

if (r.error) {

mw.notify(r.error.info, {type: 'error', title: 'Error while trying to edit'}); // Sends an error message if unable to edit the page.

}

});

});

</syntaxhighlight>

=== Doing something after another user script ===

Line 671 ⟶ 693:

=== Loading a localhost file ===

For local development only, 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 top of your [[Special:Mypage/common.css|/common.css]]:

<syntaxhighlight lang="css" style="min-width:fit-content; max-width: 40%">

@import "http://localhost/wikipediatest.css";

</syntaxhighlight>

'''Note!''' Such <code>@import</code> statements must come before any other declarations in your CSS., But there can be <code>/*except comments */</code> above them.

An alternative way is to put this line in your Javascript file[[Special:Mypage/common.js|/common.js]] instead:

<syntaxhighlight lang="javascript" copy style="min-width:fit-content; max-width: 40%">