Wikipedia talk:User scripts/Guide

Futher development

I'm thinking about moving this page to Meta, which seems like a better place. Any thoughts? Also, dividing the content into some subpages seems like a good idea at the moment, this should allow adding more information on some specific issues. —AlexSm 18:34, 22 September 2008 (UTC)

You mean as a "Help:" page? Yeah, that might be an idea. Although that is somewhat messy since then you have to separate out all the (English) Wikipedia specific things and keep the text site-neutral. Which makes the text harder to use for Wikipedia editors. If you do the move then first check that they don't already have a similar page on Meta. Remember to add the proper templates at the top and bottom so we can import it back as a "Help:" page here at Wikipedia with a "Wikipedia specific" section.

I suggest you keep this page here while you build the other page at Meta and let the Meta page mature a little before you perhaps make this page into a (soft) redirect to the local copy of the Meta page. (So we see the "Wikipedia specific" section.)

What things are you thinking of splitting out to separate subpages? I see it covers some different subjects. I would like to change the order of the sections, for instance move the "Editing and loading the user script" and "CSS files" sections above the "DHTML methods".

--David Göthberg (talk) 18:38, 23 September 2008 (UTC)

Okay, I'll probably do just that: start with a copy on Meta. Subpages will alow me to explain some things in greater details without making the whole page look intimidating.

The "DHTML methods" section is exactly what I wanted to get rid of, by moving most of its content to a subpage, cause it just looks like a bad attempt to teach some JavaScript and is not really related to the guide. So you can move it down or simply delete the irrelevant parts.

—AlexSm 19:00, 23 September 2008 (UTC)

Ah, I see. Yeah, the DHTML section is somewhat confusing. But some of the text in there is useful for beginners and I am anyway not knowledgeable enough in JavaScript to tinker with that section. So I'll just move it to the end of the page for now.

--David Göthberg (talk) 22:22, 23 September 2008 (UTC)

Moving elements

Today User:Zvn edited section "Removing elements". He changed this:

To move an element simply attach it in another place with appendChild() or insertBefore().

to this:

To move an element simply attach it in another place with appendChild() or insertBefore() and remove the original element with removeChild().

I am just a beginner javacoder, but I think that is wrong. There is no need to remove the item from the old position manually, that happens automatically when one has inserted it in a new position.

--David Göthberg (talk) 10:32, 8 December 2009 (UTC)

My bad; should have checked it first. Thanks for keeping an eye—I've undone this change.--Zvn (talk) 13:20, 8 December 2009 (UTC)

Technical Advice IRC meeting

We'd like to invite you to the weekly Technical Advice IRC meeting. The next one is tomorrow, Wednesday 3-4 pm UTC on #wikimedia-tech.

The Technical Advice IRC meeting is open for all volunteer developers, topics and questions. This can be anything from "how to get started" over "who would be the best contact for X" to specific questions on your project.

If you know already what you would like to discuss or ask, please add your topic to the page. -- Michael Schönitzer (WMDE) (talk) 12:34, 19 September 2017 (UTC)

"Edit a page and other common actions" out of date

Hi, the mentioned section is out of date, seems like

mw.user.tokens.get('editToken')

is depreciated: https://phabricator.wikimedia.org/T234576

I would appreciate an update to this page, it’s a very short/simple guide to getting started on using the API.–CennoxX (talk @ dewiki) 09:51, 8 November 2019 (UTC)

Loading stylesheet

In the section "Working with CSS", it says:

An alternative way is to put this line anywhere in your css instead:

mw.loader.load( 'http://localhost/wikipediatest.css', 'text/css' );

I assume this should actually be placed in a Javascript file that is being loaded and executed? isaacl (talk) 19:06, 5 May 2020 (UTC)

Editing and testing an existing gadget

There are many issues related to the gadget Twinkle in mlwiki and mlwikisource. What method can be adopted to edit and test this code without having an Interface admin and without affecting other users? I tried to edit with browser JS running option on Windows, but it didn't work as it showed mw.loader not found. So, are there any alternatives to edit and test the code? Adithyak1997 (talk) 16:09, 27 June 2020 (UTC)

User settings

Regarding this edit: I don't think it's a good idea to recommend setting any arbitrary property for the window object, as it is part of the Document Object Model and so there can be clashes with existing properties or ones introduced in future. isaacl (talk) 07:00, 10 February 2021 (UTC)

Isaacl, thanks for the feedback. I added that because I got stuck when trying to just declare the variable, so I looked at how other user scripts did it. WP:REPLYLINK and some others use window variables. However, if there is a better way of doing it that accomplishes the same thing, I am certainly open to suggestions. –Novem Linguae (talk) 08:04, 10 February 2021 (UTC)

In general, if you're going to declare a global, it should be named something that would never be used by anything else. Which is usually done by prefixing it with the name of the script. Nardog (talk) 08:16, 10 February 2021 (UTC)

If the concern is undeclared variable errors, then you can catch the error with a try-catch block, or check for the existence of a variable using typeof x === 'undefined'. This check won't distinguish between an undeclared or undefined variable, but for the purpose of user settings, it doesn't matter.

