💡 Today I Learned

Template for a UserScript

Here is a "batteries included" template for a user script.

It includes some little functions for adding elements and styles. And it sets up a loop to continually alter the page. This is needed on complex pages where elements are continually added/removed as you open/close/scroll/interact with the page.

You

// ==UserScript==
// @name         NAME
// @namespace    http://secretGeek.net/
// @version      0.1
// @description  DESCRIPTION
// @author       Leon Bambrick
// @match        https://example.com/*
// @match        https://www.example.com/*
// @run-at       document-body
// @icon         https://cdn.vsassets.io/content/icons/favicon.ico
// ==/UserScript==

/* global eus */

(function() {
	'use strict';
	/* Function to add style element */
	function addStyle(styles) {
		/* Create style document */
		var styleElement = document.createElement('style');
		styleElement.type = 'text/css';
		if (styleElement.styleSheet) {
			styleElement.styleSheet.cssText = styles;
		} else {
			styleElement.appendChild(document.createTextNode(styles));
		}
		/* Append style tag to the head */
		document.getElementsByTagName("head")[0].appendChild(styleElement);
	}

	/* function create a new element, based on html */
	function htmlToElement(html) {
		var template = document.createElement("template");
		html = html.trim(); // Never return a text node of whitespace as the result
		template.innerHTML = html;
		return template.content.firstChild;
	}

	/* given an element, insert a sibling after it */
	function insertSibling(currentElem, newElem) {
		if (currentElem.nextSibling) {
			currentElem.parentNode.insertBefore(newElem, currentElem.nextSibling);
		} else {
			currentElem.parentNode.appendChild(newElem);
		}
	}

	/* this function is called continuously, every few seconds. So any changes it makes have to be idempotent */
	function onLoop() {
		/* Example: find every tag (unless it has the `lb_altered` class (indicating we've already found it and altered it.)
		for (let targetElement of document.querySelectorAll(".some-class:not(.lb_altered)")) {
			targetElement.classList.add("lb_altered"); // add the lb_altered class, so that this element will only be altered/changed oncee.
			// ** Do something to the targetElement...
		}
		*/

		/* ** Example: remove a particular element
		let hireMe = document.querySelector("#hireme");

		if (hireMe != null) {
          hireMe.remove();
		}
		*/

		/*
		 YOUR CODE HERE!
		*/
	}

	/* this is called, once only, when the page is first loaded. */
	function onceOnly() {
		// Special styles we apply.
		var styles = '.lb_altered { background-color:red;}';
		/*
		  YOUR STYLES HERE...
		*/
		styles += ' .bolt-pill { padding: 0 2px; }';

		addStyle(styles);
		// And now we set up the loop that will call "onLoop" over and over.
		// this is needed at sites where elements are continually added/removed as you open/close/scroll/interact with the page
		// the loop is only called once every 3 seconds because i don't want to cause performance issues.
		onLoop();
		setInterval(function () {
			onLoop();
		}, 3000);
	}

	function onReady() {
		// At the start... i have this LONG wait... because i haven't worked out when the page really loads
		setTimeout(function () {
			onceOnly();
		}, 2000);
	}

	// Start modifying the page once the DOM is ready.
	if (document.readyState !== 'loading') {
		onReady();
	} else {
		document.addEventListener('DOMContentLoaded', onReady);
	}
}());

I have userscripts to:

I want user scripts to:

See also