Original content is flickering before stylish applies the user style #15

apply.js

@@ -1,6 +1,4 @@
-chrome.extension.sendMessage({method: "getStyles", matchUrl: location.href, enabled: true, updateBadge: window == window.top}, function(response) {
+chrome.extension.sendMessage({method: "getStyles", matchUrl: location.href, enabled: true, asHash: true}, applyStyles);
-	response.forEach(applyStyle);
-});
 
 chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
 	switch(request.name) {
@@ -12,7 +10,12 @@ chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
 			//fallthrough
 		case "styleAdded":
 			if (request.style.enabled == "true") {
-				applyStyle(request.style);
+				chrome.extension.sendMessage({method: "getStyles", matchUrl: location.href, enabled: true, id: request.style.id, asHash: true}, applyStyles);
+			}
+			break;
+		case "styleApply":
+			for (var styleId in request.styles) {
+				applySections(styleId, request.styles[styleId]);
 			}
 	}
 });
@@ -24,16 +27,18 @@ function removeStyle(id) {
 	}
 }
 
-function applyStyle(s) {
+function applyStyles(styleHash) {
-	chrome.extension.sendMessage({method: "getStyleApplies", style: s, url: location.href}, function(response) {
+	for (var styleId in styleHash) {
-		if (response && response.length > 0) {
+		applySections(styleId, styleHash[styleId]);
-			applySections(s, response);
 	}
-	});
 }
 
-function applySections(style, sections) {
+function applySections(styleId, sections) {
-	var styleElement;
+	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");
@@ -41,7 +46,7 @@ function applySections(style, sections) {
 		// 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-" + style.id);
+	styleElement.setAttribute("id", "stylish-" + styleId);
 	styleElement.setAttribute("class", "stylish");
 	styleElement.setAttribute("type", "text/css");
 	styleElement.appendChild(document.createTextNode(sections.map(function(section) {

background.js

@@ -1,21 +1,19 @@
+// This happens right away, sometimes so fast that the content script isn't even ready. That's
+// why the content script also asks for this stuff.
+chrome.webNavigation.onCommitted.addListener(function(data) {
+	getStyles({matchUrl: data.url, enabled: true, asHash: true}, function(styleHash) {
+		chrome.tabs.sendMessage(data.tabId, {name: "styleApply", styles: styleHash});
+		// Don't show the badge for frames
+		if (data.frameId == 0) {
+			chrome.browserAction.setBadgeText({text: getBadgeText(Object.keys(styleHash)), tabId: data.tabId});
+		}
+	});
+});
+
 chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
 	switch (request.method) {
 		case "getStyles":
-			getStyles(request, function(r) {
+			getStyles(request, sendResponse);
-				sendResponse(r);
-				if (localStorage["show-badge"] == "true") {
-					if (request.updateBadge) {
-						var t = getBadgeText(r);
-						console.log("Tab " + sender.tab.id + " (" + sender.tab.url + ") badge text set to '" + t + "'.");
-						chrome.browserAction.setBadgeText({text: t, tabId: sender.tab.id});
-					} else {
-						console.log("Tab " + sender.tab.id + " (" + sender.tab.url + ") doesn't get badge text.");
-					}
-				}
-			});
-			return true;
-		case "getStyleApplies":
-			sendResponse(getApplicableSections(request.style, request.url));
 			return true;
 		case "saveStyle":
 			saveStyle(request, sendResponse);
@@ -35,23 +33,35 @@ function getStyles(options, callback) {
 	var url = "url" in options ? options.url : null;
 	var id = "id" in options ? options.id : null;
 	var matchUrl = "matchUrl" in options ? options.matchUrl : null;
+	// Return as a hash from style to applicable sections? Can only be used with matchUrl.
+	var asHash = "asHash" in options ? options.asHash : false;
 
 	var callCallback = function() {
-		callback(cachedStyles.filter(function(style) {
+		var styles = asHash ? {} : [];
+		cachedStyles.forEach(function(style) {
 			if (enabled != null && fixBoolean(style.enabled) != enabled) {
-				return false;
+				return;
 			}
 			if (url != null && style.url != url) {
-				return false;
+				return;
 			}
 			if (id != null && style.id != id) {
-				return false;
+				return;
 			}
-			if (matchUrl != null && getApplicableSections(style, matchUrl).length == 0) {
+			if (matchUrl != null) {
-				return false;
+				var applicableSections = getApplicableSections(style, matchUrl);
+				if (applicableSections.length > 0) {
+					if (asHash) {
+						styles[style.id] = applicableSections;
+					} else {
+						styles.push(style)
 					}
-			return true;
+				}
-		}));
+			} else {
+				styles.push(style);
+			}
+		});
+		callback(styles);
 	}
 
 	if (cachedStyles) {