added an option to disable max size limit

extension/core/bg/config.js

@@ -35,6 +35,7 @@ singlefile.config = (() => {
 		appendSaveDate: true,
 		contextMenuEnabled: true,
 		shadowEnabled: true,
+		maxResourceSizeEnabled: false,
 		maxResourceSize: 10
 	};
 
@@ -70,21 +71,24 @@ singlefile.config = (() => {
 		if (config.lazyLoadImages === undefined) {
 			config.lazyLoadImages = true;
 		}
-		if (config.contextMenuEnabled == undefined) {
+		if (config.contextMenuEnabled === undefined) {
 			config.contextMenuEnabled = true;
 		}
-		if (config.appendSaveDate == undefined) {
+		if (config.appendSaveDate === undefined) {
 			config.appendSaveDate = true;
 		}
-		if (config.removeImports == undefined) {
+		if (config.removeImports === undefined) {
 			config.removeImports = true;
 		}
-		if (config.shadowEnabled == undefined) {
+		if (config.shadowEnabled === undefined) {
 			config.shadowEnabled = true;
 		}
-		if (config.maxResourceSize == undefined) {
+		if (config.maxResourceSize === undefined) {
 			config.maxResourceSize = 10;
 		}
+		if (config.maxResourceSize === 0) {
+			config.maxResourceSize = 1;
+		}
 	}
 
 	return {

extension/ui/bg/options.js

@@ -38,11 +38,13 @@
 		const appendSaveDateInput = document.getElementById("appendSaveDateInput");
 		const shadowEnabledInput = document.getElementById("shadowEnabledInput");
 		const maxResourceSizeInput = document.getElementById("maxResourceSizeInput");
+		const maxResourceSizeEnabledInput = document.getElementById("maxResourceSizeEnabledInput");
 		document.getElementById("resetButton").addEventListener("click", () => {
 			bgPage.singlefile.config.reset()
 				.then(refresh)
 				.then(update);
 		}, false);
+		maxResourceSizeEnabledInput.addEventListener("click", () => maxResourceSizeInput.disabled = !maxResourceSizeEnabledInput.checked, false);
 		document.getElementById("popupContent").onchange = update;
 		refresh();
 
@@ -60,7 +62,9 @@
 			contextMenuEnabledInput.checked = config.contextMenuEnabled;
 			appendSaveDateInput.checked = config.appendSaveDate;
 			shadowEnabledInput.checked = config.shadowEnabled;
+			maxResourceSizeEnabledInput.checked = config.maxResourceSizeEnabled;
 			maxResourceSizeInput.value = config.maxResourceSize;
+			maxResourceSizeInput.disabled = !config.maxResourceSizeEnabled;
 		}
 
 		async function update() {
@@ -77,6 +81,7 @@
 				contextMenuEnabled: contextMenuEnabledInput.checked,
 				appendSaveDate: appendSaveDateInput.checked,
 				shadowEnabled: shadowEnabledInput.checked,
+				maxResourceSizeEnabled: maxResourceSizeEnabledInput.checked,
 				maxResourceSize: maxResourceSizeInput.value
 			});
 			await bgPage.singlefile.ui.update();

extension/ui/pages/help.html

@@ -67,15 +67,9 @@
 					</li>
 
 					<li>
-						<span class="option">maximum size of embedded resources (Mb)</span>
-						<p>Specify the maximum size of embedded resources in megabytes.
-						</p>
-					</li>
-
-					<li>
-						<span class="option">load lazy loaded images</span>
-						<p>Check this option to try loading all the images that are not already loaded. This helps to get all the images without
-							scrolling the page.</p>
+						<span class="option">save lazy loaded images</span>
+						<p>Check this option to save all the lazy loaded images that are not displayed. This may help to save all the images without
+							scrolling the page. This feature is not guaranteed to work on all sites.</p>
 						<p class="notice">It is recommended to
 							<u>check</u> this option</p>
 					</li>
@@ -144,6 +138,12 @@
 							<u>uncheck</u> this option</p>
 					</li>
 
+					<li>
+						<span class="option">set a maximum size for embedded resources (Mb)</span>
+						<p>Specify the maximum size of embedded resources (i.e. images, stylesheets, scripts and iframes) in megabytes.
+						</p>
+					</li>
+
 					<li>
 						<span class="option">Reset to default options</span>
 						<p>Reset all the options to their default value.</p>

extension/ui/pages/options.css

@@ -35,7 +35,7 @@ button:active {
 }
 
 #popupContent .bottom {
-    padding-top: 20px;
+    padding-top: 15px;
 }
 
 input[type="checkbox"] {
@@ -75,4 +75,8 @@ a {
 #reloadButton {
     background: lightGrey;
     margin-left: 5px;
+}
+
+.option.second-level {
+    margin-left: 20px;
 }

extension/ui/pages/options.html

@@ -27,11 +27,7 @@
 			</div>
 			<h4>Page content</h4>
 			<div class="option">
-				<label for="maxResourceSizeInput">maximum size of embedded resources (Mb)</label>
-				<input type="number" id="maxResourceSizeInput" min="0">
-			</div>
-			<div class="option">
-				<label for="lazyLoadImagesInput">load lazy loaded images</label>
+				<label for="lazyLoadImagesInput">save lazy loaded images</label>
 				<input type="checkbox" id="lazyLoadImagesInput">
 			</div>
 			<div class="option">
@@ -66,6 +62,14 @@
 				<label for="saveRawPageInput">save raw page</label>
 				<input type="checkbox" id="saveRawPageInput">
 			</div>
+			<div class="option">
+				<label for="maxResourceSizeEnabledInput">set a maximum size for embedded resources</label>
+				<input type="checkbox" id="maxResourceSizeEnabledInput">
+			</div>
+			<div class="option second-level">
+				<label for="maxResourceSizeInput">maximum size (Mb)</label>
+				<input type="number" id="maxResourceSizeInput" min="1">
+			</div>
 			<div class="option bottom">
 				<a href="help.html" target="SingleFileHelpPage">help</a>
 				<button id="resetButton" title="Reset all the options to default values">Reset</button>

lib/single-file/single-file-browser.js

@@ -46,7 +46,7 @@ this.SingleFile = (() => {
 				try {
 					const buffer = await resourceContent.arrayBuffer();
 					const dataURI = "data:" + (contentType || "") + ";" + "base64," + base64.fromByteArray(new Uint8Array(buffer));
-					if (options.maxSize && buffer.byteLength > options.maxSize * ONE_MB) {
+					if (options.maxResourceSizeEnabled && buffer.byteLength > options.maxResourceSize * ONE_MB) {
 						return "data:base64,";
 					} else {
 						return dataURI;
@@ -68,7 +68,7 @@ this.SingleFile = (() => {
 				} else {
 					textContent = resourceContent.text();
 				}
-				if (options.maxSize && textContent.length > options.maxSize * ONE_MB) {
+				if (options.maxResourceSizeEnabled && textContent.length > options.maxResourceSize * ONE_MB) {
 					return "";
 				} else {
 					return textContent;

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

@@ -193,7 +193,7 @@ const SingleFileCore = (() => {
 				beforeListener({ index: indexResource, max: resourceURLs.length, url: resourceURL, error });
 				indexResource = indexResource + 1;
 				try {
-					const dataURI = await Download.getContent(resourceURL, { asDataURI: true, maxSize: options.maxResourceSize });
+					const dataURI = await Download.getContent(resourceURL, { asDataURI: true, maxResourceSize: options.maxResourceSize, maxResourceSizeEnabled: options.maxResourceSizeEnabled });
 					resourceRequests.map(resourceRequest => resourceRequest.resolve(dataURI));
 				} catch (responseError) {
 					error = responseError;
@@ -222,7 +222,7 @@ const SingleFileCore = (() => {
 
 		async loadPage(pageContent) {
 			if (!pageContent || this.options.saveRawPage) {
-				pageContent = await Download.getContent(this.baseURI, { asDataURI: false, maxSize: this.options.maxResourceSize });
+				pageContent = await Download.getContent(this.baseURI, { asDataURI: false, maxResourceSize: this.options.maxResourceSize, maxResourceSizeEnabled: this.options.maxResourceSizeEnabled });
 			}
 			this.dom = DOM.create(pageContent, this.baseURI);
 			this.DOMParser = this.dom.DOMParser;
@@ -471,7 +471,7 @@ const SingleFileCore = (() => {
 
 		async inlineStylesheets(initialization) {
 			await Promise.all(Array.from(this.doc.querySelectorAll("style")).map(async styleElement => {
-				const stylesheetContent = initialization ? await DomProcessorHelper.resolveImportURLs(styleElement.textContent, this.baseURI, this.options.maxResourceSize) : await DomProcessorHelper.processStylesheet(styleElement.textContent, this.baseURI);
+				const stylesheetContent = initialization ? await DomProcessorHelper.resolveImportURLs(styleElement.textContent, this.baseURI, { maxResourceSize: this.options.maxResourceSize, maxResourceSizeEnabled: this.options.maxResourceSizeEnabled }) : await DomProcessorHelper.processStylesheet(styleElement.textContent, this.baseURI);
 				styleElement.textContent = this.options.compressCSS ? this.dom.uglifycss(stylesheetContent) : stylesheetContent;
 			}));
 		}
@@ -479,7 +479,7 @@ const SingleFileCore = (() => {
 		async scripts() {
 			await Promise.all(Array.from(this.doc.querySelectorAll("script[src]")).map(async scriptElement => {
 				if (scriptElement.src) {
-					const scriptContent = await Download.getContent(scriptElement.src, { asDataURI: false, maxSize: this.options.maxResourceSize });
+					const scriptContent = await Download.getContent(scriptElement.src, { asDataURI: false, maxResourceSize: this.options.maxResourceSize, maxResourceSizeEnabled: this.options.maxResourceSizeEnabled });
 					scriptElement.textContent = scriptContent.replace(/<\/script>/gi, "<\\/script>");
 				}
 				scriptElement.removeAttribute("src");
@@ -508,7 +508,8 @@ const SingleFileCore = (() => {
 							compressCSS: this.options.compressCSS,
 							lazyLoadImages: this.options.lazyLoadImages,
 							framesData: this.options.framesData,
-							maxResourceSize: this.options.maxResourceSize
+							maxResourceSize: this.options.maxResourceSize,
+							maxResourceSizeEnabled: this.options.maxResourceSizeEnabled
 						};
 						if (frameData.content) {
 							frameData.processor = new PageProcessor(options);
@@ -575,14 +576,14 @@ const SingleFileCore = (() => {
 
 		async attributeStyles(initialization) {
 			await Promise.all(Array.from(this.doc.querySelectorAll("[style]")).map(async element => {
-				const stylesheetContent = initialization ? await DomProcessorHelper.resolveImportURLs(element.getAttribute("style"), this.baseURI, this.options.maxResourceSize) : await DomProcessorHelper.processStylesheet(element.getAttribute("style"), this.baseURI);
+				const stylesheetContent = initialization ? await DomProcessorHelper.resolveImportURLs(element.getAttribute("style"), this.baseURI, { maxResourceSize: this.options.maxResourceSize, maxResourceSizeEnabled: this.options.maxResourceSizeEnabled }) : await DomProcessorHelper.processStylesheet(element.getAttribute("style"), this.baseURI);
 				element.setAttribute("style", stylesheetContent);
 			}));
 		}
 
 		async linkStylesheets() {
 			await Promise.all(Array.from(this.doc.querySelectorAll("link[rel*=stylesheet]")).map(async linkElement => {
-				const stylesheetContent = await DomProcessorHelper.resolveLinkStylesheetURLs(linkElement.href, this.baseURI, linkElement.media, this.options.maxResourceSize);
+				const stylesheetContent = await DomProcessorHelper.resolveLinkStylesheetURLs(linkElement.href, this.baseURI, linkElement.media, { maxResourceSize: this.options.maxResourceSize, maxResourceSizeEnabled: this.options.maxResourceSizeEnabled });
 				const styleElement = this.doc.createElement("style");
 				styleElement.textContent = this.options.compressCSS ? this.dom.uglifycss(stylesheetContent) : stylesheetContent;
 				linkElement.parentElement.replaceChild(styleElement, linkElement);
@@ -611,7 +612,7 @@ const SingleFileCore = (() => {
 			}
 		}
 
-		static async resolveImportURLs(stylesheetContent, baseURI, maxResourceSize) {
+		static async resolveImportURLs(stylesheetContent, baseURI, options) {
 			stylesheetContent = DomUtil.removeCssComments(stylesheetContent);
 			const imports = DomUtil.getImportFunctions(stylesheetContent);
 			await Promise.all(imports.map(async cssImport => {
@@ -619,7 +620,7 @@ const SingleFileCore = (() => {
 				if (match) {
 					const resourceURL = DomUtil.normalizeURL(match.resourceURL);
 					if (resourceURL != baseURI && resourceURL != ABOUT_BLANK_URI) {
-						let importedStylesheetContent = await Download.getContent(new URL(match.resourceURL, baseURI).href, { asDataURI: false, maxSize: maxResourceSize });
+						let importedStylesheetContent = await Download.getContent(new URL(match.resourceURL, baseURI).href, { asDataURI: false, maxResourceSize: options.maxResourceSize, maxResourceSizeEnabled: options.maxResourceSizeEnabled });
 						importedStylesheetContent = DomUtil.wrapMediaQuery(importedStylesheetContent, match.media);
 						if (stylesheetContent.indexOf(cssImport) != -1) {
 							stylesheetContent = stylesheetContent.replace(cssImport, importedStylesheetContent);
@@ -629,7 +630,7 @@ const SingleFileCore = (() => {
 			}));
 			stylesheetContent = DomProcessorHelper.resolveStylesheetURLs(stylesheetContent, baseURI);
 			if (imports.length) {
-				return await DomProcessorHelper.resolveImportURLs(stylesheetContent, baseURI, maxResourceSize);
+				return await DomProcessorHelper.resolveImportURLs(stylesheetContent, baseURI, options);
 			} else {
 				return stylesheetContent;
 			}
@@ -647,11 +648,11 @@ const SingleFileCore = (() => {
 			return stylesheetContent;
 		}
 
-		static async resolveLinkStylesheetURLs(resourceURL, baseURI, media, maxResourceSize) {
+		static async resolveLinkStylesheetURLs(resourceURL, baseURI, media, options) {
 			resourceURL = DomUtil.normalizeURL(resourceURL);
 			if (resourceURL && resourceURL != baseURI && resourceURL != ABOUT_BLANK_URI) {
-				let stylesheetContent = await Download.getContent(resourceURL, { asDataURI: false, maxSize: maxResourceSize });
-				stylesheetContent = await DomProcessorHelper.resolveImportURLs(stylesheetContent, resourceURL, maxResourceSize);
+				let stylesheetContent = await Download.getContent(resourceURL, { asDataURI: false, maxResourceSize: options.maxResourceSize, maxResourceSizeEnabled: options.maxResourceSizeEnabled });
+				stylesheetContent = await DomProcessorHelper.resolveImportURLs(stylesheetContent, resourceURL, options);
 				stylesheetContent = DomUtil.wrapMediaQuery(stylesheetContent, media);
 				return stylesheetContent;
 			}