Küçük araç mutfağı
Küçük araç mutfağına hoş geldiniz. Bu, JavaScript'te küçük araçları ve kullanıcı komut dosyalarını nasıl yazabileceğiniz ve kullanabileceğinize ilişkin bir öğreticidir.
Kullanıcı betikleri ve küçük araçları nedir?
MediaWiki, herkesin yazılımın davranışını hemen değiştirmek için herkese açık JavaScript kodu yazmasına izin verir. Bu kod diğer kullanıcılarla paylaşılabilir. Bu kod viki sayfalarında bulunur.
- Bir kullanıcı betiği orijinal yazar (
User:
ad alanında saklanıyorsa) ve "edituserjs" kullanıcı hakkına sahip herkes (genellikle yalnızca arayüz hizmetlileri) tarafından düzenlenebilir. The code is usually hosted on a subpage of your user page. Examples include: XTools/ArticleInfo.js and m:User:Hoo man/useful links.js. User scripts are similar to the personal JavaScript pages such as Special:MyPage/common.js, but they allow single code chunks to be shared with other users. - Küçük aracı, arayüz yöneticisi tarafından MediaWiki:Gadgets-definition eklenerek "tanıtılan" bir kullanıcı betikdir. Giriş yapmış kullanıcılar küçük araçlar kullanıcı tercihlerinin "Küçük araçlar" sekmesinde etkinleştirebilir. Küçük araçlar arayüz yöneticileri tarafından oluşturulur ve yönetilir.
- Tamamlamak için: Ayrıca MediaWiki:Common.js altında yer alan siteJS var. Bu dosyadaki JavaScript herkesi etkiler ve hem oturum kapatmış hem de oturum açmış kullanıcılar için otomatik olarak yürütülür. Interface administrators can edit them. Read Manual:Interface/JavaScript for detailed information.
Kendi MediaWiki kopyanızı çalıştırıyorsanız, kullanıcı betiklerinin çalışabilmesi için $wgAllowUserJs
etkinleştirilmesi ve tek tek betiklerin küçük aracı durumuna yükseltilmesini mümkün kılmak için Gadgets uzantısının yüklenmesi gerekir.
Daha iyi bir geliştirme deneyimi için, vikinize CodeEditor uzantının yüklendiğinden emin olun.
Write your first user script
In this section, you create an example user script which calculates the estimated reading time of a wiki page.
- Ensure you are logged in.
- Visit Special:MyPage/common.js. This page holds your personal JavaScript that is loaded on every page view (except for Special:Preferences).
- Either create the page or edit the page if it already exists.
- Copy the following six lines and paste these lines into the page:
var numWords = $("#mw-content-text > div").text().split(" ").length; var headerWords = $("h1").text().split(" ").length; var totalWords = numWords + headerWords; var timeInMinutes = totalWords / 200; var header = $("h1").text(); $("h1").text(header + " (it will take you " + timeInMinutes + " minutes to read this page)");
- Click "Değişiklikleri yayımla".
- Go to any page. Look at the title.
This example user script is taken from ChickTech High School Kickoff 2017/Tasks . There are more examples for simple user scripts on that page.
A more complex user script example
ResourceLoader, MediaWiki Eylem API'sı, jQuery UI iletişim kutusu, jQuery AJAX ve jQuery olay bağlayıcısından mw.loader, mw.util, mw.html, mw.user kullanan MediaWiki:Tutorial-QuickRC.js bakın.
MediaWiki:Tutorial-QuickRC.js içeriğini kopyalayıp Special:MyPage/common.js içine yapıştırın.
Sonuç yukarıdakiyle aynı olmalıdır, ancak şimdi betiği değiştirebilir, onunla oynayabilir ve tamamen başka bir şeyle değiştirebilirsiniz.
Load an existing user script
In the previous section, you copied the content of a user script. In this section, you will load the existing script MediaWiki:Tutorial-QuickRC.js instead.
- Oturum açmış olduğunuzdan emin olun.
- Visit Special:MyPage/common.js. This page holds your personal JavaScript that is loaded on every page view (except for Special:Preferences).
- Either create the page or edit the page if it already exists.
- Copy the following text and paste it into the page:
mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Tutorial-QuickRC.js&action=raw&ctype=text/javascript');
- Click "Publish changes". You should now have a link in the "Tools" section called "Quick changelog".
- Click "Quick changelog". You get a pop-up window. It shows you a subset of the recent changes on this website.
Use a script on another Wikimedia wiki
Betiğini başka bir Wikimedia web sitesinde kullanmak istiyorsanız (örneğin, MediaWiki.org yerine Türkçe Vikipedi), yukarıdaki adımların aynısını uygularsınız: ResourceLoader'a kodunuzu yüklemesini söylersiniz. Türkçe Vikipedi'de common.js sayfanızı ziyaret edin ve aşağıdakileri ekleyin:
mw.loader.load("//www.mediawiki.org/w/index.php?title=MediaWiki:Tutorial-QuickRC.js&action=raw&ctype=text/javascript");
Önceki satırdaki MediaWiki:Tutorial-QuickRC.js
öğesini Kullanıcı:Adınız/Betiğiniz.js
değiştirerek, yukarıda oluşturduğunuz kullanıcı betiğini de yükleyebilirsiniz. (Adınız
ve Betiğiniz
göre değiştirin).
This first requires that you do not store the code of your user script in Special:MyPage/common.js itself but instead in a separate sub page of your user page.
This also helps to keep code in one single place, so you have to update code in only one place.
Kullanıcı betikleri ve küçük araçları geliştirme
This section lists resources which are either needed or helpful for non-simple user scripts.
ResourceLoader
Gadgets must use ResourceLoader. ResourceLoader , MediaWiki'nin kullanıcılara ve okuyuculara akıllıca JavaScript ve CSS varlıkları sağlayan temel bir özelliğidir. Küçük araçlar JavaScript'te kodlandığından, bir Küçük araçlar kodlayıcısı olarak ResourceLoader ile etkileşime girmeniz gerekir.
Küçük aracınız faydalı ResourceLoader modüllerini yüklemelidir.
- Modüller — Yeniden kullanabilmeniz için ResourceLoader'da bulunan JavaScript kitaplıklarının, jQuery eklentilerinin ve MediaWiki yardımcı programlarının listesi.
- See the jQuery documentation for information about using jQuery in MediaWiki
- Developing with ResourceLoader — A list of useful practices, like enabling the debug mode and help with debugging.
- Also see the ResourceLoader best practices.
OOUI
OOUI is a JavaScript library with user interface elements (for example pop-up windows) specifically for use in MediaWiki. The library Using OOUI in MediaWiki#Gadgets can be used in gadgets.
MediaWiki Action API
Within the context of a MediaWiki website the Action API can be accessed from JavaScript via the mw.Api JavaScript API. (mw.ForeignApi for allowed cross-site requests, e.g. between WMF wikis.) See API for more information.
?callback=?
" parametresini API URL'sine ekleyin (ör. Vikipedi'den Commons API'sına istekte bulunmak). Bu, JSONP kullanımını tetikler ve belirli kısıtlamalar uygulamasını zorunlu kılar.VisualEditor
See VisualEditor/Gadgets for a tutorial specifically for VisualEditor gadgets.
Debugging user scripts and gadgets
- Gadgets are usually compacted by the ResourceLoader, minimized and aggregated. Use the
debug=true
URI parameter (preceded by?
or&
, of course), to ask for the non-compacted version of the page and to load the "original source form" of your gadget. Also see Developing with ResourceLoader for more information. - Learn how to use the Developer Tools of your browser (for example how to disable the cache in your browser). See the corresponding documentation: Chrome/Chromium, Firefox, Internet Explorer, Opera, Safari.
- If an existing gadget has problems, you can also use the page Special:Gadgets to find the source code location of a gadget.
Privacy and external content
Kullanıcıların gizliliğine zarar verebilecek harici kaynaklar yüklememelisiniz. Wikimedia vikilerinde, aşağıdaki alan adları güvenli kabul edilir:
- *.wiktionary.org
- *.wikimedia.org
- *.wikibooks.org
- *.wikisource.org
- *.wikiversity.org
- *.wikinews.org
- *.wikiquote.org
- *.wikidata.org
- *.wikivoyage.org
- www.mediawiki.org
Running code on page load
The common task of running code as soon as the page is loaded has several pitfalls which even experienced editors fall into.
- First of all, when your code works with elements of the DOM, run it on page load. Otherwise, your code may run too early. The general way to do it is to use jQuery's
$()
function, which does the same as$(document).ready()
. - However, if your code works with the content part of the page (the
#mw-content-text
element), you should use the'wikipage.content'
hook instead. This way your code will successfully reprocess the page when it is updated asynchronously and the hook is fired again. There are plenty of tools which do so, ranging from edit preview to watchlist autoupdate. - Be sure to only work with the descendants of the
$content
element that your handler function takes and not the whole page. Otherwise, you may end up running the same code for the same elements many times. Note that the'wikipage.content'
hook may be fired really many times. - Be cautious about what comes in the
$content
argument of the handler function. You shouldn't assume it's the#mw-content-text
element. It can be a small portion of the page, e.g. when it is previewed.
Code that works with page content and avoids the aforementioned pitfalls may look like this:
mw.hook( 'wikipage.content' ).add( function ( $content ) {
const $target = $content.find( '.targetClass' );
if ( $target.length ) {
// Do things with $target
}
// Only perform some operations when it is #mw-content-text in the argument
if ( $content.is( '#mw-content-text' ) ) {
const $note = $( '<div>' )
.addClass( 'myScript-note' )
.text( 'MyScript has successfully processed the content!' );
$content.prepend( $note );
}
} );
If your code works with page content and adds event handlers to DOM elements, then, instead of hooking to 'wikipage.content'
and looking for elements to attach event listeners to when it is fired, you may attach one event listener to an element outside of the content area or the whole document
but filter events by a selector (see jQuery's documentation).
That is, instead of writing $content.find( '.targetClass' ).on( 'click', ... )
you can write $( document ).on( 'click', '.targetClass', ... )
.
Recording metrics
Some gadgets are serious business. When your gadget gets serious, you might want to instrument it for analytics purposes, for example to measure the click rate of specific UI elements added to a page by the gadget.
Miscellaneous
- Gadget code doesn't have to follow the JavaScript coding conventions for MediaWiki, but if you expect others to touch your code, it may be used as reference.
- If you're developing in an IDE like VS Code, you may use type definitions for MediaWiki, OOjs, OOUI, and jQuery for code completion and type checking.
Disadvantages and problems of gadgets
- Küçük araçlar topluluk üyeleri tarafından geliştirilir. As of today, there is no formal code review required for gadgets on Wikimedia sites (see phab:T71445). Please follow the best practices listed on this page.
- On Wikimedia sites, the process how to "promote" a user script to a gadget in the "Gadgets" tab of the user preferences is not always clear. You will have to find an interface administrator and might have to provide deployment instructions to them.
- Wikimedia lacks a systematic process for re-using, modifying and contributing to existing user scripts and gadgets.
Üzerinde çalışacağınız fikirler
Some Wikimedia community members may share their ideas what they would like to see implemented by someone else.
- phabricator:tag/wikidata-gadgets/ - you can do small fixes on already existing gadgets, or work on proposals
- Gadget Kitchen/Requests - not a popular page, so you might waste time
- w:Wikipedia:User scripts/Requests - for English Wikipedia
Deploying or enabling a gadget
If your user script should become a gadget (see the definitions above) on a wiki, the following steps are needed:
- Steps for the user script author:
- Recruit an experienced developer to review your gadget code. There is no formal process to do so.
- Check with community members if there aren't any concerns with enabling the gadget on a wiki. For the website MediaWiki.org itself, this would be Project:Village Pump.
- Recruit a site administrator with interface rights. See the page Special:ListUsers/interface-admin on your wiki.
- Steps for the interface administrator:
- Copy your JS & CSS files in the
MediaWiki:
namespace on your wiki, and make sure the page names have the prefixGadget-
.
Example:MediaWiki:Gadget-userfeedback.js
- Define the gadget on the MediaWiki:Gadgets-definition page of your wiki. That includes the modules used, dependencies, JS, and CSS file names, etc. This will allow users to enable the gadget on the Special:Preferences page of your wiki.
Example:userfeedback[ResourceLoader|default|dependencies=ext.eventLogging]|userfeedback.js|userfeedback.css
- Create a page for the gadget in the
MediaWiki:
namespace with prefixGadget-
. This will generate a label for the gadget on the Special:Preferences page of your wiki.
Example:MediaWiki:Gadget-userfeedback
- Copy your JS & CSS files in the
Contributing to user scripts
If a user script is made by another user you may be able to contribute to it. You can do this by making a copy of the user script as a subpage of your own user page. Then replace the original user script you had enabled with the one that is a user page in your common.js. Proceed to make edits as you please to your copy of the script. If you want the script to contain the changes you made to your copy of the script, you should ping the author of the script on the discussion page of the original user script with the page that contains your changes and ask them to add the changes. If the user is no longer active, then you should notify the community that your version of the script exists by linking the script on your wiki's list of scripts.
Related pages
- Vikipedi:Kullanıcı betikleri Vikipedi ve diğer dillerdeki alternatifleri, Vikipedi'deki kullanıcı betiği ve küçük araç geliştirme için ana merkezlerdir.
- The user scripts guide on the English Wikipedia has tons of useful information to get you started.
- Vikipedi:Küçük araç Vikipedi sayfasında
- Slides for a workshop to teach the basics of user scripts and gadgets (part of meta:Small wiki toolkits)
- Tüm Wikimedia projelerinde popülerliğe göre küçük araçların listesi
- For a specific website, see Special:GadgetUsage for the number of users that each gadget has
- Compatibility - MediaWiki's JavaScript support per browser and browser version
- A video tutorial from the year 2012 regarding gadgets and user scripts. This is a bit outdated and the quality could be better, but shows how to use developer tools etc.
- See Extension:EventLogging for a mechanism to gather data created from users interacting with a gadget.
- Category:Snippets with JavaScript – useful JavaScript snippets