Wikipedia:User scripts/Guide: Difference between revisions

Revision as of 12:32, 26 February 2010

Revision as of 03:00, 15 August 2010

Line 11:

* More than 30 project-, page- and user-specific variables at the top of the rendered HTML page.

* [{{SERVER}}/skins-1.5/common/wikibits.js wikibits.js]

* [[MediaWiki:Common.js]] (as [{{SERVER}}{{SCRIPTPATH}}/index.php?title=-&action=raw&smaxage=0&gen=js generated]), supported by local [[Wikipedia:Administrators|administrators]].

* The user's own [[Special:MyPage/monobookskin.js|/monobookvector.js]] (exact name depends on the [[Wikipedia:Skin|skin]] in the user's preferences).

== Userscript structure ==

The personal <tt>/monobookvector.js</tt> and the [[Wikipedia:Gadget|gadgets]] are included early in the generated [[HTML]] page. This means that in most cases we need to defer the script actions until the page is loaded. The most common way is to use a special function <code>addOnloadHook()</code> from wikibits.js.

<source lang="javascript">

Line 39:

== Editing and loading the user script ==

=== Previewing in /monobookvector.js ===

You can edit your script directly on your [[Special:MyPage/monobookskin.js|/monobookvector.js]] page, then click [Show preview] and the new code is executed right away on the preview page.

=== Saving in /monobookvector.js ===

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.

Line 61:

=== Load from a localhost web server ===

The best and most recommended way is to load a JavaScript file from your local web server. (See below for an easy way to install a web server.) Put this string in your [[Special:Mypage/monobookskin.js|/monobookvector.js]]:

<source lang="javascript">

Line 67:

</source>

Then run any [[web server]] on your computer and create the <tt>wikipediatest.js</tt> file in the appropriate folder. The code inside this file will be executed as if it was inside your <tt>/monobookvector.js</tt>.

You can edit your <tt>wikipediatest.js</tt> file with any text editor, perhaps with syntax highlighting and other convenient features, then 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 [[Wikipedia:Bypass your cache|bypass your browser cache]].)

Line 97:

=== Publishing your user script ===

Once you have finished the user script code you either need to paste it into your <tt>/monobookvector.js</tt> if it is only for personal use. Or if it is for use by others then you should upload it to for instance [[Special:Mypage/yourscript.js|User:Yourname/yourscript.js]]. Then other users can import it by putting this line in their <tt>/monobookvector.js</tt>.

<source lang="javascript">

Line 105:

== CSS files ==

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 <tt>/monobookvector.css</tt>, but that is slow and messy.

Instead you can load a CSS file from your local web server. (See previous section for an easy to install web server.) Put this line at the very top of your [[Special:Mypage/monobookskin.css|/monobookvector.css]]:

<source lang="css">

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

</source>

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

An alternative way is to put this line anywhere in your <tt>/monobookvector.js</tt> instead:

<source lang="javascript">

Line 121:

=== Publishing a CSS file ===

Once you have finished the CSS code you either need to paste it into your <tt>/monobookvector.css</tt> if it is only for personal use. Or if it is for use by others then you should upload it to for instance [[Special:Mypage/yourscript.css|User:Yourname/yourscript.css]]. Then other users can import it by putting this line in their <tt>/monobookvector.js</tt>. Note, that is in their ".js", not their ".css".

<source lang="javascript">

Line 129:

If the CSS should be used together with a user script written in JavaScript then you can make it easy for the users. Simply put the line above in the JavaScript code for your user script, then the users only need to "install" your JavaScript.

For completeness, in case someone wonders. Users can import your <tt>User:Yourname/yourscript.css</tt> from their <tt>/monobookvector.css</tt> 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:

<source lang="css">

@import "/w/index.php?title=User:Yourname/yourscript.css&action=raw&ctype=text/css";

Line 242:

<source lang="javascript">

//Example: add the link into «toolbox» portlet

addPortletLink ('p-tb', '/wiki/Special:MyPage/monobookvector.js', 'My monobookvector.js');

</source>

Line 260:

<source lang="javascript">

//Example: using innerHTML to create a new portlet

document.getElementById('p-participationtb').innerHTML +=

'</div>'+

'<div id=myp-"mything" class="portlet">'+

'<h5>mine</h5>'+

'<div class=pBody"body"><ul>'+

'<li><a href=\"/wiki/Special:MyPage/monobookvector.js\">My monobookvector.js</a></li>'+

'</ul></div>'+
</div>';

</source>

Line 284 ⟶ 285:

</source>

This is easier with [[Special:Mypage/monobookskin.css|your monobookvector.css]] though: <code style="white-space:nowrap">#editpage-copywarn { display:none; }</code>

== Edit page ==