Chat-js is a library for FANDOM Chat that abstracts common code patterns in scripts:

  • asynchronous events for chat mainRoom availability
  • UI utilities - put your buttons in one responsive area!
  • mediawiki.api is exposed (allowing use of mw.Api in chat)


Importing the script

To use Chat-js, you need to import it into your script. You can listen for the event using mw.hook.

// register the hook before the import to avoid race conditions
mw.hook('').add(function (chat) {
    // chat is a shortcut to
importArticle({ type: 'script', article: 'u:dev:MediaWiki:Chat-js.js' });

Using the library

The library dispatches the following MediaWiki hooks:
Fires when the Chat-js library has initialised.
Passes as an argument.
Fires when Chat establishes a socket connection and events are available.
Passes window.mainRoom, as arguments.
Fires after full render of the Chat view. Chat equivalent of $.ready.
Note: Chat and user model data is only available after this hook has fired.
Passes window.mainRoom, as arguments.

Library utilities

The chat object has the following methods/members:

Property path Type Description
chat.socket boolean mainRoom availability
chat.render boolean Completion of Chat initial DOM render.
chat.toolbar DOM node Responsive WDS button group.
chat.stylesheet DOM node Chat-js stylesheet
chat.Button Constructor
Chat button constructor. Use with '' hook ONLY!
Accepts opts object as only argument:
  • - script name (required)
  • opts.attr - extension attributes and jQuery methods (optional)
Returns opts with button element in opts.el.
chat.buttons Method
Query for existing Chat-js buttons by script name. Use with '' hook ONLY!
Accepts name as only argument.
Return DOM node list for all scripts when there is no argument.
Or an object with .exists boolean & .el element when name is a existing button name.
chat.inlineAlert Method
Adds an inline alert to chat. Use with '' hook ONLY!
Accepts the following arguments:
  • text (string) - text-value (can be multi-line).
  • roomId (?string|number) - optional target room ID for private chat (or 'main').
Returns array of created chat models (can be empty).

Code examples

Default styling can be deactivated like so:

mw.hook('').add(function(chat) {
    chat.stylesheet.disabled = true;

New buttons can be generated like so:

mw.hook('').add(function(chat) {
    return new chat.Button({
        name: 'MessageBlocker',
        attr: {
            'class': 'mb-button',
            text: 'MB',
            click: mb.modal

Script buttons can be moved like so:

mw.hook('').add(function(mainRoom, chat) {
    var button = chat.buttons('EmoticonsWindow');
    if (button.exists) {
        $('.Write .message').append(button.el);

Code summary

// Create a button to toggle self-visibility in main user list.
mw.hook('').then(function(chat) {
    return new chat.Button({
        name: 'Chat-js',
        attr: {
            text: 'Self'
            click: function() {
                var el = mainRoom.userMain.view.el; 
                if (! {
           = 'display: none;'
                } else {
// Unhide yourself when Chat has rendered.
mw.hook('').add(function(mainRoom) {
 * Note that this is equivalent to:
 *  mw.hook('').add(function(mainRoom) {
 *      mainRoom.socket.bind('initial', function() {
 *          mainRoom.userMain.view.el.removeAttr('style');
 *      });
 *  });
importArticle({ type: 'script', article: 'u:dev:MediaWiki:Chat-js.js' });