|
|
| (131 intermediate revisions by 34 users not shown) |
| Line 1: |
Line 1: |
| __TOC__
| | #REDIRECT [[:Category:Coding Tips]] |
| | |
| = Shortcut to document.getElementById =
| |
| | |
| function $(id) {
| |
| return document.getElementById(id);
| |
| }
| |
| | |
| Example usage:
| |
| | |
| $("header").innerHTML = "Halloa!";
| |
| | |
| | |
| = XPath helper =
| |
| | |
| Run a particular [[XPath]] expression <code>p</code> against the context node <code>context</code> (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 [http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Objects:Array:forEach 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
| |
| | |
| = Log only when debugging =
| |
| | |
| function debug(message) {
| |
| if (DEBUG) GM_log(message);
| |
| }
| |
| | |
| Example usage:
| |
| | |
| var DEBUG = true;
| |
|
| |
| debug("Attempting to load wubbles...");
| |
| load_wubbles();
| |
| | |
| = DOM node manipulation =
| |
| | |
| == Create element 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, l = attributes.length; i < l; 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']]);
| |
| | |
| == Remove DOM node ==
| |
| | |
| function remove(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 <code>node</code> is the last node, <code>nextSibling</code> returns <code>null</code> so <code>insertBefore</code> 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);
| |
| | |
| == Advanced createElement for creating hierarchies of elements ==
| |
| Creates an element with attributes as well as child elements with their own attributes and children. Function should be called with arguments in the form of the following hash (note that "child1", "child2" should be hashes of the same structure):
| |
| createEl({n: nodename, a: {attr1: val, attr2: val}, c: [child1, child2], evl: {type: eventlistener_type, f: eventlistener_function, bubble: bool}}, appendTo)
| |
| | |
| | |
| function createEl(elObj, parent) {
| |
| var el;
| |
| if (typeof elObj == 'string') {
| |
| el = document.createTextNode(elObj);
| |
| }
| |
| else {
| |
| el = document.createElement(elObj.n);
| |
| if (elObj.a) {
| |
| attributes = elObj.a;
| |
| for (var key in attributes) {
| |
| if (key.charAt(0) == '@')
| |
| el.setAttribute(key.substring(1), attributes[key]);
| |
| else
| |
| el[key] = attributes[key];
| |
| }
| |
| }
| |
| if (elObj.evl) {
| |
| el.addEventListener(elObj.evl.type, elObj.evl.f, elObj.evl.bubble);
| |
| }
| |
| if (elObj.c) {
| |
| elObj.c.forEach(function (v, i, a) { createEl(v, el); });
| |
| }
| |
| }
| |
| if (parent)
| |
| parent.appendChild(el);
| |
| return el;
| |
| }
| |
| | |
| | |
| Example usage:
| |
| | |
| createEl({n: 'ol', a: {'@class': 'some_list', '@id': 'my_list'}, c: [
| |
| {n: 'li', a: {textContent: 'first point'}, evl: {type: 'click', f: function() {alert('first point');}, bubble: true}},
| |
| {n: 'li', a: {textContent: 'second point'}},
| |
| {n: 'li', a: {textContent: 'third point'}}
| |
| ]}, document.body);
| |
| | |
| | |
| = GET an URL with callback function =
| |
| | |
| Retrieves <code>url</code> using HTTP GET, then calls the function <code>cb</code> 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);
| |
| | |
| = RegExp escape string =
| |
| | |
| Escapes regexp meta characters in a string.
| |
| | |
| function escapeRegexp(s) {
| |
| return s.replace(/([.*+?^${}()|[\]\/\\])/g, '\\$1');
| |
| }
| |
| | |
| Example usage:
| |
| | |
| var re = new RegExp("^" + escapeRegexp("fo*bar") + "$");
| |
| "fo*bar".match(re); // Matches
| |
| "foobar".match(re); // Doesn't match
| |
| | |
| = !important Style =
| |
| | |
| Appends !important to each rule then adds the CSS to the page letting you override the default formatting.
| |
| | |
| function addStyle(css) {
| |
| GM_addStyle(css.replace(/;/g,' !important;'));
| |
| }
| |
| | |
| | |
| Example usage:
| |
| | |
| addStyle('a {text-decoration:none;}');
| |
