handle canvas and empty stylesheets with rules in frames

extension/core/content/content.js

@@ -171,7 +171,7 @@ this.singlefile.top = this.singlefile.top || (() => {
 
 	async function getOptions(options) {
 		options.canvasData = getCanvasData();
-		options.emptyStylesRulesText = getEmptyStyleRulesText();
+		options.emptyStyleRulesText = getEmptyStyleRulesText();
 		if (!options.removeFrames) {
 			options.framesData = await FrameTree.getFramesData();
 		}

lib/frame-tree/bg/frame-tree.js

@@ -27,7 +27,7 @@ this.FrameTree = (() => {
 			browser.tabs.sendMessage(sender.tab.id, { method: "FrameTree.getDataRequest", windowId: message.windowId, tabId: sender.tab.id });
 		}
 		if (message.method == "FrameTree.getDataResponse") {
-			browser.tabs.sendMessage(message.tabId, { method: "FrameTree.getDataResponse", windowId: message.windowId, content: message.content, baseURI: message.baseURI });
+			browser.tabs.sendMessage(message.tabId, { method: "FrameTree.getDataResponse", windowId: message.windowId, content: message.content, baseURI: message.baseURI, emptyStyleRulesText: message.emptyStyleRulesText });
 		}
 	});
 

lib/frame-tree/content/frame-tree.js

@@ -49,6 +49,8 @@ this.FrameTree = this.FrameTree || (() => {
 				windowId: message.windowId,
 				tabId: message.tabId,
 				content: getDoctype(document) + document.documentElement.outerHTML,
+				emptyStyleRulesText: getEmptyStyleRulesText(document),
+				canvasData: getCanvasData(document),
 				baseURI: document.baseURI,
 				title: document.title
 			}).catch(() => {/* ignored */ });
@@ -159,7 +161,9 @@ this.FrameTree = this.FrameTree || (() => {
 					if (message.method == "getDataRequest" && message.windowId == frameWinId) {
 						topWindow.removeEventListener("message", onMessage, false);
 						const content = getDoctype(frameDoc) + frameDoc.documentElement.outerHTML;
-						top.postMessage(MESSAGE_PREFIX + "::" + JSON.stringify({ method: "getDataResponse", windowId: message.windowId, content, baseURI: frameDoc.baseURI, title: document.title }), "*");
+						const emptyStyleRulesText = getEmptyStyleRulesText(frameDoc);
+						const canvasData = getCanvasData(frameDoc);
+						top.postMessage(MESSAGE_PREFIX + "::" + JSON.stringify({ method: "getDataResponse", windowId: message.windowId, content, baseURI: frameDoc.baseURI, title: document.title, emptyStyleRulesText, canvasData }), "*");
 					}
 				}
 			}
@@ -174,6 +178,8 @@ this.FrameTree = this.FrameTree || (() => {
 		frameData.content = message.content;
 		frameData.baseURI = message.baseURI;
 		frameData.title = message.title;
+		frameData.emptyStyleRulesText = message.emptyStyleRulesText;
+		frameData.canvasData = message.canvasData;
 		dataRequestCallbacks.get(message.windowId)(message);
 	}
 
@@ -197,4 +203,30 @@ this.FrameTree = this.FrameTree || (() => {
 		return "";
 	}
 
+	function getEmptyStyleRulesText(doc) {
+		if (doc) {
+			const textData = [];
+			doc.querySelectorAll("style").forEach(styleElement => {
+				if (!styleElement.textContent) {
+					textData.push(Array.from(styleElement.sheet.cssRules).map(rule => rule.cssText).join("\n"));
+				}
+			});
+			return textData;
+		}
+	}
+
+	function getCanvasData(doc) {
+		if (doc) {
+			const canvasData = [];
+			doc.querySelectorAll("canvas").forEach(canvasElement => {
+				try {
+					canvasData.push({ dataURI: canvasElement.toDataURL("image/png", ""), width: canvasElement.clientWidth, height: canvasElement.clientHeight });
+				} catch (error) {
+					canvasData.push(null);
+				}
+			});
+			return canvasData;
+		}
+	}
+
 })();

lib/single-file/single-file-core.js

@@ -490,11 +490,11 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 		}
 
 		replaceEmptyStyles() {
-			if (this.options.emptyStylesRulesText) {
+			if (this.options.emptyStyleRulesText) {
 				let indexStyle = 0;
 				this.doc.querySelectorAll("style").forEach(styleElement => {
 					if (!styleElement.textContent) {
-						styleElement.textContent = this.options.emptyStylesRulesText[indexStyle];
+						styleElement.textContent = this.options.emptyStyleRulesText[indexStyle];
 						indexStyle++;
 					}
 				});
@@ -564,6 +564,8 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 							options.windowId = frameWindowId;
 							if (frameData.content) {
 								options.content = frameData.content;
+								options.canvasData = frameData.canvasData;
+								options.emptyStyleRulesText = frameData.emptyStyleRulesText;
 								frameData.processor = new PageProcessor(options);
 								frameData.frameElement = frameElement;
 								await frameData.processor.loadPage();