stylus/apply.js

requestStyles();

function requestStyles() {
	// If this is a Stylish page (Edit Style or Manage Styles),
	// we'll request the styles directly to minimize delay and flicker,
	// unless Chrome still starts up and the background page isn't fully loaded.
	// (Note: in this case the function may be invoked again from applyStyles.)
	var request = {method: "getStyles", matchUrl: location.href, enabled: true, asHash: true};
	if (location.href.indexOf(chrome.extension.getURL("")) == 0) {
		var bg = chrome.extension.getBackgroundPage();
		if (bg && bg.getStyles) {
			bg.getStyles(request, applyStyles);
			return;
		}
	}
	chrome.extension.sendMessage(request, applyStyles);
}

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
	// Also handle special request just for the pop-up
	switch (request.method == "updatePopup" ? request.reason : request.method) {
		case "styleDeleted":
			removeStyle(request.id, document);
			break;
		case "styleUpdated":
			removeStyle(request.style.id, document);
			//fallthrough
		case "styleAdded":
			if (request.style.enabled == "true") {
				chrome.extension.sendMessage({method: "getStyles", matchUrl: location.href, enabled: true, id: request.style.id, asHash: true}, applyStyles);
			}
			break;
		case "styleApply":
			applyStyles(request.styles);
			break;
		case "styleReplaceAll":
			replaceAll(request.styles, document);
			break;
		case "realURL":
			sendResponse(location.href);
			break;
		case "styleDisableAll":
			disableAll(request.disableAll);
			break;
	}
});

var g_disableAll = false;
function disableAll(disable) {
	if (!disable === !g_disableAll) return;
	g_disableAll = disable;
	disableSheets(g_disableAll, document);

	function disableSheets(disable, doc) {
		Array.prototype.forEach.call(doc.styleSheets, function(stylesheet) {
			if (stylesheet.ownerNode.classList.contains("stylish")) {
				stylesheet.disabled = disable;
			}
		});
		getDynamicIFrames(doc).forEach(function(iframe) {
			disableSheets(disable, iframe.contentDocument);
		});
	}
}

function removeStyle(id, doc) {
	var e = doc.getElementById("stylish-" + id);
	if (e) {
		e.parentNode.removeChild(e);
	}
	getDynamicIFrames(doc).forEach(function(iframe) {
		removeStyle(id, iframe.contentDocument);
	});
}

function applyStyles(styleHash) {
	if (!styleHash) { // Chrome is starting up
		requestStyles();
		return;
	}
	if ("disableAll" in styleHash) {
		disableAll(styleHash.disableAll);
		delete styleHash.disableAll;
	}

	for (var styleId in styleHash) {
		applySections(styleId, styleHash[styleId]);
	}
}

function applySections(styleId, sections) {
	var styleElement = document.getElementById("stylish-" + styleId);
	// Already there.
	if (styleElement) {
		return;
	}
	if (document.documentElement instanceof SVGSVGElement) {
		// SVG document, make an SVG style element.
		styleElement = document.createElementNS("http://www.w3.org/2000/svg", "style");
	} else {
		// This will make an HTML style element. If there's SVG embedded in an HTML document, this works on the SVG too.
		styleElement = document.createElement("style");
	}
	styleElement.setAttribute("id", "stylish-" + styleId);
	styleElement.setAttribute("class", "stylish");
	styleElement.setAttribute("type", "text/css");
	styleElement.appendChild(document.createTextNode(sections.map(function(section) {
		return section.code;
	}).join("\n")));
	addStyleElement(styleElement, document);
}

function addStyleElement(styleElement, doc) {
	doc.documentElement.appendChild(doc.importNode(styleElement, true))
	  .disabled = g_disableAll;
	getDynamicIFrames(doc).forEach(function(iframe) {
		addStyleElement(styleElement, iframe.contentDocument);
	});
}

// Only dynamic iframes get the parent document's styles. Other ones should get styles based on their own URLs.
function getDynamicIFrames(doc) {
	return Array.prototype.filter.call(doc.getElementsByTagName('iframe'), iframeIsDynamic);
}

function iframeIsDynamic(f) {
	var href;
	try {
		href = f.contentDocument.location.href;
	} catch (ex) {
		// Cross-origin, so it's not a dynamic iframe
		return false;
	}
	return href == document.location.href || href.indexOf("about:") == 0;
}

function replaceAll(newStyles, doc) {
	Array.prototype.forEach.call(doc.querySelectorAll("STYLE.stylish"), function(style) {
		style.parentNode.removeChild(style);
	});
	applyStyles(newStyles);
	getDynamicIFrames(doc).forEach(function(iframe) {
		replaceAll(newStyles, iframe.contentDocument);
	});
}

// Observe dynamic IFRAMEs being added
var iframeObserver = new MutationObserver(function(mutations) {
	var styles = Array.prototype.slice.call(document.querySelectorAll('STYLE.stylish'));
	if (styles.length == 0) {
		return;
	}
	mutations.filter(function(mutation) {
		return "childList" === mutation.type;
	}).forEach(function(mutation) {
		Array.prototype.filter.call(mutation.addedNodes, function(node) { return "IFRAME" === node.tagName; }).filter(iframeIsDynamic).forEach(function(iframe) {
			var doc = iframe.contentDocument;
			styles.forEach(function(style) {
				doc.documentElement.appendChild(doc.importNode(style, true))
				  .disabled = g_disableAll;
			});
		});
	});
});
iframeObserver.observe(document, {childList: true, subtree: true});