fixed "save selected content" styling issues

extension/core/scripts/content/client.js

@@ -22,12 +22,17 @@
 
 (() => {
 
+	const SELECTED_CONTENT_ATTRIBUTE_NAME = "data-single-file-selected-content";
+
 	chrome.runtime.onMessage.addListener(request => {
 		if (request.processStart) {
 			fixInlineScripts();
 			const options = request.options;
 			options.url = document.location.href;
-			options.content = options.selected ? getSelectedContent() : getDoctype(document) + document.documentElement.outerHTML;
+			if (options.selected) {
+				markSelectedContent();
+			}
+			options.content = getDoctype(document) + document.documentElement.outerHTML;
 			options.jsEnabled = true;
 			options.onprogress = event => {
 				if (event.type == event.RESOURCES_INITIALIZED) {
@@ -90,7 +95,7 @@
 		return "";
 	}
 
-	function getSelectedContent() {
+	function markSelectedContent() {
 		const selection = getSelection();
 		const range = selection.rangeCount ? selection.getRangeAt(0) : null;
 		let node;
@@ -99,10 +104,8 @@
 			if (node.nodeType != node.ELEMENT_NODE) {
 				node = node.parentElement;
 			}
-			const clonedNode = node.cloneNode(true);
-			node.parentElement.replaceChild(clonedNode, node);
 		}
-		return node.outerHTML;
+		node.setAttribute(SELECTED_CONTENT_ATTRIBUTE_NAME, "");
 	}
 
 	function fixInlineScripts() {

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

@@ -20,6 +20,8 @@
 
 const SingleFileCore = (() => {
 
+	const SELECTED_CONTENT_ATTRIBUTE_NAME = "data-single-file-selected-content";
+
 	let Download, DOM, URL;
 
 	function SingleFileCore(...args) {
@@ -58,7 +60,7 @@ const SingleFileCore = (() => {
 	class PageProcessor {
 		constructor(options) {
 			this.options = options;
-			this.processor = new DOMProcessor(options.url);
+			this.processor = new DOMProcessor(options);
 		}
 
 		async loadPage(pageContent) {
@@ -174,8 +176,9 @@ const SingleFileCore = (() => {
 	const batchRequest = new BatchRequest();
 
 	class DOMProcessor {
-		constructor(url) {
-			this.baseURI = url;
+		constructor(options) {
+			this.options = options;
+			this.baseURI = options.url;
 		}
 
 		async loadPage(pageContent) {
@@ -206,6 +209,11 @@ const SingleFileCore = (() => {
 		}
 
 		getContent() {
+			if (this.options.selected) {
+				const selectedElement = this.doc.querySelector("[" + SELECTED_CONTENT_ATTRIBUTE_NAME + "]");
+				DomProcessorHelper.isolateElement(selectedElement.parentElement, selectedElement);
+				selectedElement.removeAttribute(SELECTED_CONTENT_ATTRIBUTE_NAME);
+			}
 			const titleElement = this.doc.head.querySelector("title");
 			let title;
 			if (titleElement) {
@@ -352,6 +360,20 @@ const SingleFileCore = (() => {
 	// DomHelper
 	// ---------
 	class DomProcessorHelper {
+		static isolateElement(parentElement, element) {
+			Array.from(parentElement.childNodes).forEach(node => {
+				if (node != element) {
+					if (node.tagName != "HEAD" && node.tagName != "STYLE") {
+						node.remove();
+					}
+				}
+			});
+			element = element.parentElement;
+			if (element.parentElement) {
+				DomProcessorHelper.isolateElement(element.parentElement, element);
+			}
+		}
+
 		static async resolveImportURLs(stylesheetContent, baseURI) {
 			stylesheetContent = DomUtil.removeCssComments(stylesheetContent);
 			const imports = DomUtil.getImportFunctions(stylesheetContent);