Userscript Development

Tampermonkey UserScripts

Scripts ending with .user.js will be interpreted as Tampermonkey scripts.

Features

• @include
• @exclude
• @match
• @require
• APIs
  • GM_getValue
  • GM_getValue
  • unsafeWindow

IDKR Client UserScripts

Scripts ending with .idkr.js will be interpreted as IDKR scripts.

Features

We implement the new and old format of IDKR userscripts.

• Run
  • config
• Client Utilities
  • events
  • genCSettingsHTML
• Settings extensions
  • checkbox
  • switch
  • slider
  • (extensions:)
  • color (inferred)
  • text (inferred) + placeholder
  • unknown input types (inferred)

Chief Client UserScripts

Scripts ending with .chief.js will be interpreted as Chief Client scripts.

Features

• React
• htm
• Chief Client UI components
• localStorage React hooks
• Settings extensions

Injections

These are our documented injections:

name	value	Purpose
React	React as a UMD module.	Used for hooks such as useEffect, useState, etc..
html	The JSX builder htm.	Used to build JSX components and utilize them without compiling code.
UI	Krunker UI components.	Used to build interfaces in Chief Client.
exportUserscript	Export entry points of a userscript.	Used to export features such as a Settings component.
getSite	The current location.	Used to determine what part of Krunker is being shown.

Type definitions (abridged):

declare const exportUserscript: (data: {
  /**
   * Extend the client settings GUI.
   * We do not intend for you to build Preact hooks/components using this interface. This is simply for extending the in-game interface.
   */
  renderGameSettings?: (
    Preact: typeof import("preact"),
    html: typeof import("htm/preact").html,
    /**
     * @see {@link https://github.com/6ct/clientpp/blob/master/frontend/src/runtime/chief.ts#L22|frontend/src/runtime/chief.ts:22}
     */
    UI: Record<string, import("preact").FunctionComponent>,
    /**
     * localStorage hook.
     * If another hook or setLocalStorage updates the key, this component will trigger a state update.
     */
    useLocalStorage: (key: string) => [
      string | null,
      /**
       * @param value If null, the key will be deleted.
       */
      (value: string | null) => void
    ]
  ) => import("preact").VNode | void;
}) => void;

declare const getSite: () => "all" | "game" | "social" | "viewer" | "editor";

/**
 * Set/remove a localStorage key and trigger a hook from outside of a React component.
 *
 * @param key
 * @param value If null, the key will be deleted.
 */
declare function setLocalStorage(key: string, value: string | null): void;

Examples can be found in the scripts directory.