single-file-core 1.5.86 → 1.5.88

package/core/helper.js

@@ -139,8 +139,18 @@ export {
 	NESTING_TRACK_ID_ATTRIBUTE_NAME
 };
 
+let userScriptHandlerObserver;
+
 function initUserScriptHandler() {
-	addEventListener(ON_INIT_USERSCRIPT_EVENT, ({ detail }) => globalThis[WAIT_FOR_USERSCRIPT_PROPERTY_NAME] = async (eventPrefixName, options) => {
+	addEventListener(ON_INIT_USERSCRIPT_EVENT, onInitUserScript);
+	if (!userScriptHandlerObserver) {
+		userScriptHandlerObserver = new MutationObserver(initUserScriptHandler);
+		userScriptHandlerObserver.observe(globalThis.document, { childList: true });
+	}
+}
+
+function onInitUserScript({ detail }) {
+	globalThis[WAIT_FOR_USERSCRIPT_PROPERTY_NAME] = async (eventPrefixName, options) => {
 		const userScriptOptions = Object.assign({}, options);
 		delete userScriptOptions.win;
 		delete userScriptOptions.doc;
@@ -181,8 +191,7 @@ function initUserScriptHandler() {
 		} else {
 			resolvePromiseResponse();
 		}
-	});
-	new MutationObserver(initUserScriptHandler).observe(globalThis.document, { childList: true });
+	};
 }
 
 function initDoc(doc) {

package/package.json

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

package/processors/compression/compression-display.js

@@ -21,13 +21,13 @@
  *   Source.
  */
 
-/* global DOMParser */
+/* global DOMParser, setTimeout */
 
 export {
 	display
 };
 
-async function display(document, docContent, { disableFramePointerEvents } = {}) {
+async function display(document, docContent, { disableFramePointerEvents, inPlace } = {}) {
 	docContent = docContent.replace(/<noscript/gi, "<template disabled-noscript");
 	docContent = docContent.replace(/<\/noscript/gi, "</template");
 	const doc = (new DOMParser()).parseFromString(docContent, "text/html");
@@ -38,10 +38,48 @@ async function display(document, docContent, { disableFramePointerEvents } = {})
 			element.style.setProperty(pointerEvents, "none", "important");
 		});
 	}
