HatScripts / userscript-helpers

Helper functions for userscripts, bookmarklets, or wherever else you need them

Userscript helpers

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 to request a function or create a pull request.

ready()

Specify a function to execute when the DOM is fully loaded.

This function is a vanilla JavaScript equivalent to jQuery'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 the metadata 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')
})

applyCss()

Applies a string of CSS to the document.

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

To use it in your userscript, add this line to the metadata 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;
}
`)

toggleCss()

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 the metadata 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 or false):

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