Wikipedia:Ultraviolet/Documentation/Expansions

About – Features – Install or Remove – Documentation – Talk – Changelog

As part of an effort to introduce custom user-made improvements to Ultraviolet without inflating the main Ultraviolet script and without having to create custom merge requests, we provide users the ability to make expansions for Ultraviolet. This way, a user can implement whatever functionality or styling they want.

Expansions come in two forms: extensions and styles. Extensions are based completely on the Ultraviolet hooks system. They are expected to execute specific actions on specific events, and can cancel actions at request. Styles are special bundles of code which override Ultraviolet’s default style (the Material style). They have the ability to completely change UI elements, since Ultraviolet will call for the registered UI element instead of the defaults. This way, any user can style Ultraviolet in any way they want.

Usage

To install a Ultraviolet expansion, load the user script of said expansion before loading Ultraviolet. That's all there is to it.

Development

If you wish to create your own Ultraviolet expansion, you have to read this guide as it will cover specifics on how Ultraviolet loads expansions, and how to have your code properly readable by Ultraviolet. You can also read this yourself in case you want more transparency with how Ultraviolet loads scripts by other users.

Bootstrap header

Each Ultraviolet extension should be loaded before Ultraviolet is loaded. This unfortunately means that the usual variables used for hooks and styles are missing. To counter this, you’re supposed to add a variable check at the top of your script. This will check if the variables have been defined already (possibly by other expansions) and if not, define them accordingly.

The code for the bootstrap header is relatively simple.

if (window.RedWarnHooks == null) window.RedWarnHooks = {};
if (window.RedWarnStyles == null) window.RedWarnStyles = [];

This will ensure that the variables for hooks and styles are valid and that you can insert your own hooks and style information into Ultraviolet. Upon loading, Ultraviolet detects these variables and immediately uses them.

Hook registration

Hooks can be inserted by both extensions and styles. In most cases, the process below has to be followed only by the extensions, since hooks for styles are loaded a different way. For hooks, you'll have to insert them into their respective event names on RedWarnHooks. A full list of hooks can be found on the development wiki.

To register a hook, check first if the given array for the hook is available. If it isn't, initialize it into an array. After that, you can push your hooks onto that array.

if (RedWarnHooks["preinit"] == null) RedWarnHooks["preinit"] = [];
RedWarnHooks["preinit"].push(() => {
    console.log("RedWarn preinitialization!");
    RedWarnStore.registerDependency({
        type: "style",
        id: "super-special-styles",
        src: "https://wiki.riteme.site/w/index.php?action=raw&title=Wikipedia:RedWarn/super-special-styles.css"
    }); // Load dependencies.
});

You can do this same process for every existing event type.

Styles

This section has been moved to the Ultraviolet development documentation wiki, on pages Style system and Style system/Definition, respectively.

Example

If you're looking for an example of the implementation of the style system, you can simply look at the default material style inside src/styles/material in the RedWarn repository.

See also

• TypeScript
• webpack
• Wikipedia:User scripts

External links

• The RedWarn repository
• The RedWarn repository (Ultraviolet branch)