-	document.open();
-	document.write(getDoctypeString(doc));
-	document.write(doc.documentElement.outerHTML);
-	document.close();
+	// the in-place swap avoids the document churn of document.open() but cannot
+	// change the compat mode and does not execute script elements; it morphs
+	// documentElement instead of replacing it so that document-level childList
+	// observers (e.g. extension content scripts watching for document.open())
+	// do not fire on every rendered page
+	if (inPlace && doc.compatMode == document.compatMode && !doc.querySelector("script")) {
+		// stylesheet links inserted from script are not render-blocking; preload
+		// them while the previous page is still displayed and keep the new page
+		// hidden until they are applied to avoid a flash of unstyled content
+		await Promise.all(Array.from(doc.querySelectorAll("link[rel~=stylesheet][href]")).map(linkElement => new Promise(resolve => {
+			const preloadElement = document.createElement("link");
+			preloadElement.rel = "preload";
+			preloadElement.as = "style";
+			preloadElement.href = linkElement.getAttribute("href");
+			preloadElement.onload = resolve;
+			preloadElement.onerror = resolve;
+			document.head.appendChild(preloadElement);
+			setTimeout(resolve, 500);
+		})));
+		const documentElement = document.documentElement;
+		const newDocumentElement = document.adoptNode(doc.documentElement);
+		while (documentElement.attributes.length) {
+			documentElement.removeAttribute(documentElement.attributes[0].name);
+		}
+		Array.from(newDocumentElement.attributes).forEach(attribute => documentElement.setAttribute(attribute.name, attribute.value));
+		documentElement.replaceChildren(...newDocumentElement.childNodes);
+		if (document.querySelector("link[rel~=stylesheet][href]")) {
+			const hideStyleElement = document.createElement("style");
+			hideStyleElement.textContent = "html{visibility:hidden}";
+			document.head.appendChild(hideStyleElement);
+			const start = Date.now();
+			while (Date.now() - start < 500 && Array.from(document.querySelectorAll("link[rel~=stylesheet][href]")).some(linkElement => !linkElement.sheet)) {
+				await new Promise(resolve => setTimeout(resolve, 10));
+			}
+			hideStyleElement.remove();
+		}
+	} else {
+		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");

package/processors/compression/compression-extract.js

@@ -27,7 +27,7 @@ export {
 	extract
 };
 
-async function extract(content, { password, prompt = () => { }, zipOptions = { useWebWorkers: true }, noBlobURL } = {}) {
+async function extract(content, { password, prompt = () => { }, zipOptions = { useWebWorkers: true }, noBlobURL, entries, pagePath = "" } = {}) {
 	const KNOWN_MIMETYPES = {
 		"gif": "image/gif",
 		"jpg": "image/jpeg",
@@ -74,22 +74,28 @@ async function extract(content, { password, prompt = () => { }, zipOptions = { u
 	const REGEXP_MATCH_MANIFEST = /manifest\.json$/;
 	const CHARSET_UTF8 = ";charset=utf-8";
 	const REGEXP_ESCAPE = /([{}()^$&.*?/+|[\\\\]|\]|-)/g;
-	let reader;
+	let zipReader;
 	zip.configure(zipOptions);
-	if (content.readUint8Array) {
-		reader = content;
-	} else {
-		if (Array.isArray(content)) {
-			content = new Blob([new Uint8Array(content)]);
+	if (!entries) {
+		let reader;
+		if (content.readUint8Array) {
+			reader = content;
+		} else {
+			if (Array.isArray(content)) {
+				content = new Blob([new Uint8Array(content)]);
+			}
+			reader = new zip.BlobReader(content);
 		}
-		reader = new zip.BlobReader(content);
+		zipReader = new zip.ZipReader(reader);
+		entries = await zipReader.getEntries();
+	}
+	if (pagePath) {
+		entries = entries.filter(entry => entry.filename.startsWith(pagePath));
 	}
-	const zipReader = new zip.ZipReader(reader);
-	const entries = await zipReader.getEntries();
 	const options = { password };
 	let docContent, origDocContent, url, resources = [], indexPages = [], textResources = [];
 	await Promise.all(entries.map(async entry => {
-		const { filename } = entry;
+		const filename = entry.filename.substring(pagePath.length);
 		let dataWriter, content, textContent, mimeType;
 		const resourceInfo = {};
 		if (!options.password && entry.encrypted) {
@@ -131,7 +137,7 @@ async function extract(content, { password, prompt = () => { }, zipOptions = { u
 				content = URL.createObjectURL(blob);
 			}
 		}
-		const name = entry.filename.match(/^([0-9_]+\/)?(.*)$/)[2];
+		const name = filename.match(/^([0-9_]+\/)?(.*)$/)[2];
 		let prefixPath = "";
 		const prefixPathMatch = filename.match(/(.*\/)[^/]+$/);
 		if (prefixPathMatch && prefixPathMatch[1]) {
@@ -139,7 +145,7 @@ async function extract(content, { password, prompt = () => { }, zipOptions = { u
 		}
 		Object.assign(resourceInfo, {
 			prefixPath,
-			filename: entry.filename,
+			filename,
 			name,
 			url: entry.comment,
 			content,
@@ -148,7 +154,9 @@ async function extract(content, { password, prompt = () => { }, zipOptions = { u
 			parentResources: []
 		});
 	}));
-	await zipReader.close();
+	if (zipReader) {
+		await zipReader.close();
+	}
 	indexPages.sort(sortByFilenameLengthDec);
 	textResources.sort(sortByFilenameLengthInc);
 	resources = resources.sort(sortByFilenameLengthDec).concat(...textResources).concat(...indexPages);

package/processors/compression/compression-router.js

@@ -0,0 +1,466 @@
+/*
+ * Copyright 2010-2026 Gildas Lormeau
+ * contact : gildas.lormeau <at> gmail.com
+ *
+ * This file is part of SingleFile.
+ *
+ *   The code in this file is free software: you can redistribute it and/or
+ *   modify it under the terms of the GNU Affero General Public License
+ *   (GNU AGPL) as published by the Free Software Foundation, either version 3
+ *   of the License, or (at your option) any later version.
+ *
+ *   The code in this file is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero
+ *   General Public License for more details.
+ *
+ *   As additional permission under GNU AGPL version 3 section 7, you may
+ *   distribute UNMODIFIED VERSIONS OF THIS file without the copy of the GNU
+ *   AGPL normally required by section 4, provided you include this license
+ *   notice and a URL through which recipients can access the Corresponding
+ *   Source.
+ */
+
+export {
+	router
+};
+
+async function router(content, { extract, display }) {
+	const PAGES_PREFIX = "pages/";
+	const PAGES_FILENAME = "sfz-pages.json";
+	const ROUTE_PREFIX = "#sfz/";
+	const TARGET_ATTRIBUTE = "data-sfz-target";
+	const TARGET_PSEUDO_CLASS = /:target(?![\w-])/g;
+	const VISITED_ATTRIBUTE = "data-sfz-visited";
+	const VISITED_PSEUDO_CLASS = /:visited(?![\w-])/g;
+	const VISITED_DEFAULT_COLOR = "#551a8b";
+	const UNARCHIVED_ATTRIBUTE = "data-sfz-unarchived";
+	// relative units, currentColor and opacity keep the marker legible on any
+	// page theme, and \2197 stays ASCII in the windows-1252 prelude
+	const UNARCHIVED_STYLE = "a[" + UNARCHIVED_ATTRIBUTE + "]::after{content:\" \\2197\";font-size:.75em;opacity:.7}";
+	const UNARCHIVED_TITLE = "Not saved in this archive";
+	const UNARCHIVED_PROTOCOLS = ["http:", "https:"];
+	const PREFETCH_DELAY = 100;
+	const { zip, document, location, history, CSS, setTimeout, clearTimeout } = globalThis;
+	const cache = new Map();
+	const urlToPath = new Map();
+	const scrollStates = new Map();
+	const visitedPaths = new Set();
+	const sessionKey = Math.random().toString(36).substring(2);
+	let currentPath, currentEntryId, targetStyleElement, prefetchTimeout;
+	let nextEntryId = 0;
+	try {
+		history.scrollRestoration = "manual";
+	} catch {
+		// ignored
+	}
+	zip.configure({ useWebWorkers: true });
+	const zipReader = new zip.ZipReader(content.readUint8Array ? content : new zip.BlobReader(content));
+	const entries = await zipReader.getEntries();
+	const pagesEntry = entries.find(entry => entry.filename == PAGES_FILENAME);
+	if (!pagesEntry) {
+		throw new Error("Pages data not found");
+	}
+	const manifest = JSON.parse(await pagesEntry.getData(new zip.TextWriter()));
+	const { pages } = manifest;
+	const aliases = new Map(Object.entries(manifest.aliases || {}));
+	pages.forEach(page => {
+		urlToPath.set(stripFragment(page.url), page.path);
+		if (page.originalUrls) {
+			page.originalUrls.forEach(url => urlToPath.set(stripFragment(url), page.path));
+		}
+	});
+	attachListeners();
+	currentEntryId = getEntryId();
+	if (currentEntryId === null) {
+		currentEntryId = assignEntryId();
+	}
+	return renderRoute(true);
+
+	// document.open() removes the listeners of the document and of its window,
+	// re-attaching identical function references is idempotent
+	function attachListeners() {
+		globalThis.addEventListener("click", interceptClick, true);
+		globalThis.addEventListener("auxclick", interceptClick, true);
+		globalThis.addEventListener("mouseover", prefetchOnHover, true);
+		globalThis.addEventListener("hashchange", onHashChange);
+	}
+
+	function onHashChange() {
+		navigate().catch(error => globalThis.console.error(error));
+	}
+
+	function interceptClick(event) {
+		if (event.type == "auxclick" && event.button != 1) {
+			return;
+		}
+		const node = findAnchor(event.target);
+		if (node && node.href) {
+			const fragment = getFragment(node.href);
+			let path = urlToPath.get(stripFragment(node.href));
+			if (path === undefined && fragment && stripFragment(node.href) == stripFragment(location.href)) {
+				path = currentPath;
+			}
+			if (path !== undefined) {
+				event.preventDefault();
+				// modified and middle clicks open the archive deep link in a new
+				// tab instead of letting the browser open the live site URL
+				if (event.type == "auxclick" || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+					globalThis.open(stripFragment(location.href) + ROUTE_PREFIX + path + (fragment || ""));
+				} else {
+					// the fragment stays encoded inside the route hash so that
+					// reloading or sharing the URL comes back to the same page
+					const previousHash = location.hash;
+					location.hash = ROUTE_PREFIX + path + (fragment || "");
+					if (location.hash == previousHash && fragment) {
+						clearTarget();
+						scrollToFragment(fragment);
+					}
+				}
+			}
+		}
+	}
+
+	async function navigate() {
+		clearTarget();
+		scrollStates.set(currentEntryId, captureScrollState());
+		const continuityScrolls = captureElementScrolls();
+		const entryId = getEntryId();
+		const { routed, path, fragment } = parseRoute();
+		const willRender = routed && path != currentPath && Boolean(pages.find(page => page.path == path));
+		// the whole render and scroll sequence runs inside the view transition
+		// so that the crossfade ends on the final scroll position
+		if (willRender && document.startViewTransition && !prefersReducedMotion()) {
+			await document.startViewTransition(update).updateCallbackDone;
+		} else {
+			await update();
+		}
+
+		async function update() {
+			const rendered = await renderRoute();
+			if (rendered) {
+				focusContent();
+			}
+			applyScrollState(rendered);
+		}
+
+		function applyScrollState(rendered) {
+			if (entryId !== null) {
+				currentEntryId = entryId;
+				const scrollState = scrollStates.get(entryId);
+				if (scrollState) {
+					applyElementScrolls(scrollState.elements);
+					globalThis.scrollTo(scrollState.x, scrollState.y);
+				}
+				if (fragment) {
+					const target = findFragmentTarget(fragment);
+					if (target) {
+						markTarget(target);
+					}
+				}
+			} else {
+				currentEntryId = assignEntryId();
+				if (rendered) {
+					applyElementScrolls(continuityScrolls);
+				}
+				if (fragment) {
+					scrollToFragment(fragment);
+				} else if (rendered) {
+					globalThis.scrollTo(0, 0);
+				}
+			}
+		}
+	}
+
+	async function renderRoute(initial) {
+		const { routed, path, fragment } = parseRoute();
+		if (!routed && !initial) {
+			return false;
+		}
+		if (path == currentPath || !pages.find(page => page.path == path)) {
+			return false;
+		}
+		const docContent = await getPageContent(path);
+		currentPath = path;
+		await display(document, docContent, { inPlace: true });
+		attachListeners();
+		visitedPaths.add(path);
+		markVisitedLinks();
+		if (manifest.markUnarchivedLinks) {
+			markUnarchivedLinks();
+		}
+		if (initial) {
+			if (fragment) {
+				scrollToFragment(fragment);
+			} else if (!routed && location.hash) {
+				scrollToFragment(location.hash);
+			}
+		}
+		return true;
+	}
+
+	function parseRoute() {
+		const hash = location.hash;
+		const routed = !hash || hash.startsWith(ROUTE_PREFIX);
+		let path = pages[0].path;
+		let fragment;
+		if (routed && hash) {
+			const route = hash.substring(ROUTE_PREFIX.length);
+			const indexFragment = route.indexOf("#");
+			path = decodeURIComponent(indexFragment == -1 ? route : route.substring(0, indexFragment));
+			fragment = indexFragment == -1 ? undefined : route.substring(indexFragment);
+		}
+		return { routed, path, fragment };
+	}
+
+	// the cache stores promises so that a click during a hover prefetch awaits
+	// the extraction in flight instead of starting a second one
+	function getPageContent(path) {
+		if (!cache.has(path)) {
+			const contentPromise = extractPageContent(path);
+			contentPromise.catch(() => cache.delete(path));
+			cache.set(path, contentPromise);
+		}
+		return cache.get(path);
+	}
+
+	async function extractPageContent(path) {
+		const pageEntries = entries
+			.filter(entry => belongsToPage(entry.filename, path) && !aliases.has(entry.filename))
+			.concat(getAliasEntries(path));
+		const { docContent } = await extract(null, { entries: pageEntries, pagePath: path });
+		return docContent;
+	}
+
+	// deduplicated resources exist in the zip as symlink stand-ins for external
+	// extractors, they are resolved from the manifest alias map when extracting
+	function getAliasEntries(path) {
+		return Array.from(aliases)
+			.filter(([filename]) => belongsToPage(filename, path))
+			.map(([filename, canonicalFilename]) => {
+				const entry = entries.find(entry => entry.filename == canonicalFilename);
+				return entry && {
+					filename,
+					comment: entry.comment,
+					encrypted: entry.encrypted,
+					uncompressedSize: entry.uncompressedSize,
+					getData: (writer, options) => entry.getData(writer, options)
+				};
+			})
+			.filter(Boolean);
+	}
+
+	function belongsToPage(filename, path) {
+		return path == "" ?
+			!filename.startsWith(PAGES_PREFIX) && filename != PAGES_FILENAME :
+			filename.startsWith(path);
+	}
+
+	function prefetchOnHover(event) {
+		const node = findAnchor(event.target);
+		if (node && node.href) {
+			const path = urlToPath.get(stripFragment(node.href));
+			if (path !== undefined && path != currentPath && !cache.has(path)) {
+				clearTimeout(prefetchTimeout);
+				prefetchTimeout = setTimeout(() => getPageContent(path).catch(() => { }), PREFETCH_DELAY);
+			}
+		}
+	}
+
+	function findAnchor(node) {
+		while (node && node.tagName != "A") {
+			node = node.parentNode;
+		}
+		return node;
+	}
+
+	function prefersReducedMotion() {
+		return Boolean(globalThis.matchMedia && globalThis.matchMedia("(prefers-reduced-motion: reduce)").matches);
+	}
+
+	function getEntryId() {
+		const state = history.state;
+		if (state && state.sfzSession == sessionKey && typeof state.sfzEntry == "number") {
+			return state.sfzEntry;
+		}
+		return null;
+	}
+
+	function assignEntryId() {
+		const entryId = nextEntryId++;
+		try {
+			history.replaceState({ sfzSession: sessionKey, sfzEntry: entryId }, "");
+		} catch {
+			// ignored
+		}
+		return entryId;
+	}
+
+	function captureScrollState() {
+		return { x: globalThis.scrollX, y: globalThis.scrollY, elements: captureElementScrolls() };
+	}
+
+	function captureElementScrolls() {
+		const elementScrolls = [];
+		document.querySelectorAll("*").forEach(element => {
+			if (element.scrollTop || element.scrollLeft) {
+				const path = getElementPath(element);
+				if (path) {
+					elementScrolls.push({ path, top: element.scrollTop, left: element.scrollLeft });
+				}
+			}
+		});
+		return elementScrolls;
+	}
+
+	function applyElementScrolls(elementScrolls) {
+		elementScrolls.forEach(({ path, top, left }) => {
+			let element;
+			try {
+				element = document.querySelector(path);
+			} catch {
+				// ignored
+			}
+			if (element) {
+				element.scrollTop = top;
+				element.scrollLeft = left;
+			}
+		});
+	}
+
+	function getElementPath(element) {
+		const segments = [];
+		while (element && element.parentElement) {
+			if (element.id && CSS) {
+				segments.unshift("#" + CSS.escape(element.id));
+				return segments.join(">");
+			}
+			const parent = element.parentElement;
+			segments.unshift(element.tagName + ":nth-child(" + (Array.from(parent.children).indexOf(element) + 1) + ")");
+			element = parent;
+		}
+		return segments.join(">");
+	}
+
+	// the fragment is scrolled to from script because the real fragment is the
+	// route hash, which also means :target never matches in rendered pages; the
+	// :target rules of the page are cloned against a marker attribute instead
+	function scrollToFragment(fragment) {
+		const target = findFragmentTarget(fragment);
+		if (target) {
+			markTarget(target);
+			target.scrollIntoView();
+		}
+	}
+
+	function findFragmentTarget(fragment) {
+		const name = decodeURIComponent(fragment.substring(1));
+		let target = document.getElementById(name);
+		if (!target && CSS) {
+			target = document.querySelector("a[name=" + CSS.escape(name) + "]");
+		}
+		return target;
+	}
+
+	function markTarget(element) {
+		const cssText = getPseudoRules(TARGET_PSEUDO_CLASS, TARGET_ATTRIBUTE);
+		if (cssText) {
+			element.setAttribute(TARGET_ATTRIBUTE, "");
+			targetStyleElement = document.createElement("style");
+			targetStyleElement.textContent = cssText;
+			document.head.appendChild(targetStyleElement);
+		}
+	}
+
+	// :visited itself is privacy-gated, so visited routes are stamped with an
+	// attribute styled by the page's own :visited rules over a default color
+	function markVisitedLinks() {
+		const styleElement = document.createElement("style");
+		styleElement.textContent = "a[" + VISITED_ATTRIBUTE + "]{color:" + VISITED_DEFAULT_COLOR + "}" +
+			getPseudoRules(VISITED_PSEUDO_CLASS, VISITED_ATTRIBUTE);
+		document.head.appendChild(styleElement);
+		document.querySelectorAll("a[href]").forEach(anchorElement => {
+			const path = urlToPath.get(stripFragment(anchorElement.href));
+			if (path !== undefined && visitedPaths.has(path)) {
+				anchorElement.setAttribute(VISITED_ATTRIBUTE, "");
+			}
+		});
+	}
+
+	// links that leave the archive are stamped so that the reader knows before
+	// clicking; opt-in at packaging time because the marker alters the rendering
+	function markUnarchivedLinks() {
+		const styleElement = document.createElement("style");
+		styleElement.textContent = UNARCHIVED_STYLE;
+		document.head.appendChild(styleElement);
+		document.querySelectorAll("a[href]").forEach(anchorElement => {
+			if (UNARCHIVED_PROTOCOLS.includes(anchorElement.protocol) &&
+				urlToPath.get(stripFragment(anchorElement.href)) === undefined &&
+				stripFragment(anchorElement.href) != stripFragment(location.href)) {
+				anchorElement.setAttribute(UNARCHIVED_ATTRIBUTE, "");
+				if (!anchorElement.hasAttribute("title")) {
+					anchorElement.setAttribute("title", UNARCHIVED_TITLE);
+				}
+			}
+		});
+	}
+
+	function clearTarget() {
+		if (targetStyleElement) {
+			const markedElement = document.querySelector("[" + TARGET_ATTRIBUTE + "]");
+			if (markedElement) {
+				markedElement.removeAttribute(TARGET_ATTRIBUTE);
+			}
+			targetStyleElement.remove();
+			targetStyleElement = undefined;
+		}
+	}
+
+	function getPseudoRules(pseudoRegExp, attributeName) {
+		let cssText = "";
+		Array.from(document.styleSheets).forEach(styleSheet => {
+			try {
+				cssText += getPseudoRulesText(styleSheet.cssRules, pseudoRegExp, attributeName);
+			} catch {
+				// ignored
+			}
+		});
+		return cssText;
+	}
+
+	function getPseudoRulesText(cssRules, pseudoRegExp, attributeName) {
+		let cssText = "";
+		Array.from(cssRules).forEach(cssRule => {
+			if (cssRule.cssRules && cssRule.cssRules.length) {
+				const innerCssText = getPseudoRulesText(cssRule.cssRules, pseudoRegExp, attributeName);
+				if (innerCssText) {
+					cssText += cssRule.cssText.substring(0, cssRule.cssText.indexOf("{") + 1) + innerCssText + "}";
+				}
+			} else if (cssRule.selectorText) {
+				const selectorText = cssRule.selectorText.replace(pseudoRegExp, "[" + attributeName + "]");
+				if (selectorText != cssRule.selectorText) {
+					cssText += selectorText + "{" + cssRule.style.cssText + "}";
+				}
+			}
+		});
+		return cssText;
+	}
+
+	function focusContent() {
+		const headingElement = document.querySelector("h1") || document.body;
+		if (headingElement) {
+			headingElement.setAttribute("tabindex", "-1");
+			headingElement.focus({ preventScroll: true });
+		}
+	}
+
+	function stripFragment(url) {
+		const indexFragment = url.indexOf("#");
+		return indexFragment == -1 ? url : url.substring(0, indexFragment);
+	}
+
+	function getFragment(url) {
+		const indexFragment = url.indexOf("#");
+		return indexFragment == -1 ? undefined : url.substring(indexFragment);
+	}
+}

package/processors/compression/compression.js

@@ -37,6 +37,9 @@ import {
 import {
 	display
 } from "./compression-display.js";
+import {
+	router
+} from "./compression-router.js";
 
 const { Blob, fetch, TextEncoder, TextDecoder, DOMParser } = globalThis;
 
@@ -278,6 +281,9 @@ async function prependHTMLData(pageData, zipDataWriter, script, options) {
 		pageContent += "<li style='margin-bottom:10px'><strong>Chrome/Edge/Brave</strong>: Install <a href='https://www.getsinglefile.com'>SingleFile</a> and enable the option \"Allow access to file URLs\" in the details page of the extension.</li>";
 		pageContent += "<li><strong>Safari</strong>: Select \"Security > Disable Local File Restrictions\" in the \"Develop > Developer settings\" menu.</li></ul></div>";
 	}
+	if (pageData.tocContent) {
+		pageContent += pageData.tocContent;
+	}
 	if (options.insertTextBody) {
 		const doc = (new DOMParser()).parseFromString(pageData.content, "text/html");
 		doc.body.querySelectorAll("style, script, noscript").forEach(element => element.remove());
@@ -300,12 +306,17 @@ async function prependHTMLData(pageData, zipDataWriter, script, options) {
 		insertEmbeddedImage: Boolean(options.embeddedImage),
 		insertEmbeddedScreenshotImage: Boolean(options.embeddedScreenshotImage)
 	};
+	const bootstrapBody = options.multiPageArchive ?
+		"(" + router.toString().replace(/\n|\t/g, "") + ")(content,{extract:" +
+		extract.toString().replace(/\n|\t/g, "") + ",display:" +
+		display.toString().replace(/\n|\t/g, "") + "})" :
+		"(" + extract.toString().replace(/\n|\t/g, "") + ")(content,{prompt}).then(({docContent}) => " +
+		display.toString().replace(/\n|\t/g, "") + "(document,docContent," + JSON.stringify(displayOptions) + "))";
 	script = "<script>" +
 		script +
 		"document.currentScript.remove();" +
-		"globalThis.bootstrap=(()=>{let bootstrapStarted;return async content=>{if (bootstrapStarted) return bootstrapStarted; bootstrapStarted = (" +
-		extract.toString().replace(/\n|\t/g, "") + ")(content,{prompt}).then(({docContent}) => " +
-		display.toString().replace(/\n|\t/g, "") + "(document,docContent," + JSON.stringify(displayOptions) + "));return bootstrapStarted;}})();(" +
+		"globalThis.bootstrap=(()=>{let bootstrapStarted;return async content=>{if (bootstrapStarted) return bootstrapStarted; bootstrapStarted = " +
+		bootstrapBody + ";return bootstrapStarted;}})();(" +
 		getContent.toString().replace(/\n|\t/g, "") + ")().then(globalThis.bootstrap).then(() => document.dispatchEvent(new CustomEvent(\"single-file-display-infobar\"))).catch(error => {" +
 		"console.error(error);" +
 		"const waitMessage = document.getElementById(\"sfz-wait-message\");" +

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

@@ -100,33 +100,35 @@ export {
 };
 
 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);
+	globalThis.addEventListener("message", onMessage, true);
+}
+
+async function onMessage(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);
 				}
-			} 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);
+				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) {