How to save a specified element using singlefile.getPageData?

[tangxiaoqi-tangxiao]

chrome.runtime.onMessage.addListener(async message => {
	if (message.action === "save-page") {
		const pageData = await singlefile.getPageData({
			removeHiddenElements: true,
			removeUnusedStyles: true,
			removeUnusedFonts: true,
			removeImports: true,
			blockScripts: true,
			blockAudios: true,
			blockVideos: true,
			compressHTML: true,
			removeAlternativeFonts: true,
			removeAlternativeMedias: true,
			removeAlternativeImages: true,
			groupDuplicateImages: true
		});
		console.log(pageData);
		
		const linkElement = document.createElement("a");
		linkElement.download = `${pageData.title}.html`;
		linkElement.href = URL.createObjectURL(new Blob([pageData.content], { type: "text/html" }));
		linkElement.click();
	}
});

[gildas-lormeau]

You could parse pageData.content with the DOMParser API, remove nodes from the resulting document, and serialize it into HTML just before calling new Blob([pageData.content]). See below.

// ...

const doc = new DOMParser().parseFromString(pageData.content, "text/html");
doc.querySelectorAll("div.ads").forEach(element => element.remove()); // remove some elements
pageData.content = getDoctypeString(doc) + doc.documentElement.outerHTML;

linkElement.href = URL.createObjectURL(new Blob([pageData.content], { type: "text/html" }));
// ...


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;
}

[tangxiaoqi-tangxiao]

Thank you, I understand.