View source for 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. —[[User:Alex Smotrov|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".
:--[[User:Davidgothberg|David Göthberg]] ([[User talk:Davidgothberg|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.
::
:: —[[User:Alex Smotrov|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.
:::--[[User:Davidgothberg|David Göthberg]] ([[User talk:Davidgothberg|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 <code>appendChild()</code> or <code>insertBefore()</code>.''
to this:
:''To move an element simply attach it in another place with <code>appendChild()</code> or <code>insertBefore()</code> and remove the original element with <code>removeChild()</code>.''
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.

--[[User:Davidgothberg|David Göthberg]] ([[User talk:Davidgothberg|talk]]) 10:32, 8 December 2009 (UTC)
:My bad; should have checked it first. Thanks for keeping an eye—I've undone this change.--[[User:Zvn|Zvn]] ([[User talk:Zvn|talk]])  13:20, 8 December 2009 (UTC)

== Technical Advice IRC meeting ==
We'd like to invite you to the weekly [[mw:Technical_Advice_IRC_Meeting|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 [[mw:Technical_Advice_IRC_Meeting|page]]. -- [[User:Michael Schönitzer (WMDE)|Michael Schönitzer (WMDE)]] ([[User talk: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 <syntaxhighlight lang="javascript">
mw.user.tokens.get('editToken')
</syntaxhighlight> 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.–[[User:CennoxX|CennoxX]] ([[:de:User talk: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? [[User:Isaacl|isaacl]] ([[User talk: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? [[User:Adithyak1997|Adithyak1997]] ([[User talk:Adithyak1997|talk]]) 16:09, 27 June 2020 (UTC)

== User settings ==

Regarding [//en.wikipedia.org/w/index.php?title=Wikipedia:User_scripts/Guide&diff=1005948259&oldid=1003059041 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. [[User:Isaacl|isaacl]] ([[User talk:Isaacl|talk]]) 07:00, 10 February 2021 (UTC)
:{{u|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. –[[User:Novem Linguae|<span style="color:limegreen">'''Novem Linguae'''</span>]] <small>([[User talk:Novem Linguae|talk]])</small> 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. [[User:Nardog|Nardog]] ([[User talk:Nardog|talk]]) 08:16, 10 February 2021 (UTC)
::If the concern is [//en.wikipedia.org/w/index.php?title=Wikipedia:User_scripts/Guide&diff=1005959567&oldid=1005951169 undeclared variable errors], then you can catch the error with a try-catch block, or check for the existence of a variable using <code><nowiki>typeof x === 'undefined'</nowiki></code>. 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 <code><nowiki>hasOwnProperty()</nowiki></code> or the <code>in</code> operator. [[User:Isaacl|isaacl]] ([[User talk:Isaacl|talk]]) 15:51, 10 February 2021 (UTC)
::I forgot that in the context of a browser, global variables declared with <code>var</code> are properties of the window object... That being said, now that the <code>let</code> keyword has been long available, it's highly preferable to use <code>let</code> to define globals, keeping the window object clear of non-standard properties. [[User:Isaacl|isaacl]] ([[User talk:Isaacl|talk]]) 23:21, 10 February 2021 (UTC)
:::I don't think <code>let</code> works at all in common.js. Replacing your common.js with <code>let test1 = true;</code> results in {{tq|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 <code>window.foo = 'bar';</code>. Now that I tested some more just now, <code>var foo = 'bar';</code> in common.js works, and a <code>try{}catch{}</code> block in the child file [https://en.wikipedia.org/wiki/User:Novem_Linguae/Scripts/VariableTest.js also works], as long as you use <code>var</code>. While that <code>try{}catch{}</code> block works, I still like <code>window.foo = 'bar';</code>, because the <code>try{}catch{}</code> block is [https://en.wikipedia.org/wiki/User:Novem_Linguae/Scripts/VariableTest.js very verbose]. –[[User:Novem Linguae|<span style="color:limegreen">'''Novem Linguae'''</span>]] <small>([[User talk:Novem Linguae|talk]])</small> 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 <code>var</code>, storing individual settings as properties within it, and checking for its existence in code with something like this:<syntaxhighlight lang="javascript">var MySuperScriptPrefs = typeof MySuperScriptPrefs !== 'undefined' ? MySuperScriptPrefs :
{
	// ... set default values ...
};</syntaxhighlight> [[User:Isaacl|isaacl]] ([[User talk: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? [[User:Betty|Betty]] ([[User talk:Betty|talk]]) 09:52, 7 September 2021 (UTC)
:Good points, I agree. {{done}}. I replaced Logan with Tampermonkey. –[[User:Novem Linguae|<span style="color:limegreen">'''Novem Linguae'''</span>]] <small>([[User talk:Novem Linguae|talk]])</small> 10:04, 7 September 2021 (UTC)
::@[[User:Novem Linguae|Novem Linguae]] That was swift. :) BTW, I'm still a little curious about what Logan is... [[User:Betty|Betty]] ([[User talk: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! [[User:Diegodlh|Diegodlh]] ([[User talk:Diegodlh|talk]]) 16:02, 12 April 2022 (UTC)
:{{ping|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 [[:testwiki:|Test Wikipedia]], and you will see this red error appearing in your browser console:
:{{small|{{error|1=[Report Only] Refused to load the script '[URL]' because it violates the following Content Security Policy directive: "script-src 'unsafe-eval' blob: 'self' meta.wikimedia.org *.wikimedia.org *.wikipedia.org *.wikinews.org *.wiktionary.org *.wikibooks.org *.wikiversity.org *.wikisource.org wikisource.org *.wikiquote.org *.wikidata.org *.wikivoyage.org *.mediawiki.org 'unsafe-inline'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.}}}}
:[[User:NguoiDungKhongDinhDanh|<span style="font-family:Monotype Corsiva;background-image:linear-gradient(90deg,red,yellow,cyan);color:transparent;background-clip:text;-webkit-background-clip:text">'''NguoiDungKhongDinhDanh'''</span>]] 16:26, 12 April 2022 (UTC)
::Thanks, @[[User:NguoiDungKhongDinhDanh|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 <nowiki>https://web2cit.toolforge.org/</nowiki> (“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. [[User:Diegodlh|Diegodlh]] ([[User talk:Diegodlh|talk]]) 18:43, 12 April 2022 (UTC)
:::{{ping|Diegodlh}} Unfortunately, toolforge may not be allowed according to {{phab|T304107#7787150}} and {{phab|T304151}}. For the time being, I think you can [[WP:BOLD|be bold]] and remove that sentence. [[User:NguoiDungKhongDinhDanh|<span style="font-family:Monotype Corsiva;background-image:linear-gradient(90deg,red,yellow,cyan);color:transparent;background-clip:text;-webkit-background-clip:text">'''NguoiDungKhongDinhDanh'''</span>]] 07:14, 13 April 2022 (UTC)

== Weird syntax ==

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

:Probably to keep {{t|wikify}}'s content from getting substituted into the code, which can happen if you don't wrap your scripts in
<syntaxhighlight lang="js">//<nowiki>

scriptGoesHere();

//</nowiki></syntaxhighlight>

:–[[User:Novem Linguae|<span style="color:limegreen">'''Novem Linguae'''</span>]] <small>([[User talk:Novem Linguae|talk]])</small> 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! [[User:Dimpizzy|Dimpizzy]] ([[User talk:Dimpizzy|talk]]) 17:47, 20 January 2023 (UTC)
:::Hehe :) –[[User:Novem Linguae|<span style="color:limegreen">'''Novem Linguae'''</span>]] <small>([[User talk:Novem Linguae|talk]])</small> 20:24, 20 January 2023 (UTC)