single-file-core 1.3.14 → 1.3.16

package/core/helper.js

@@ -82,6 +82,7 @@ const crypto = globalThis.crypto;
 const TextEncoder = globalThis.TextEncoder;
 const Blob = globalThis.Blob;
 const CustomEvent = globalThis.CustomEvent;
+const MutationObserver = globalThis.MutationObserver;
 
 export {
 	initUserScriptHandler,
@@ -135,6 +136,7 @@ function initUserScriptHandler() {
 			await promiseResponse;
 		}
 	});
+	new MutationObserver(initUserScriptHandler).observe(globalThis.document, { childList: true });
 }
 
 function initDoc(doc) {

package/core/index.js

@@ -473,13 +473,20 @@ class Processor {
 		this.doc = util.parseDocContent(pageContent, this.baseURI);
 		if (this.options.saveRawPage) {
 			let charset;
-			this.doc.querySelectorAll("meta[charset], meta[http-equiv=\"content-type\"]").forEach(element => {
-				const charsetDeclaration = element.content.split(";")[1];
-				if (charsetDeclaration && !charset) {
-					charset = charsetDeclaration.split("=")[1].trim().toLowerCase();
+			this.doc.querySelectorAll("meta[charset]").forEach(element => {
+				if (!charset) {
+					charset = element.getAttribute("charset").trim().toLowerCase();
 				}
 			});
-			if (charset && content.charset && charset.toLowerCase() != content.charset.toLowerCase()) {
+			if (!charset) {
+				this.doc.querySelectorAll("meta[http-equiv=\"content-type\"]").forEach(element => {
+					const charsetDeclaration = element.content.split(";")[1];
+					if (charsetDeclaration && !charset) {
+						charset = charsetDeclaration.split("=")[1].trim().toLowerCase();
+					}
+				});
+			}
+			if (charset && content.charset && charset != content.charset.toLowerCase()) {
 				return this.loadPage(pageContent, charset);
 			}
 		}
@@ -857,7 +864,7 @@ class Processor {
 		this.stats.set("discarded", "objects", objectElements.length);
 		this.stats.set("processed", "objects", objectElements.length);
 		objectElements.forEach(element => element.remove());
-		const replacedAttributeValue = this.doc.querySelectorAll("link[rel~=preconnect], link[rel~=prerender], link[rel~=dns-prefetch], link[rel~=preload], link[rel~=manifest], link[rel~=prefetch]");
+		const replacedAttributeValue = this.doc.querySelectorAll("link[rel~=preconnect], link[rel~=prerender], link[rel~=dns-prefetch], link[rel~=preload], link[rel~=manifest], link[rel~=prefetch], link[rel~=modulepreload]");
 		replacedAttributeValue.forEach(element => {
 			const relValue = element
 				.getAttribute("rel")
@@ -1223,6 +1230,7 @@ class Processor {
 			options.includeInfobar = false;
 			options.saveFilenameTemplateData = false;
 			options.selected = false;
+			options.embeddedImage = null;
 			options.url = frameData.baseURI;
 			options.windowId = frameWindowId;
 			if (frameData.content) {

package/core/lib/processor-helper.js

@@ -394,7 +394,7 @@ function getProcessorHelperClass(utilInstance) {
 		}
 
 		setMetaCSP(metaElement) {
-			metaElement.content = "default-src 'none'; font-src 'self' data: blob:; img-src 'self' data: blob:; style-src 'self' 'unsafe-inline' data: blob:; frame-src 'self' data: blob:; media-src 'self' data: blob:; script-src 'self' 'unsafe-inline' data: blob:; object-src 'self' data: blob:;";
+			metaElement.content = "default-src 'none'; connect-src 'self'; font-src 'self' data: blob:; img-src 'self' data: blob:; style-src 'self' 'unsafe-inline' data: blob:; frame-src 'self' data: blob:; media-src 'self' data: blob:; script-src 'self' 'unsafe-inline' data: blob:; object-src 'self' data: blob:;";
 		}
 
 		removeUnusedStylesheets() {

package/modules/template-formatter.js

@@ -26,7 +26,7 @@
 import { parse } from "./template-parser.js";
 import { getContentSize, digest } from "./../core/helper.js";
 
-const Blob = globalThis.Blob; 
+const Blob = globalThis.Blob;
 const FileReader = globalThis.FileReader;
 const URL = globalThis.URL;
 const URLSearchParams = globalThis.URLSearchParams;
@@ -16991,6 +16991,10 @@ async function evalTemplate(template = "", options, content, doc, dontReplaceSla
 		"length": value => value.length,
 		"url-search-name": (index = 0) => params[index] && params[index][0],
 		"url-search-value": (index = 0) => params[index] && params[index][1],
+		"url-search-named-value": name => {
+			const param = params.find(param => param[0] == name);
+			return (param && param[1]);
+		},
 		"url-search": name => {
 			const param = params.find(param => param[0] == name);
 			return (param && param[1]);
@@ -17030,6 +17034,9 @@ async function evalTemplate(template = "", options, content, doc, dontReplaceSla
 			const fn = functions[name];
 			if (fn) {
 				argument = argument.replace(/\\\\(.)/g, "$1");
+				if (!optionalArguments) {
+					optionalArguments = [];
+				}
 				optionalArguments = optionalArguments
 					.map(argument => argument.replace(/\\\\(.)/g, "$1"))
 					.filter(argument => argument != undefined && argument != null && argument != "");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "single-file-core",
-  "version": "1.3.14",
+  "version": "1.3.16",
   "description": "SingleFile Core",
   "author": "Gildas Lormeau",
   "license": "AGPL-3.0-or-later",

package/processors/compression/compression-display.js

@@ -31,15 +31,6 @@ async function display(document, docContent, { disableFramePointerEvents } = {})
 	docContent = docContent.replace(/<noscript/gi, "<template disabled-noscript");
 	docContent = docContent.replaceAll(/<\/noscript/gi, "</template");
 	const doc = (new DOMParser()).parseFromString(docContent, "text/html");
-	if (doc.doctype) {
-		if (document.doctype) {
-			document.replaceChild(doc.doctype, document.doctype);
-		} else {
-			document.insertBefore(doc.doctype, document.documentElement);
-		}
-	} else if (document.doctype) {
-		document.doctype.remove();
-	}
 	if (disableFramePointerEvents) {
 		doc.querySelectorAll("iframe").forEach(element => {
 			const pointerEvents = "pointer-events";
@@ -47,7 +38,10 @@ async function display(document, docContent, { disableFramePointerEvents } = {})
 			element.style.setProperty(pointerEvents, "none", "important");
 		});
 	}
-	document.replaceChild(document.importNode(doc.documentElement, true), document.documentElement);
+	document.open();
+	document.write(getDoctypeString(doc));
+	document.write(doc.documentElement.outerHTML);
+	document.close();
 	document.querySelectorAll("template[disabled-noscript]").forEach(element => {
 		const noscriptElement = document.createElement("noscript");
 		element.removeAttribute("disabled-noscript");
@@ -57,22 +51,22 @@ async function display(document, docContent, { disableFramePointerEvents } = {})
 	});
 	document.documentElement.setAttribute("data-sfz", "");
 	document.querySelectorAll("link[rel*=icon]").forEach(element => element.parentElement.replaceChild(element, element));
-	document.open = document.write = document.close = () => { };
-	for (let element of Array.from(document.querySelectorAll("script"))) {
-		await new Promise(resolve => {
-			const scriptElement = document.createElement("script");
-			Array.from(element.attributes).forEach(attribute => scriptElement.setAttribute(attribute.name, attribute.value));
-			const async = element.getAttribute("async") == "" || element.getAttribute("async") == "async";
-			if (element.textContent) {
-				scriptElement.textContent = element.textContent;
-			} else if (!async) {
-				scriptElement.addEventListener("load", resolve);
-				scriptElement.addEventListener("error", () => resolve());
-			}
-			element.parentElement.replaceChild(scriptElement, element);
-			if (element.textContent || async) {
-				resolve();
-			}
-		});
+
+	function getDoctypeString(doc) {
+		const docType = doc.doctype;
+		let docTypeString = "";
+		if (docType) {
+			docTypeString = "<!DOCTYPE " + docType.nodeName;
+			if (docType.publicId) {
+				docTypeString += " PUBLIC \"" + docType.publicId + "\"";
+				if (docType.systemId)
+					docTypeString += " \"" + docType.systemId + "\"";
+			} else if (docType.systemId)
+				docTypeString += " SYSTEM \"" + docType.systemId + "\"";
+			if (docType.internalSubset)
+				docTypeString += " [" + docType.internalSubset + "]";
+			docTypeString += "> ";
+		}
+		return docTypeString;
 	}
-}
+}

package/processors/compression/compression.js

@@ -47,12 +47,30 @@ const EXTRA_DATA_TAGS = [
 	["<xmp>", "</xmp>"],
 	["<plaintext>", "</plaintext>"]
 ];
+const EMBEDDED_IMAGE_DATA_TAGS = [
+	["<!--", "-->"],
+	...EXTRA_DATA_TAGS,
+];
 const EXTRA_DATA_REGEXPS = [
 	[/<\/noscript>/i],
 	[/<\/script>/i],
 	[/<\/xmp>/i],
 	[/<\/plaintext>/i]
 ];
+const EMBEDDED_IMAGE_DATA_REGEXPS = [
+	/-->/i,
+	...EXTRA_DATA_REGEXPS,
+];
+const CRC32_TABLE = new Uint32Array(256).map((_, indexTable) => {
+	let crc = indexTable;
+	for (let indexBits = 0; indexBits < 8; indexBits++) {
+		crc = crc & 1 ? 0xEDB88320 ^ (crc >>> 1) : crc >>> 1;
+	}
+	return crc;
+});
+const PNG_IEND_LENGTH = 12;
+const PNG_SIGNATURE_LENGTH = 8;
+const PNG_IHDR_LENGTH = 25;
 
 const browser = globalThis.browser;
 
@@ -70,7 +88,29 @@ async function process(pageData, options, lastModDate = new Date()) {
 	}
 	const zipDataWriter = new Uint8ArrayWriter();
 	zipDataWriter.init();
-	let extraDataOffset, extraData;
+	zipDataWriter.writable.size = 0;
+	let extraDataOffset, extraData, embeddedImageDataOffset, endTag;
+	if (options.embeddedImage) {
+		const embeddedImageData = options.embeddedImage.slice(PNG_SIGNATURE_LENGTH + PNG_IHDR_LENGTH, options.embeddedImage.length - PNG_IEND_LENGTH);
+		await writeData(zipDataWriter.writable, options.embeddedImage.slice(0, PNG_SIGNATURE_LENGTH + PNG_IHDR_LENGTH));
+		if (options.selfExtractingArchive) {
+			const embeddedImageText = embeddedImageData.reduce((text, charCode) => text + String.fromCharCode(charCode), "");
+			const tagIndex = EMBEDDED_IMAGE_DATA_REGEXPS.findIndex(test => !embeddedImageText.match(test));
+			let startTag;
+			[startTag, endTag] = tagIndex == -1 ? ["", ""] : EMBEDDED_IMAGE_DATA_TAGS[tagIndex];
+			const html = getHTMLStartData(pageData, options) + startTag;
+			const hmtlData = new Uint8Array([...getLength(html.length + 4), ...new Uint8Array([0x74, 0x54, 0x58, 0x74, 0x50, 0x4e, 0x47, 0]), ...new TextEncoder().encode(html)]);
+			await writeData(zipDataWriter.writable, hmtlData);
+			await writeData(zipDataWriter.writable, getCRC32(hmtlData, 4));
+		}
+		await writeData(zipDataWriter.writable, embeddedImageData);
+		await writeData(zipDataWriter.writable, new Uint8Array(4));
+		embeddedImageDataOffset = zipDataWriter.offset;
+		await writeData(zipDataWriter.writable, new Uint8Array([0x74, 0x54, 0x58, 0x74, 0x5a, 0x49, 0x50, 0]));
+		if (options.selfExtractingArchive) {
+			await writeData(zipDataWriter.writable, new TextEncoder().encode(endTag));
+		}
+	}
 	if (options.selfExtractingArchive) {
 		extraDataOffset = await prependHTMLData(pageData, zipDataWriter, script, options);
 	}
@@ -92,7 +132,7 @@ async function process(pageData, options, lastModDate = new Date()) {
 					return findExtraDataTags(textContent, pageData, options, lastModDate);
 				}
 			}
-			for (let index = 0; index < data.length; index++) {
+			for (let index = startOffset; index < data.length; index++) {
 				if (data[index] == 13) {
 					if (data[index + 1] == 10) {
 						insertionsCRLF.push(index - startOffset);
@@ -110,14 +150,14 @@ async function process(pageData, options, lastModDate = new Date()) {
 				pageContent += "-->";
 			}
 		}
-		const endTags = options.preventAppendedData ? "" : "</body></html>";
+		const endTags = options.preventAppendedData || options.embeddedImage ? "" : "</body></html>";
 		if (options.extractDataFromPage) {
 			const payload = await Promise.all([
 				arrayToBase64(insertionsCRLF),
 				arrayToBase64(substitutionsLF)
 			]);
 			extraData = "<sfz-extra-data>" + payload.join(",") + "</sfz-extra-data>";
-			if (options.preventAppendedData || extraData.length > 65535 - endTags.length) {
+			if (options.preventAppendedData || extraData.length > 65535 - endTags.length - (options.embeddedImage ? PNG_IEND_LENGTH : 0)) {
 				if (!options.extraDataSize) {
 					options.extraDataSize = Math.floor(extraData.length * 1.001);
 					return process(pageData, options, lastModDate);
@@ -132,9 +172,7 @@ async function process(pageData, options, lastModDate = new Date()) {
 			}
 		}
 		pageContent += endTags;
-		if (pageContent) {
-			await writeData(zipDataWriter.writable, (new TextEncoder()).encode(pageContent));
-		}
+		await writeData(zipDataWriter.writable, (new TextEncoder()).encode(pageContent));
 	}
 	await zipDataWriter.writable.close();
 	const pageContent = await zipDataWriter.getData();
@@ -147,31 +185,49 @@ async function process(pageData, options, lastModDate = new Date()) {
 			return process(pageData, options, lastModDate);
 		}
 	}
-	return new Blob([pageContent], { type: "application/octet-stream" });
+	if (options.embeddedImage) {
+		pageContent.set(getLength(zipDataWriter.offset - embeddedImageDataOffset - 4), embeddedImageDataOffset - 4);
+		return new Blob([
+			pageContent,
+			getCRC32(pageContent, embeddedImageDataOffset),
+			options.embeddedImage.slice(options.embeddedImage.length - PNG_IEND_LENGTH)
+		], { type: "application/octet-stream" });
+	} else {
+		return new Blob([pageContent], { type: "application/octet-stream" });
+	}
+}
+
+function getCRC32(data, indexData = 0) {
+	const crcArray = new Uint8Array(4);
+	let crc = -1;
+	for (; indexData < data.length; indexData++) {
+		crc = (crc >>> 8) ^ CRC32_TABLE[(crc ^ data[indexData]) & 0xff];
+	}
+	crc ^= -1;
+	setUint32(crcArray, crc);
+	return crcArray;
+}
+
+function getLength(length) {
+	const lengthArray = new Uint8Array(4);
+	setUint32(lengthArray, length);
+	return lengthArray;
+}
+
+function setUint32(data, value) {
+	data[0] = value >> 24;
+	data[1] = value >> 16;
+	data[2] = value >> 8;
+	data[3] = value;
 }
 
 async function prependHTMLData(pageData, zipDataWriter, script, options) {
 	let pageContent = "";
-	if (options.includeBOM && !options.extractDataFromPage) {
-		pageContent += "\ufeff";
+	if (!options.embeddedImage) {
+		pageContent += getHTMLStartData(pageData, options);
 	}
-	const charset = options.extractDataFromPage ? "windows-1252" : "utf-8";
-	const pageDataTitle = pageData.title.replace(/</g, "&lt;").replace(/>/g, "&gt;") || "";
-	const title = options.extractDataFromPage ? "" : pageDataTitle;
-	pageContent += pageData.doctype + "<html data-sfz><meta charset=" + charset + "><title>" + title + "</title>";
-	if (options.insertCanonicalLink) {
-		pageContent += "<link rel=canonical href=\"" + options.url + "\">";
-	}
-	if (options.insertMetaNoIndex) {
-		pageContent += "<meta name=robots content=noindex>";
-	}
-	if (pageData.viewport) {
-		pageContent += "<meta name=\"viewport\" content=" + JSON.stringify(pageData.viewport) + ">";
-	}
-	pageContent += "<style>@keyframes display-wait-message{0%{opacity:0}100%{opacity:1}}</style>";
-	pageContent += "<body hidden>";
-	pageContent += "<div id='sfz-wait-message'>Please wait...</div>";
-	pageContent += "<div id='sfz-error-message'><strong>Error</strong>: Cannot open the page from the filesystem.";
+	pageContent += "<div id=sfz-wait-message>Please wait...</div>";
+	pageContent += "<div id=sfz-error-message><strong>Error</strong>: Cannot open the page from the filesystem.";
 	pageContent += "<ul style='line-height:20px;'>";
 	pageContent += "<li style='margin-bottom:10px'><strong>Chrome</strong>: Install <a href='https://chrome.google.com/webstore/detail/singlefile/mpiodijhokgodhhofbcjdecpffjipkle'>SingleFile</a> and enable the option \"Allow access to file URLs\" in the details page of the extension (chrome://extensions/?id=mpiodijhokgodhhofbcjdecpffjipkle).</li>";
 	pageContent += "<li style='margin-bottom:10px'><strong>Microsoft Edge</strong>: Install <a href='https://microsoftedge.microsoft.com/addons/detail/singlefile/efnbkdcfmcmnhlkaijjjmhjjgladedno'>SingleFile</a> and enable the option \"Allow access to file URLs\" in the details page of the extension (edge://extensions/?id=efnbkdcfmcmnhlkaijjjmhjjgladedno).</li>";
@@ -181,7 +237,7 @@ async function prependHTMLData(pageData, zipDataWriter, script, options) {
 		doc.body.querySelectorAll("style, script, noscript").forEach(element => element.remove());
 		let textBody = "";
 		if (options.extractDataFromPage) {
-			textBody += pageDataTitle + "\n\n";
+			textBody += getPageTitle(pageData) + "\n\n";
 		}
 		textBody += doc.body.innerText;
 		doc.body.querySelectorAll("single-file-note").forEach(node => {
@@ -218,6 +274,32 @@ async function prependHTMLData(pageData, zipDataWriter, script, options) {
 	return extraDataOffset;
 }
 
+function getHTMLStartData(pageData, options) {
+	let pageContent = "";
+	if (options.includeBOM && !options.extractDataFromPage && !options.embeddedImage) {
+		pageContent += "\ufeff";
+	}
+	const charset = options.extractDataFromPage ? "windows-1252" : "utf-8";
+	const title = options.extractDataFromPage ? "" : getPageTitle(pageData);
+	pageContent += (options.embeddedImage ? "" : pageData.doctype) + "<html data-sfz><meta charset=" + charset + "><title>" + title + "</title>";
+	if (options.insertCanonicalLink) {
+		pageContent += "<link rel=canonical href=\"" + options.url + "\">";
+	}
+	if (options.insertMetaNoIndex) {
+		pageContent += "<meta name=robots content=noindex>";
+	}
+	if (pageData.viewport) {
+		pageContent += "<meta name=viewport content=" + JSON.stringify(pageData.viewport) + ">";
+	}
+	pageContent += "<style>@keyframes display-wait-message{0%{opacity:0}100%{opacity:1}};body{color:transparent};div{color:initial}</style>";
+	pageContent += "<body hidden>";
+	return pageContent;
+}
+
+function getPageTitle(pageData) {
+	return pageData.title.replace(/</g, "&lt;").replace(/>/g, "&gt;") || "";
+}
+
 function findExtraDataTags(textContent, pageData, options, lastModDate, indexExtractDataFromPageTags = 0) {
 	const matchEndTag = textContent.match(EXTRA_DATA_REGEXPS[indexExtractDataFromPageTags]);
 	if (matchEndTag) {
@@ -244,7 +326,7 @@ async function arrayToBase64(data) {
 async function writeData(writable, array) {
 	const streamWriter = writable.getWriter();
 	await streamWriter.ready;
-	writable.size = array.length;
+	writable.size += array.length;
 	await streamWriter.write(array);
 	streamWriter.releaseLock();
 }
@@ -300,6 +382,7 @@ async function getContent() {
 		[8212, 151], [732, 152], [8482, 153], [353, 154], [8250, 155], [339, 156], [382, 158], [376, 159]
 	]);
 	const xhr = new XMLHttpRequest();
+	document.body.querySelectorAll("meta, style").forEach(element => document.head.appendChild(element));
 	xhr.responseType = "blob";
 	xhr.open("GET", "");
 	return new Promise((resolve, reject) => {
@@ -335,8 +418,10 @@ async function getContent() {
 		if (zipDataElement) {
 			let dataNode = zipDataElement.nextSibling;
 			if (dataNode) {
-				if (dataNode.nodeType == Node.TEXT_NODE) {
+				if (dataNode.nodeType == Node.TEXT_NODE && dataNode.nextSibling) {
 					dataNode = dataNode.nextSibling;
+				} else {
+					dataNode = zipDataElement.previousSibling;
 				}
 			} else {
 				dataNode = zipDataElement.previousSibling;

package/processors/frame-tree/content/content-frame-tree.js

@@ -61,11 +61,11 @@ const WINDOW_ID_SEPARATOR = ".";
 const TOP_WINDOW = globalThis.window == globalThis.top;
 
 const browser = globalThis.browser;
-const addEventListener = (type, listener, options) => globalThis.addEventListener(type, listener, options);
 const top = globalThis.top;
 const MessageChannel = globalThis.MessageChannel;
 const document = globalThis.document;
 const JSON = globalThis.JSON;
+const MutationObserver = globalThis.MutationObserver;
 
 let sessions = globalThis.sessions;
 if (!sessions) {
@@ -87,33 +87,8 @@ if (TOP_WINDOW) {
 		});
 	}
 }
-addEventListener("message", async event => {
-	if (typeof event.data == "string" && event.data.startsWith(MESSAGE_PREFIX)) {
-		event.preventDefault();
-		event.stopPropagation();
-		const message = JSON.parse(event.data.substring(MESSAGE_PREFIX.length));
-		if (message.method == INIT_REQUEST_MESSAGE) {
-			if (event.source) {
-				sendMessage(event.source, { method: ACK_INIT_REQUEST_MESSAGE, windowId: message.windowId, sessionId: message.sessionId });
-			}
-			if (!TOP_WINDOW) {
-				globalThis.stop();
-				if (message.options.loadDeferredImages) {
-					lazy.process(message.options);
-				}
-				await initRequestAsync(message);
-			}
-		} else if (message.method == ACK_INIT_REQUEST_MESSAGE) {
-			clearFrameTimeout("requestTimeouts", message.sessionId, message.windowId);
-			createFrameResponseTimeout(message.sessionId, message.windowId);
-		} else if (message.method == CLEANUP_REQUEST_MESSAGE) {
-			cleanupRequest(message);
-		} else if (message.method == INIT_RESPONSE_MESSAGE && sessions.get(message.sessionId)) {
-			const port = event.ports[0];
-			port.onmessage = event => initResponse(event.data);
-		}
-	}
-}, true);
+init();
+new MutationObserver(init).observe(document, { childList: true });
 
 export {
 	getAsync,
@@ -123,6 +98,36 @@ export {
 	TIMEOUT_INIT_REQUEST_MESSAGE
 };
 
+function init() {
+	globalThis.addEventListener("message", async event => {
+		if (typeof event.data == "string" && event.data.startsWith(MESSAGE_PREFIX)) {
+			event.preventDefault();
+			event.stopPropagation();
+			const message = JSON.parse(event.data.substring(MESSAGE_PREFIX.length));
+			if (message.method == INIT_REQUEST_MESSAGE) {
+				if (event.source) {
+					sendMessage(event.source, { method: ACK_INIT_REQUEST_MESSAGE, windowId: message.windowId, sessionId: message.sessionId });
+				}
+				if (!TOP_WINDOW) {
+					globalThis.stop();
+					if (message.options.loadDeferredImages) {
+						lazy.process(message.options);
+					}
+					await initRequestAsync(message);
+				}
+			} else if (message.method == ACK_INIT_REQUEST_MESSAGE) {
+				clearFrameTimeout("requestTimeouts", message.sessionId, message.windowId);
+				createFrameResponseTimeout(message.sessionId, message.windowId);
+			} else if (message.method == CLEANUP_REQUEST_MESSAGE) {
+				cleanupRequest(message);
+			} else if (message.method == INIT_RESPONSE_MESSAGE && sessions.get(message.sessionId)) {
+				const port = event.ports[0];
+				port.onmessage = event => initResponse(event.data);
+			}
+		}
+	}, true);
+}
+
 function getAsync(options) {
 	const sessionId = getNewSessionId();
 	options = JSON.parse(JSON.stringify(options));

package/processors/hooks/content/content-hooks-frames-web.js

@@ -59,8 +59,6 @@
 		featureSettings: "font-feature-settings"
 	};
 
-	const addEventListener = (type, listener, options) => globalThis.addEventListener(type, listener, options);
-	const dispatchEvent = event => { try { globalThis.dispatchEvent(event); } catch (error) {  /* ignored */ } };
 	const fetch = (url, options) => globalThis.fetch(url, options);
 	const CustomEvent = globalThis.CustomEvent;
 	const document = globalThis.document;
@@ -71,13 +69,83 @@
 	const FileReader = globalThis.FileReader;
 	const Blob = globalThis.Blob;
 	const JSON = globalThis.JSON;
+	const MutationObserver = globalThis.MutationObserver;
 
 	const observers = new Map();
 	const observedElements = new Map();
 
 	let dispatchScrollEvent;
-	addEventListener(LOAD_DEFERRED_IMAGES_START_EVENT, () => loadDeferredImagesStart());
-	addEventListener(LOAD_DEFERRED_IMAGES_KEEP_ZOOM_LEVEL_START_EVENT, () => loadDeferredImagesStart(true));
+
+	init();
+	new MutationObserver(init).observe(document, { childList: true });
+
+	function init() {
+		document.addEventListener(LOAD_DEFERRED_IMAGES_START_EVENT, () => loadDeferredImagesStart());
+		document.addEventListener(LOAD_DEFERRED_IMAGES_KEEP_ZOOM_LEVEL_START_EVENT, () => loadDeferredImagesStart(true));
+		document.addEventListener(LOAD_DEFERRED_IMAGES_END_EVENT, () => loadDeferredImagesEnd());
+		document.addEventListener(LOAD_DEFERRED_IMAGES_KEEP_ZOOM_LEVEL_END_EVENT, () => loadDeferredImagesEnd(true));
+		document.addEventListener(LOAD_DEFERRED_IMAGES_RESET_EVENT, resetScreenSize);
+		document.addEventListener(LOAD_DEFERRED_IMAGES_RESET_ZOOM_LEVEL_EVENT, () => {
+			const transform = document.documentElement.style.getPropertyValue("-sf-transform");
+			const transformPriority = document.documentElement.style.getPropertyPriority("-sf-transform");
+			const transformOrigin = document.documentElement.style.getPropertyValue("-sf-transform-origin");
+			const transformOriginPriority = document.documentElement.style.getPropertyPriority("-sf-transform-origin");
+			const minHeight = document.documentElement.style.getPropertyValue("-sf-min-height");
+			const minHeightPriority = document.documentElement.style.getPropertyPriority("-sf-min-height");
+			document.documentElement.style.setProperty("transform", transform, transformPriority);
+			document.documentElement.style.setProperty("transform-origin", transformOrigin, transformOriginPriority);
+			document.documentElement.style.setProperty("min-height", minHeight, minHeightPriority);
+			document.documentElement.style.removeProperty("-sf-transform");
+			document.documentElement.style.removeProperty("-sf-transform-origin");
+			document.documentElement.style.removeProperty("-sf-min-height");
+			resetScreenSize();
+		});
+		document.addEventListener(DISPATCH_SCROLL_START_EVENT, () => { dispatchScrollEvent = true; });
+		document.addEventListener(DISPATCH_SCROLL_END_EVENT, () => { dispatchScrollEvent = false; });
+		document.addEventListener(BLOCK_COOKIES_START_EVENT, () => {
+			try {
+				document.__defineGetter__("cookie", () => { throw new Error("document.cookie temporary blocked by SingleFile"); });
+			} catch (error) {
+				// ignored
+			}
+		});
+		document.addEventListener(BLOCK_COOKIES_END_EVENT, () => { delete document.cookie; });
+		document.addEventListener(BLOCK_STORAGE_START_EVENT, () => {
+			if (!globalThis._singleFile_localStorage) {
+				globalThis._singleFile_localStorage = globalThis.localStorage;
+				globalThis.__defineGetter__("localStorage", () => { throw new Error("localStorage temporary blocked by SingleFile"); });
+			}
+			if (!globalThis._singleFile_indexedDB) {
+				globalThis._singleFile_indexedDB = globalThis.indexedDB;
+				globalThis.__defineGetter__("indexedDB", () => { throw new Error("indexedDB temporary blocked by SingleFile"); });
+			}
+		});
+		document.addEventListener(BLOCK_STORAGE_END_EVENT, () => {
+			if (globalThis._singleFile_localStorage) {
+				delete globalThis.localStorage;
+				globalThis.localStorage = globalThis._singleFile_localStorage;
+				delete globalThis._singleFile_localStorage;
+			}
+			if (!globalThis._singleFile_indexedDB) {
+				delete globalThis.indexedDB;
+				globalThis.indexedDB = globalThis._singleFile_indexedDB;
+				delete globalThis._singleFile_indexedDB;
+			}
+		});
+		document.addEventListener(FETCH_REQUEST_EVENT, async event => {
+			document.dispatchEvent(new CustomEvent(FETCH_ACK_EVENT));
+			const { url, options } = JSON.parse(event.detail);
+			let detail;
+			try {
+				const response = await fetch(url, options);
+				detail = { url, response: await response.arrayBuffer(), headers: [...response.headers], status: response.status };
+			} catch (error) {
+				detail = { url, error: error && error.toString() };
+			}
+			document.dispatchEvent(new CustomEvent(FETCH_RESPONSE_EVENT, { detail }));
+		});
+		document.addEventListener(GET_ADOPTED_STYLESHEETS_REQUEST_EVENT, getAdoptedStylesheetsListener);
+	}
 
 	function loadDeferredImagesStart(keepZoomLevel) {
 		const scrollingElement = document.scrollingElement || document.documentElement;
@@ -121,11 +189,11 @@
 					const result = new Image(...arguments);
 					result.__defineSetter__("src", value => {
 						image.src = value;
-						dispatchEvent(new CustomEvent(LOAD_IMAGE_EVENT, { detail: image.src }));
+						document.dispatchEvent(new CustomEvent(LOAD_IMAGE_EVENT, { detail: image.src }));
 					});
 					result.__defineGetter__("src", () => image.src);
 					result.__defineSetter__("srcset", value => {
-						dispatchEvent(new CustomEvent(LOAD_IMAGE_EVENT));
+						document.dispatchEvent(new CustomEvent(LOAD_IMAGE_EVENT));
 						image.srcset = value;
 					});
 					result.__defineGetter__("srcset", () => image.srcset);
@@ -137,7 +205,7 @@
 						result.__defineGetter__("decode", () => () => image.decode());
 					}
 					image.onload = image.onloadend = image.onerror = event => {
-						dispatchEvent(new CustomEvent(IMAGE_LOADED_EVENT, { detail: image.src }));
+						document.dispatchEvent(new CustomEvent(IMAGE_LOADED_EVENT, { detail: image.src }));
 						result.dispatchEvent(new Event(event.type, event));
 					};
 					return result;
@@ -191,32 +259,13 @@
 							const time = 0;
 							return { target, intersectionRatio, boundingClientRect, intersectionRect: boundingClientRect, isIntersecting, rootBounds, time };
 						});
-						observer.callback(params, intersectionObserver);
+						observer.callback.call(intersectionObserver, params, intersectionObserver);
 					}
 				});
 			}
 		}
 	}
 
-	addEventListener(LOAD_DEFERRED_IMAGES_END_EVENT, () => loadDeferredImagesEnd());
-	addEventListener(LOAD_DEFERRED_IMAGES_KEEP_ZOOM_LEVEL_END_EVENT, () => loadDeferredImagesEnd(true));
-	addEventListener(LOAD_DEFERRED_IMAGES_RESET_EVENT, resetScreenSize);
-	addEventListener(LOAD_DEFERRED_IMAGES_RESET_ZOOM_LEVEL_EVENT, () => {
-		const transform = document.documentElement.style.getPropertyValue("-sf-transform");
-		const transformPriority = document.documentElement.style.getPropertyPriority("-sf-transform");
-		const transformOrigin = document.documentElement.style.getPropertyValue("-sf-transform-origin");
-		const transformOriginPriority = document.documentElement.style.getPropertyPriority("-sf-transform-origin");
-		const minHeight = document.documentElement.style.getPropertyValue("-sf-min-height");
-		const minHeightPriority = document.documentElement.style.getPropertyPriority("-sf-min-height");
-		document.documentElement.style.setProperty("transform", transform, transformPriority);
-		document.documentElement.style.setProperty("transform-origin", transformOrigin, transformOriginPriority);
-		document.documentElement.style.setProperty("min-height", minHeight, minHeightPriority);
-		document.documentElement.style.removeProperty("-sf-transform");
-		document.documentElement.style.removeProperty("-sf-transform-origin");
-		document.documentElement.style.removeProperty("-sf-min-height");
-		resetScreenSize();
-	});
-
 	function loadDeferredImagesEnd(keepZoomLevel) {
 		document.querySelectorAll("[" + LAZY_LOAD_ATTRIBUTE + "]").forEach(element => {
 			element.loading = "lazy";
@@ -256,82 +305,25 @@
 		delete screen.width;
 	}
 
-	addEventListener(DISPATCH_SCROLL_START_EVENT, () => {
-		dispatchScrollEvent = true;
-	});
-
-	addEventListener(DISPATCH_SCROLL_END_EVENT, () => {
-		dispatchScrollEvent = false;
-	});
-
-	addEventListener(BLOCK_COOKIES_START_EVENT, () => {
-		try {
-			document.__defineGetter__("cookie", () => { throw new Error("document.cookie temporary blocked by SingleFile"); });
-		} catch (error) {
-			// ignored
-		}
-	});
-
-	addEventListener(BLOCK_COOKIES_END_EVENT, () => {
-		delete document.cookie;
-	});
-
-	addEventListener(BLOCK_STORAGE_START_EVENT, () => {
-		if (!globalThis._singleFile_localStorage) {
-			globalThis._singleFile_localStorage = globalThis.localStorage;
-			globalThis.__defineGetter__("localStorage", () => { throw new Error("localStorage temporary blocked by SingleFile"); });
-		}
-		if (!globalThis._singleFile_indexedDB) {
-			globalThis._singleFile_indexedDB = globalThis.indexedDB;
-			globalThis.__defineGetter__("indexedDB", () => { throw new Error("indexedDB temporary blocked by SingleFile"); });
-		}
-	});
-
-	addEventListener(BLOCK_STORAGE_END_EVENT, () => {
-		if (globalThis._singleFile_localStorage) {
-			delete globalThis.localStorage;
-			globalThis.localStorage = globalThis._singleFile_localStorage;
-			delete globalThis._singleFile_localStorage;
-		}
-		if (!globalThis._singleFile_indexedDB) {
-			delete globalThis.indexedDB;
-			globalThis.indexedDB = globalThis._singleFile_indexedDB;
-			delete globalThis._singleFile_indexedDB;
-		}
-	});
-
-	addEventListener(FETCH_REQUEST_EVENT, async event => {
-		dispatchEvent(new CustomEvent(FETCH_ACK_EVENT));
-		const { url, options } = JSON.parse(event.detail);
-		let detail;
-		try {
-			const response = await fetch(url, options);
-			detail = { url, response: await response.arrayBuffer(), headers: [...response.headers], status: response.status };
-		} catch (error) {
-			detail = { url, error: error && error.toString() };
-		}
-		dispatchEvent(new CustomEvent(FETCH_RESPONSE_EVENT, { detail }));
-	});
 
-	addEventListener(GET_ADOPTED_STYLESHEETS_REQUEST_EVENT, getAdoptedStylesheetsListener);
 
 	if (globalThis.FontFace) {
 		const FontFace = globalThis.FontFace;
 		globalThis.FontFace = function () {
-			getDetailObject(...arguments).then(detail => dispatchEvent(new CustomEvent(NEW_FONT_FACE_EVENT, { detail })));
+			getDetailObject(...arguments).then(detail => document.dispatchEvent(new CustomEvent(NEW_FONT_FACE_EVENT, { detail })));
 			return new FontFace(...arguments);
 		};
 		globalThis.FontFace.prototype = FontFace.prototype;
 		globalThis.FontFace.toString = function () { return "function FontFace() { [native code] }"; };
 		const deleteFont = document.fonts.delete;
 		document.fonts.delete = function (fontFace) {
-			getDetailObject(fontFace.family).then(detail => dispatchEvent(new CustomEvent(DELETE_FONT_EVENT, { detail })));
+			getDetailObject(fontFace.family).then(detail => document.dispatchEvent(new CustomEvent(DELETE_FONT_EVENT, { detail })));
 			return deleteFont.call(document.fonts, fontFace);
 		};
 		document.fonts.delete.toString = function () { return "function delete() { [native code] }"; };
 		const clearFonts = document.fonts.clear;
 		document.fonts.clear = function () {
-			dispatchEvent(new CustomEvent(CLEAR_FONTS_EVENT));
+			document.dispatchEvent(new CustomEvent(CLEAR_FONTS_EVENT));
 			return clearFonts.call(document.fonts);
 		};
 		document.fonts.clear.toString = function () { return "function clear() { [native code] }"; };
@@ -418,9 +410,9 @@
 
 	function dispatchResizeEvent() {
 		try {
-			dispatchEvent(new UIEvent("resize"));
+			globalThis.dispatchEvent(new UIEvent("resize"));
 			if (dispatchScrollEvent) {
-				dispatchEvent(new UIEvent("scroll"));
+				globalThis.dispatchEvent(new UIEvent("scroll"));
 			}
 		} catch (error) {
 			// ignored

package/processors/hooks/content/content-hooks-frames.js

@@ -42,12 +42,11 @@ const DELETE_FONT_EVENT = "single-file-delete-font";
 const CLEAR_FONTS_EVENT = "single-file-clear-fonts";
 const FONT_FACE_PROPERTY_NAME = "_singleFile_fontFaces";
 
-const addEventListener = (type, listener, options) => globalThis.addEventListener(type, listener, options);
-const dispatchEvent = event => { try { globalThis.dispatchEvent(event); } catch (error) {  /* ignored */ } };
 const CustomEvent = globalThis.CustomEvent;
 const document = globalThis.document;
 const Document = globalThis.Document;
 const JSON = globalThis.JSON;
+const MutationObserver = globalThis.MutationObserver;
 
 let fontFaces;
 if (window[FONT_FACE_PROPERTY_NAME]) {
@@ -56,20 +55,25 @@ if (window[FONT_FACE_PROPERTY_NAME]) {
 	fontFaces = window[FONT_FACE_PROPERTY_NAME] = new Map();
 }
 
-if (document instanceof Document) {
-	addEventListener(NEW_FONT_FACE_EVENT, event => {
-		const detail = event.detail;
-		const key = Object.assign({}, detail);
-		delete key.src;
-		fontFaces.set(JSON.stringify(key), detail);
-	});
-	addEventListener(DELETE_FONT_EVENT, event => {
-		const detail = event.detail;
-		const key = Object.assign({}, detail);
-		delete key.src;
-		fontFaces.delete(JSON.stringify(key));
-	});
-	addEventListener(CLEAR_FONTS_EVENT, () => fontFaces = new Map());
+init();
+new MutationObserver(init).observe(document, { childList: true });
+
+function init() {
+	if (document instanceof Document) {
+		document.addEventListener(NEW_FONT_FACE_EVENT, event => {
+			const detail = event.detail;
+			const key = Object.assign({}, detail);
+			delete key.src;
+			fontFaces.set(JSON.stringify(key), detail);
+		});
+		document.addEventListener(DELETE_FONT_EVENT, event => {
+			const detail = event.detail;
+			const key = Object.assign({}, detail);
+			delete key.src;
+			fontFaces.delete(JSON.stringify(key));
+		});
+		document.addEventListener(CLEAR_FONTS_EVENT, () => fontFaces = new Map());
+	}
 }
 
 export {
@@ -87,42 +91,42 @@ function getFontsData() {
 
 function loadDeferredImagesStart(options) {
 	if (options.loadDeferredImagesBlockCookies) {
-		dispatchEvent(new CustomEvent(BLOCK_COOKIES_START_EVENT));
+		document.dispatchEvent(new CustomEvent(BLOCK_COOKIES_START_EVENT));
 	}
 	if (options.loadDeferredImagesBlockStorage) {
-		dispatchEvent(new CustomEvent(BLOCK_STORAGE_START_EVENT));
+		document.dispatchEvent(new CustomEvent(BLOCK_STORAGE_START_EVENT));
 	}
 	if (options.loadDeferredImagesDispatchScrollEvent) {
-		dispatchEvent(new CustomEvent(DISPATCH_SCROLL_START_EVENT));
+		document.dispatchEvent(new CustomEvent(DISPATCH_SCROLL_START_EVENT));
 	}
 	if (options.loadDeferredImagesKeepZoomLevel) {
-		dispatchEvent(new CustomEvent(LOAD_DEFERRED_IMAGES_KEEP_ZOOM_LEVEL_START_EVENT));
+		document.dispatchEvent(new CustomEvent(LOAD_DEFERRED_IMAGES_KEEP_ZOOM_LEVEL_START_EVENT));
 	} else {
-		dispatchEvent(new CustomEvent(LOAD_DEFERRED_IMAGES_START_EVENT));
+		document.dispatchEvent(new CustomEvent(LOAD_DEFERRED_IMAGES_START_EVENT));
 	}
 }
 
 function loadDeferredImagesEnd(options) {
 	if (options.loadDeferredImagesBlockCookies) {
-		dispatchEvent(new CustomEvent(BLOCK_COOKIES_END_EVENT));
+		document.dispatchEvent(new CustomEvent(BLOCK_COOKIES_END_EVENT));
 	}
 	if (options.loadDeferredImagesBlockStorage) {
-		dispatchEvent(new CustomEvent(BLOCK_STORAGE_END_EVENT));
+		document.dispatchEvent(new CustomEvent(BLOCK_STORAGE_END_EVENT));
 	}
 	if (options.loadDeferredImagesDispatchScrollEvent) {
-		dispatchEvent(new CustomEvent(DISPATCH_SCROLL_END_EVENT));
+		document.dispatchEvent(new CustomEvent(DISPATCH_SCROLL_END_EVENT));
 	}
 	if (options.loadDeferredImagesKeepZoomLevel) {
-		dispatchEvent(new CustomEvent(LOAD_DEFERRED_IMAGES_KEEP_ZOOM_LEVEL_END_EVENT));
+		document.dispatchEvent(new CustomEvent(LOAD_DEFERRED_IMAGES_KEEP_ZOOM_LEVEL_END_EVENT));
 	} else {
-		dispatchEvent(new CustomEvent(LOAD_DEFERRED_IMAGES_END_EVENT));
+		document.dispatchEvent(new CustomEvent(LOAD_DEFERRED_IMAGES_END_EVENT));
 	}
 }
 
 function loadDeferredImagesResetZoomLevel(options) {
 	if (options.loadDeferredImagesKeepZoomLevel) {
-		dispatchEvent(new CustomEvent(LOAD_DEFERRED_IMAGES_RESET_ZOOM_LEVEL_EVENT));
+		document.dispatchEvent(new CustomEvent(LOAD_DEFERRED_IMAGES_RESET_ZOOM_LEVEL_EVENT));
 	} else {
-		dispatchEvent(new CustomEvent(LOAD_DEFERRED_IMAGES_RESET_EVENT));
+		document.dispatchEvent(new CustomEvent(LOAD_DEFERRED_IMAGES_RESET_EVENT));
 	}
 }

package/processors/lazy/content/content-lazy-loader.js

@@ -39,8 +39,6 @@ const ATTRIBUTES_MUTATION_TYPE = "attributes";
 const browser = globalThis.browser;
 const document = globalThis.document;
 const MutationObserver = globalThis.MutationObserver;
-const addEventListener = (type, listener, options) => globalThis.addEventListener(type, listener, options);
-const removeEventListener = (type, listener, options) => globalThis.removeEventListener(type, listener, options);
 const timeouts = new Map();
 
 let idleTimeoutCalls;
@@ -115,8 +113,8 @@ function triggerLazyLoading(options) {
 		await setIdleTimeout(options.loadDeferredImagesMaxIdleTime * 2);
 		await deferForceLazyLoadEnd(observer, options, cleanupAndResolve);
 		observer.observe(document, { subtree: true, childList: true, attributes: true });
-		addEventListener(hooksFrames.LOAD_IMAGE_EVENT, onImageLoadEvent);
-		addEventListener(hooksFrames.IMAGE_LOADED_EVENT, onImageLoadedEvent);
+		document.addEventListener(hooksFrames.LOAD_IMAGE_EVENT, onImageLoadEvent);
+		document.addEventListener(hooksFrames.IMAGE_LOADED_EVENT, onImageLoadedEvent);
 		hooksFrames.loadDeferredImagesStart(options);
 
 		async function setIdleTimeout(delay) {
@@ -159,8 +157,8 @@ function triggerLazyLoading(options) {
 
 		function cleanupAndResolve(value) {
 			observer.disconnect();
-			removeEventListener(hooksFrames.LOAD_IMAGE_EVENT, onImageLoadEvent);
-			removeEventListener(hooksFrames.IMAGE_LOADED_EVENT, onImageLoadedEvent);
+			document.removeEventListener(hooksFrames.LOAD_IMAGE_EVENT, onImageLoadEvent);
+			document.removeEventListener(hooksFrames.IMAGE_LOADED_EVENT, onImageLoadedEvent);
 			resolve(value);
 		}
 	});

package/single-file-infobar.js

@@ -28,19 +28,24 @@ import { appendInfobar, refreshInfobarInfo, extractInfobarData } from "./core/in
 (globalThis => {
 
 	const browser = globalThis.browser;
+	const MutationObserver = globalThis.MutationObserver;
+	init();
 
-	if (globalThis.window == globalThis.top) {
-		if (document.readyState == "loading") {
-			document.addEventListener("DOMContentLoaded", displayIcon, false);
-		} else {
-			displayIcon();
+	function init() {
+		if (globalThis.window == globalThis.top) {
+			if (document.readyState == "loading") {
+				document.addEventListener("DOMContentLoaded", displayIcon, false);
+			} else {
+				displayIcon();
+			}
+			document.addEventListener("single-file-display-infobar", displayIcon, false);
+			new MutationObserver(init).observe(document, { childList: true });
+		}
+		if (globalThis.singlefile) {
+			globalThis.singlefile.infobar = {
+				displayIcon
+			};
 		}
-		document.addEventListener("single-file-display-infobar", displayIcon, false);
-	}
-	if (globalThis.singlefile) {
-		globalThis.singlefile.infobar = {
-			displayIcon
-		};
 	}
 
 	async function displayIcon() {

package/single-file.js

@@ -110,6 +110,7 @@ async function getPageData(options = {}, initOptions, doc = globalThis.document,
 			url: options.url,
 			createRootDirectory: options.createRootDirectory,
 			selfExtractingArchive: options.selfExtractingArchive,
+			insertEmbeddedImage: options.insertEmbeddedImage,
 			extractDataFromPage: options.extractDataFromPage,
 			preventAppendedData: options.preventAppendedData,
 			insertCanonicalLink: options.insertCanonicalLink,