{"id":352,"date":"2015-08-27T12:46:51","date_gmt":"2015-08-27T07:16:51","guid":{"rendered":"https:\/\/tutorialsjoint.com\/?p=352"},"modified":"2025-07-27T16:06:32","modified_gmt":"2025-07-27T10:36:32","slug":"using-resource-loader-to-add-javascript-and-css-modules-in-extension","status":"publish","type":"post","link":"https:\/\/tutorialsjoint.com\/using-resource-loader-to-add-javascript-and-css-modules-in-extension\/","title":{"rendered":"Using Resource Loader to add JavaScript and CSS modules in Extension"},"content":{"rendered":"\n<p>\n\nThe Mediawiki extensions are also a part of web development so they need JavaScript and CSS support too, for the same you can and you should use Resource Loader module. This tutorial demonstrate the use of ResourceLoader module and how to use that in extension development.\n\n<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>We have already seen the basics of MediaWiki extensions if you are new then please go through the previous two tutorials, to know the basic know how. Please see the index below for the series.<\/p>\n\n\n\n<p>In this part we are going to demonstrate the use of Resource Loader module, which is used to include JavaScript, CSS or Messages module in the extension. So, like in earlier tutorial or in general first of all we need to register the module with the extension. Following is the Index of this series.<\/p>\n\n\n\n<p><a href=\"http:\/\/www.examsmyantra.com\/article\/130\/mediawiki\/mediawiki-extension-how-to-develop-custom-extension-in-mediawiki\">MediaWiki Extension &#8211; How to Develop custom extension in MediaWiki<\/a><br><a href=\"http:\/\/www.examsmyantra.com\/article\/131\/mediawiki\/mediawiki-extension-localisation-use-of-i18n-and-language-json-files\">MediaWiki Extension &#8211; localization of MediaWiki Extension<\/a><br><strong>MediaWiki Extension &#8211; Using Resource Loader to inject JavaScript and CSS<\/strong><br><a href=\"http:\/\/www.examsmyantra.com\/article\/133\/mediawiki\/ejabling-ajax-and-using-ajax-for-extension-development\">MediaWiki Extension &#8211; Enabling use of Ajax in Extension<\/a><\/p>\n\n\n\n<p>To register the module we use the $wgResourceModules array variable to name the module, and add all our resources in it, as an associative array, Mainly following modules are involved.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">$wgResourceModules['ext.DemoExtension'] = array(\n\t\"scripts\"=>\"resources\/js\/demo.js\",\n\t\"styles\"=>\"resources\/css\/demo.css\",\n\t\"dependencies\"=>array(\"jquery\"),\n\t'localBasePath'=> __DIR__,\n   'remoteExtpath'=>'DemoExtension'\n);\n\n<\/pre>\n\n\n\n<p>If you are working with single JavaScript\/CSS file you can mention it as a string only but if there are more than one file you can write it as an array, like the way we have done with dependencies. localBasePath is the path from where the relative path for scripts and styles is defined. remoteExtpath is the directory name for the extension.<\/p>\n\n\n\n<p>In the JavaScript and Css files we have written our test code. as shown in following code snippet.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">console.log(\"Hey, My JS is working!\");\n\n<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.highlight-green{\n\tbackground-color:#0f0;\n}\n\n<\/pre>\n\n\n\n<p>Finally output the modules on the extension page using output page object. just as shown in the code below.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">class DemoExtension {\n    public static function injectHTMLInEditor(&amp;$editPage,&amp;$output) {\n\t\t$output->addModules(\"ext.DemoExtension\");\n\t\t$editPage->editFormTextAfterWarn .='&lt;div id=\"demoDiv\" class=\"highlight-green\">****Hi This is HTML Injected via Demo Extension****&lt;\/div>';\n\t\t$editPage->editFormTextAfterWarn .='This Message Comes From The localization Files:'.wfMessage('the-key');\n\t\treturn true;\n    }\n}\n\n<\/pre>\n\n\n\n<p>Okay, so we are all set, now we should be able to see the outcome on the intended page.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/www.examsmyantra.com\/em_uploads\/images\/2015\/08\/27\/extension_creation_resource_loader.png\" alt=\"Media Wiki Extension Resource Loader Module\"\/><\/figure>\n\n\n\n<p>In the next tutorial you can read about the use of Ajax feature to give more exclusive features to your extension:<a href=\"http:\/\/www.examsmyantra.com\/article\/133\/mediawiki\/ejabling-ajax-and-using-ajax-for-extension-development\">Using Ajax in MediaWiki extensions<\/a>.<br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Mediawiki extensions are also a part of web development so they need JavaScript and CSS support too, for the same you can and you should use Resource Loader module. This tutorial demonstrate the use of ResourceLoader module and how to use that in extension development. We have already seen the basics of MediaWiki extensions [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[203,120,206,205],"class_list":["post-352","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-css","tag-javascript","tag-loader","tag-resource"],"_links":{"self":[{"href":"https:\/\/tutorialsjoint.com\/wp-json\/wp\/v2\/posts\/352","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tutorialsjoint.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tutorialsjoint.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tutorialsjoint.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tutorialsjoint.com\/wp-json\/wp\/v2\/comments?post=352"}],"version-history":[{"count":2,"href":"https:\/\/tutorialsjoint.com\/wp-json\/wp\/v2\/posts\/352\/revisions"}],"predecessor-version":[{"id":466,"href":"https:\/\/tutorialsjoint.com\/wp-json\/wp\/v2\/posts\/352\/revisions\/466"}],"wp:attachment":[{"href":"https:\/\/tutorialsjoint.com\/wp-json\/wp\/v2\/media?parent=352"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tutorialsjoint.com\/wp-json\/wp\/v2\/categories?post=352"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tutorialsjoint.com\/wp-json\/wp\/v2\/tags?post=352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}