Wikipedia:User scripts/Guide: Difference between revisions

Revision as of 00:26, 24 January 2025

Revision as of 21:25, 26 January 2025

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

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

* 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 501:

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

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.