13

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.

MirroredFate
  • 12,396
  • 14
  • 68
  • 100

4 Answers4

15

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).

Ilmari Karonen
  • 49,047
  • 9
  • 93
  • 153
  • This is great! Much more useful than the wiki docs. I think using the resource module and hooks when you're trying to put in various javascript/jquery libraries is necessary. – MirroredFate Apr 27 '15 at 23:21
2

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.

Harry Wood
  • 2,220
  • 2
  • 24
  • 46
garryp
  • 5,508
  • 1
  • 29
  • 41
  • The page on Common.js was deleted, and the documentation on your linked page is incredibly lacking in any sort of useful examples. I sincerely hope you will edit your answer to include an example or two of what you're talking about. – MirroredFate Apr 27 '15 at 18:08
  • Have you tried searching your filesystem for common.js? Does it exist? – garryp Apr 27 '15 at 18:13
  • I did. There is no file named "Common.js", or "common.js". – MirroredFate Apr 27 '15 at 18:17
  • If you run dev tools F12 and see which files the page is loading is it trying to request a common.js file and giving a 404? As I understand any JS you want to add to a page would go in common.js if you want a simple solution. – garryp Apr 27 '15 at 18:21
  • No. Nowhere does it attempt to load a common.js file. Furthermore, the only references to a "common.js" file in the mediawiki installation occur in the language message `.json` files, the includes for a `SpecialUserlogin` file, comments in an `OutputPage`, and some test files, which are testing messages. – MirroredFate Apr 27 '15 at 18:31
  • in LocalSettings.php have you tried adding $wgUseSiteJs = true; – garryp Apr 27 '15 at 18:36
  • Yes, but it didn't do anything. – MirroredFate Apr 27 '15 at 18:46
  • 1
    Figured it out. There is no common.js file. There is a page called `MediaWiki:Common.js` available only to admins. Type that into the search bar in the wiki installation and edit that page with your code. – MirroredFate Apr 27 '15 at 18:59
2

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;
};
jeffmcneill
  • 2,052
  • 1
  • 30
  • 26
1

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();
    });
  });
Harry Wood
  • 2,220
  • 2
  • 24
  • 46