How to add custom global javascript to mediawiki

Question

How can I add a custom javascript file (let's say custom.js) to a mediawiki installation?

For instance, if I put custom.js under the folder resources/lib/, how do I get that to be loaded on every page?

I am not trying to do this as part of an extension, and I would prefer to keep my changes in LocalSettings.php.

Answer 1

Put the code in the "MediaWiki:common.js" page of your wiki

http://www.mediawiki.org/wiki/Manual:Interface/JavaScript

Also see lower down the page for custom skins.

Answer 2

As garryp has already suggested, you can put the JavaScript code into MediaWiki:Common.js. Note that this is not a file, but simply a page you can edit (as an administrator) on your wiki. For example, here's the MediaWiki:Common.js page on the English Wikipedia.

JavaScript code from Common.js is only loaded if the $wgUseSiteJs is enabled. However, this is the default setting, so it should work unless you've deliberately disabled it by adding a line like $wgUseSiteJs = false; into your LocalSettings.php file.

---

It's also possible to load JavaScript code from a file using ResourceLoader, but this is a bit more complicated. Still, just as a quick example, if you had, say, files named foo/bar.js and foo/baz.js in your main MediaWiki directory, you could load them by adding the following code into your LocalSettings.php file:

// register a ResourceLoader module...
$wgResourceModules['custom.foo.whatever'] = array(
    'scripts' => array( 'foo/bar.js', 'foo/baz.js' ),
    // could e.g. add dependencies on core modules here
);
// ...and set up a hook to add it to every page
function addMyCustomScripts( &$out ) {
    $out->addModules( 'custom.foo.whatever' );
    return true;
}
$wgHooks['BeforePageDisplay'][] = 'addMyCustomScripts';

Basically, this method is mostly useful for extension authors, who can use it to load CSS and JS code as needed. See the $wgResourceModules and BeforePageDisplay documentation for more details, including additional module options (and core modules).

Answer 3

Use of common.js is a good idea.

Another option is to define it to load in LocalSettings.php:

# Add onBeforePageDisplay function to BeforePageDisplay Hook
$wgHooks['BeforePageDisplay'][] ='onBeforePageDisplay';

function onBeforePageDisplay( OutputPage &$out, Skin &$skin )
{
    $script = '<script type="text/javascript" src="https://example.com/javascript.js"></script>';
    $out->addHeadItem("itemName", $script);
    return true;
};

Answer 4

You can put javascript code in the "MediaWiki:common.js" page of your wiki.

On a fresh new wiki you would be creating this page. Because it is in the "MediaWiki" namespace you may hit permissions problems. You cannot edit the page unless you are an admin user. Go to the page "Special:ListUsers/sysop" to see who the admin users are, and make sure you are logged in as one of them (can't remember the password?). Once you've overcome those hurdles and can edit "MediaWiki:common.js"...

You can place any javascript there, and it should load for all users regardless of their user group or skin choice (hence the name "common"). After changing it, remember your browser may be caching things. View any wiki page and do a ctrl+refresh, and the new javascript should kick in.

If you have javascript in a file which you want to load (either uploaded among your wiki files, or hosted on an external site) you can do this via ResourceLoader. Ilmari Karonen decribed how to do this as an edit to your LocalSettings.php, but another approach...

You can use ResourceLoader within your "MediaWiki:common.js" page. For example edit the page and just add the one line:

mw.loader.load( 'https://some.website.com/some-javascript.js' );

See the 'mw.loader.load' section in the mediawiki.org ResourceLoader/Modules docs.

We were using an addOnloadHook event which was intended to follow on from loading this, so we've ended up doing it the jQuery way:

jQuery.getScript( 'https://some.website.com/some-javascript.js',
  function() {
    addOnloadHook(function() {
      someJavaScript.thingToRunOnLoad();
    });
  });