Wikipedia:User scripts/Guide: Difference between revisions

Revision as of 22:17, 23 January 2025

Latest revision as of 20:01, 3 August 2025

(9 intermediate revisions by 6 users not shown)

Line 73:

</syntaxhighlight>

(We separate the two "{" brackets in the front of the wikify template so it does notdoesn't get expanded when we write this code on the wiki.)

Finally, we want to submit the form for the user. Luckily, JavaScript has a built-in function just for this named <code>submit()</code>. To submit our editing form, use <code>document.editform.submit()</code>. Your code should now look something like this:

Line 84:

</syntaxhighlight>

ThatAnd isthat's it.! Combine it all together and it should look like this:

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

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 151:

On Windows, you could also use for example [https://www.ritlabs.com/en/products/tinyweb/download.php TinyWeb], less than 100&nbsp;kbyte on disk and not requiring installation. Save and unzip <kbd>tinyweb.zip</kbd> for example into <kbd>c:\Program Files\Tinyweb</kbd>, create a shortcut to <kbd>tiny.exe</kbd>, and add an argument in shortcut properties — path to your folder with <kbd>wikipediatest.js</kbd> and any file <kbd>index.html</kbd> (required). Start TinyWeb with this shortcut; unload it with Task Manager.

Note that this method does notdoesn't work in [[Opera (web browser)|Opera]] 9.50 (and later) due to added security restrictions, see [http://www.opera.com/docs/changelogs/windows/950/ Opera 9.50 for Windows changelog]: "Local servers can use remote resources, but not vice versa". In [[Google Chrome|Chrome]], it may be necessary to [http://stackoverflow.com/a/25075349/6357045 enable SSL], otherwise the script will refuse to load.

=== Browser-specific ===

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 187 ⟶ 189:

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.)

* [[Firefox]] –- use Tools → JavaScript Console showing all JavaScript and CSS errors.

* [[Google Chrome|Chrome]] and [[Microsoft Edge|Edge]] –- use Tools → Developer Tools.

* [[Safari (web browser)|Safari]] –- 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.

* [[Opera browser|Opera]] –- use Tools → Advanced → Error Console showing all JavaScript and CSS errors.

== Basic techniques ==

Line 275 ⟶ 277:

* 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 309 ⟶ 311:

* Top

** <span style="color:green;">p-personal</span> –- The links at the top right of the page. "personal" stands for "personal tools".

** <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.

**<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.

**<span style="color:green;">p-cactions</span> –- The items in the "More" tab's dropdown menu. "cactions" stands for "content actions".

** <span style="color:red;">p-search</span> –- Adding things here will mess up the appearance of the search box. Not recommended.

* Left

** <span style="color:red;">p-logo</span> –- Adding things here will mess up the appearance of the logo. Not recommended.

** <span style="color:green;">p-navigation</span>

** <span style="color:green;">p-interaction</span> –- Has the title "Contribute".

** <span style="color:green;">p-tb</span> –- Has the title "Tools". TB stands for toolbox.

** <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.

**<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.

** <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.

==== Portlet structure ====

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 501 ⟶ 523:

==== Get the wikitext of a page ====

===== Using module <code>mediawiki.api</code>=====

Note: make sure to add <code>mediawiki.api</code> to your dependencies.!

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

function doSomethingWithText( wikitext ) {

Line 575 ⟶ 597:

The code below shows how to edit a page, but it can easily be adapted to other actions by reading the [{{SERVER}}/w/api.php API documentation].

===== Using module <code>mediawiki.api</code>=====

Note: make sure to add <code>mediawiki.api</code> to your dependencies.!

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

// Edit page via the mw.Api module.

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%">