Code snippets

From GreaseSpot Wiki
Jump to navigationJump to search

Shortcut to document.getElementById

function $(id) {

Example usage:

$("header").innerHTML = "Halloa!";

XPath helper

Run a particular XPath expression p against the context node context (or the document, if not provided).

Returns the results as an array.

function $x(p, context) {
  if (!context) context = document;
  var i, arr = [], xpr = document.evaluate(p, context, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
  for (i = 0; item = xpr.snapshotItem(i); i++) arr.push(item);
  return arr;

Example usage:

var i, paragraphs = $x("//p");
paragraphs.forEach(function(paragraph) {  // Loop over every paragraph
  paragraph.innerHTML = "Halloa!";

Serialize/deserialize for GM_getValue

Used to store and retrieve multiple values (typically as a serialized hash) in a single GM_getValue slot.

function deserialize(name, def) {
  return eval(GM_getValue(name, (def || '({})')));

function serialize(name, val) {
  GM_setValue(name, uneval(val));

Example usage:

var settings = {a: 1, b: 2, c: 3};
serialize('test', settings);
var _settings = deserialize('test');
// now "settings == _settings" should be true

DOM node juggling

Remove DOM node

function remove(element) {
  if (element) 

Insert node after node

function insertAfter(newNode, node) {
  var parent = node.parentNode;
  return node.nextSibling ? parent.insertBefore(newNode, node.nextSibling) : parent.appendChild(newNode);

Example usage:

var link = document.getElementById("the_link");
var icon = document.createElement("img");
icon.src = "…";
insertAfter(icon, link);

GET an URL with callback function

Retrieves url using HTTP GET, then calls the function cb with the response text as its single argument.

function get(url, cb) {
    method: "GET",
     url: url,
     onload: function(xhr) { cb(xhr.responseText); }

Example usage:

function inform(text) {
  alert("The HTML of the page: " + text);
get("", inform);