Repository files navigation

General helper functions for use in userscripts, bookmarklets, or wherever else you need them.

• ready() - Specify a function to execute when the DOM is fully loaded.
• applyCss() - Applies a string of CSS to the document.
• toggleCss() - Toggles a string of CSS within the document.
• More to come. Feel free torequest a function orcreate a pull request.

Specify a function to execute when theDOM is fully loaded.

This function is a vanilla JavaScript equivalent tojQuery's.ready().

This function is useful if you want a part of your code to execute only after the DOM has loaded. If you want your entire script to run after the DOM has loaded, then you should instead use@run-at document-start in your metadata block.

To use it in your userscript, add this line to themetadata block:

//@require https://raw.githubusercontent.com/HatScripts/userscript-helpers/master/ready.min.js

And then call it like so:

ready(()=>{console.log('DOM is ready')})

Applies a string of CSS to the document.

This function is intended to be a more robust alternative toGM_addStyle.

To use it in your userscript, add this line to themetadata block:

//@require https://raw.githubusercontent.com/HatScripts/userscript-helpers/master/applyCss.min.js

And then call it like so:

applyCss('body { color: white; background-color: black; } img { border: 0; }')

Or with a multi-line string (ES6+):

applyCss(`body {  color: white;  background-color: black;}img {  border: 0;}`)

Toggles a string of CSS within the document.If the specified CSS has not been applied to the page, it will be, else it will be removed.

To use it in your userscript, add this line to themetadata block:

//@require https://raw.githubusercontent.com/HatScripts/userscript-helpers/master/toggleCss.min.js

And then call it like so:

toggleCss('body { color: white; background-color: black; } img { border: 0; }')

Or with a multi-line string (ES6+):

toggleCss(`body {  color: white;  background-color: black;}img {  border: 0;}`)

Or with a second parameter (true orfalse):

toggleCss('body { color: white; }',true)// Enables the given CSStoggleCss('body { color: white; }',false)// Disables the given CSS