Code snippets

Shortcut to document.getElementById

function $(id) {
  return document.getElementById(id);
}

Example usage:

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

Shortcut to document.createElement with attributes

Creates a new element with the given attribute list

function createElement(type, attributes) {
  var element = document.createElement(type);
  if(attributes != null) {
     for(var i = 0; i < attributes.length; i++) {
        element.setAttribute(attributes[i][0], attributes[i][1]);
     }
  }
  return element;
}

Example usage:

var link = createElement('link', [['rel', 'stylesheet'], ['type', 'text/css'], ['href', basedir + 'style.css']]);

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 (with Array.forEach):

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) 
    element.parentNode.removeChild(element);
}

Insert node after node

function insertAfter(newNode, node) {
  return node.parentNode.insertBefore(newNode, node.nextSibling);
}

This works because even if node is the last node, nextSibling returns null so insertBefore puts the new node at the end.

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) {
  GM_xmlhttpRequest({
    method: "GET",
     url: url,
     onload: function(xhr) { cb(xhr.responseText); }
  });
}

Example usage:

function inform(text) {
  alert("The HTML of the page: " + text);
}
 
get("http://www.google.com", inform);