In line with Nardog's comment, typically I would suggest a uniquely named global to act as a encapsulating namespace, with specific values stored as properties in the global, so their existence can be verified with hasOwnProperty() or the in operator. isaacl (talk) 15:51, 10 February 2021 (UTC)

I forgot that in the context of a browser, global variables declared with var are properties of the window object... That being said, now that the let keyword has been long available, it's highly preferable to use let to define globals, keeping the window object clear of non-standard properties. isaacl (talk) 23:21, 10 February 2021 (UTC)

I don't think let works at all in common.js. Replacing your common.js with let test1 = true; results in VM5431:1 JavaScript parse error (scripts need to be valid ECMAScript 5): Parse error: Missing ; before statement in file 'User:Novem_Linguae/common.js' on line 1. I think this is what threw me off originally, causing me to give up and switch to window.foo = 'bar';. Now that I tested some more just now, var foo = 'bar'; in common.js works, and a try{}catch{} block in the child file also works, as long as you use var. While that try{}catch{} block works, I still like window.foo = 'bar';, because the try{}catch{} block is very verbose. –Novem Linguae (talk) 11:39, 11 February 2021 (UTC)

I see—the MediaWiki loader is parsing the script first and validating if it is valid ECMAScript 5. For a smoother transition to ECMAScript 6 one day, I'd still recommend declaring an explicit, uniquely-named global using var, storing individual settings as properties within it, and checking for its existence in code with something like this:

var MySuperScriptPrefs = typeof MySuperScriptPrefs !== 'undefined' ? MySuperScriptPrefs :
{
	// ... set default values ...
};

isaacl (talk) 17:43, 11 February 2021 (UTC)

The most famous solution is Logan?

Per the page:

"Some browsers allow you to automatically execute your JavaScript code on specific web pages. This way you don't even have to be logged in.

The most famous solution is Logan and equivalents for other browsers."

I have never heard of Logan. The most famous one I know is Greasemonkey and Tampermonkey. I googled "logan browser script" but could not find anything that looks related. Can someone add a link to this Logan to clarify what is meant here? Or if it is out-of-date, can I just remove it and maybe add Greasemonkey and Tampermonkey? Betty (talk) 09:52, 7 September 2021 (UTC)

Good points, I agree.  Done. I replaced Logan with Tampermonkey. –Novem Linguae (talk) 10:04, 7 September 2021 (UTC)

@Novem Linguae That was swift. :) BTW, I'm still a little curious about what Logan is... Betty (talk) 11:32, 7 September 2021 (UTC)

Ajax and cross-origin requests

Hi! The documentation says, in the Ajax section, that "AJAX scripts cannot reach a page on a different server (for example, google.ca or en.wikisource.org from en.wikipedia.org". I'm writing a user script that requires making a query to a tool hosted in Toolforge. I thought this would not be possible (given what the documentation says), but I found that `$.ajax` is being able to fetch resources from it, as long as other server includes the appropriate CORS Allow-Origin headers. Am I misinterpreting the documentation? Or has this changed lately? Thanks! Diegodlh (talk) 16:02, 12 April 2022 (UTC)

@Diegodlh: I'm not sure where I heard about this, but it seems that CORS has not affected us yet; currently it is in logging mode. Furthermore, all Wikimedia domains are allowed. Try going to Test Wikipedia, and you will see this red error appearing in your browser console:

NguoiDungKhongDinhDanh 16:26, 12 April 2022 (UTC)

Thanks, @NguoiDungKhongDinhDanh. I tried using the user script (which makes a request to toolforge.org) in Test Wikipedia and I'm getting a different error (although the request does succeed, as you say): `Content Security Policy: The page’s settings observed the loading of a resource at https://web2cit.toolforge.org/ (“default-src”). A CSP report is being sent.`. The warning does not appear if the user script sends a request to en.wikipedia.org, for example.

I wonder whether CSP will be enforced in the future (I hope *.toolforge.org is allowed as well). This may not be what the Ajax section of the User scripts guide is referring to, though: "AJAX scripts cannot reach a page on a different server (for example, google.ca or en.wikisource.org from en.wikipedia.org". I wonder whether it's safe to remove this from the docs. Diegodlh (talk) 18:43, 12 April 2022 (UTC)

@Diegodlh: Unfortunately, toolforge may not be allowed according to T304107#7787150 and T304151. For the time being, I think you can be bold and remove that sentence. NguoiDungKhongDinhDanh 07:14, 13 April 2022 (UTC)

Weird syntax

Is there a reason the code is written document.editform.wpTextbox1.value = "{" + "{wikify}}\n\n" + document.editform.wpTextbox1.value;? Why are the two left brackets separated? Dimpizzy (talk) 17:42, 20 January 2023 (UTC)

Probably to keep {{wikify}}'s content from getting substituted into the code, which can happen if you don't wrap your scripts in

//<nowiki>

scriptGoesHere();

//</nowiki>

–Novem Linguae (talk) 17:45, 20 January 2023 (UTC)

Ah ok, I just saw the sentence in the page after the code explaining why as well, and I came back here to delete this topic, but you were too quick! Dimpizzy (talk) 17:47, 20 January 2023 (UTC)

Hehe :) –Novem Linguae (talk) 20:24, 20 January 2023 (UTC)