UserUtils
General purpose DOM/GreaseMonkey library: register listeners for when CSS selectors exist, intercept events, create persistent & synchronous data stores, modify the DOM more easily and much more
Install / Use
/learn @Sv443-Network/UserUtilsREADME
UserUtils
General purpose DOM/GreaseMonkey library that allows you to register listeners for when CSS selectors exist, intercept events, create persistent & synchronous data stores, modify the DOM more easily and much more.
Contains builtin TypeScript declarations. Supports ESM and CJS imports via a bundler and global declaration via @require or <script>
The library works in any DOM environment with or without the GreaseMonkey API, but some features will be unavailable or require special setup.
You may want to check out my template for userscripts in TypeScript that you can use to get started quickly. It also includes this library by default.
If you like using this library, please consider supporting the development ❤️
View the documentation of previous major versions:
<a title="View docs for patch version 9.4.4" href="https://github.com/Sv443-Network/UserUtils/blob/v9.4.4/docs.md" rel="noopener noreferrer">v9.4.4</a> • <a title="View docs for minor version 8.4.0" href="https://github.com/Sv443-Network/UserUtils/blob/v8.4.0/README.md" rel="noopener noreferrer">v8.4.0</a> • <a href="https://github.com/Sv443-Network/UserUtils/blob/v7.3.0/README.md" title="View docs for minor version 7.3.0" rel="noopener noreferrer">v7.3.0</a> • <a href="https://github.com/Sv443-Network/UserUtils/blob/v6.3.0/README.md" title="View docs for minor version 6.3.0" rel="noopener noreferrer">v6.3.0</a> • <a href="https://github.com/Sv443-Network/UserUtils/blob/v5.0.1/README.md" title="View docs for patch version 5.0.1" rel="noopener noreferrer">v5.0.1</a> • <a href="https://github.com/Sv443-Network/UserUtils/blob/v4.2.1/README.md" title="View docs for patch version 4.2.1" rel="noopener noreferrer">v4.2.1</a> • <a href="https://github.com/Sv443-Network/UserUtils/blob/v3.0.0/README.md" title="View docs for major version 3.0.0" rel="noopener noreferrer">v3.0.0</a> • <a href="https://github.com/Sv443-Network/UserUtils/blob/v2.0.1/README.md" title="View docs for patch version 2.0.1" rel="noopener noreferrer">v2.0.1</a> • <a href="https://github.com/Sv443-Network/UserUtils/blob/v1.2.0/README.md" title="View docs for minor version 1.2.0" rel="noopener noreferrer">v1.2.0</a> • <a href="https://github.com/Sv443-Network/UserUtils/blob/v0.5.3/README.md" title="View docs for patch version 0.5.3" rel="noopener noreferrer">v0.5.3</a>
</sub> <br> </div><br> <!-- #region Table of Contents -->[!NOTE]
</sub>
In version 10.0.0, many of the platform-agnostic features were moved to the CoreUtils library.
<sub> Everything in CoreUtils is re-exported by UserUtils for backwards compatibility, so installing both at the same time isn't usually necessary.
Beware that when both are installed, class inheritance between the two libraries will only work if the installed version of CoreUtils matches the version of CoreUtils that is included in UserUtils (refer topackage.json), so that the final bundler is able to deduplicate them correctly. See alsoconst versions
Table of Contents:
- Installation
- License
- Preamble (info about the documentation)
- UserUtils Features
- DOM:
- 🟧
class Dialog- class for creating custom modal dialogs with a promise-based API and a generic, default style - 🟧
class SelectorObserver- class that manages listeners that are called when selectors are found in the DOM - 🟣
function getUnsafeWindow()- get the unsafeWindow object or fall back to the regular window object - 🟣
function isDomLoaded()- check if the DOM has finished loading and can be queried and modified - 🟣
function onDomLoad()- run a function or pause async execution until the DOM has finished loading (or immediately if DOM is already loaded) - 🟣
function addParent()- add a parent element around another element - 🟣
function addGlobalStyle()- add a global style to the page - 🟣
function preloadImages()- preload images into the browser cache for faster loading later on - 🟣
function openInNewTab()- open a link in a new tab - 🟣
function interceptEvent()- conditionally intercepts events registered byaddEventListener()on any given EventTarget object - 🟣
function interceptWindowEvent()- conditionally intercepts events registered byaddEventListener()on the window object - 🟣
function isScrollable()- check if an element has a horizontal or vertical scroll bar - 🟣
function observeElementProp()- observe changes to an element's property that can't be observed with MutationObserver - 🟣
function getSiblingsFrame()- returns a frame of an element's siblings, with a given alignment and size - 🟣
function setInnerHtmlUnsafe()- set the innerHTML of an element using a Trusted Types policy without sanitizing or escaping it - 🟣
function probeElementStyle()- probe the computed style of a temporary element (get default font size, resolve CSS variables, etc.)
- 🟧
- Misc:
- 🟧
class GMStorageEngine- storage engine class forDataStores using the GreaseMonkey API - 🟧
class Mixins- class for creating mixin functions that allow multiple sources to modify a target value in a highly flexible way - 🟩
const versions- contains version information for UserUtils and CoreUtils
- 🟧
- Translation:
- 🟣
function tr.for()- translates a key for the specified language - 🟣
function tr.use()- creates a translation function for the specified language - 🟣
function tr.hasKey()- checks if a key exists in the given language - 🟣
function tr.addTranslations()- add a flat or recursive translation object for a language - 🟣
function tr.getTranslations()- returns the translation object for a language - 🟣
function tr.getAllTranslations()- returns all registered translations - 🟣
function tr.deleteTranslations()- delete the translation object for a language - 🟣
function tr.setFallbackLanguage()- set the fallback language used when a key is not found in the given language - 🟣
function tr.getFallbackLanguage()- returns the fallback language - 🟣
function tr.addTransform()- adds a transform function to the translation system for custom argument insertion and much more - 🟣
function tr.deleteTransform()- removes a transform function - 🟩
const tr.transforms- predefined transform functions for quickly adding custom argument insertion - 🔷
type TrKeys- generic type that extracts all keys from a flat or recursive translation object into a union
- 🟣
- Errors
- 🟧
class PlatformError- thrown when the current platform doesn't support a certain feature, like calling a DOM function in a non-DOM environment
- 🟧
- DOM:
- CoreUtils Features (re-exported for backwards compatibility)
- Array:
- 🟣
function randomItem()- Returns a random item from the given array - 🟣
function randomItemIndex()- Returns a random array item and index as a tuple - 🟣 [
function randomizeArray()](https://github.com/Sv443-Network/CoreUt
- 🟣
- Array:
