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 React: import("react");
declare const html: import("htm").default;
/**
 * @see {@link https://github.com/6ct/clientpp/blob/master/frontend/src/runtime/chief.ts#L22|frontend/src/runtime/chief.ts:22}
 */
declare const UI: Record<string, import("react").FunctionComponent>;
declare const exportUserscript: (data: {
  /**
   * Extend the client settings GUI.
   */
  Settings?: FunctionComponent;
}) => void;
declare const getSite: () => "docs" | "game" | "social" | "editor";
/**
 * localStorage hook.
 * If another hook or setLocalStorage updates the key, this component will trigger a state update.
 */
declare const useLocalStorage: (key: string): [
  string | null,
  /**
   * @param value If null, the key will be deleted.
   */
  (value: string | null) => void
];
/**
 * 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.