ReplicateUI

gistfile1.txt

(async function downloadCompleteHTML() {
  // Helper function to fetch content of external files (CSS, JS, images)
  async function fetchResource(url, isBinary = false) {
    try {
      const response = await fetch(url);
      if (isBinary) {
        const blob = await response.blob();
        return new Promise((resolve, reject) => {
          const reader = new FileReader();
          reader.onloadend = () => resolve(reader.result);
          reader.onerror = reject;
          reader.readAsDataURL(blob);
        });
      } else {
        return await response.text();
      }
    } catch (error) {
      console.warn('Failed to fetch resource:', url);
      return '';
    }
  }

  // Helper function to inline external CSS and convert relative URLs to absolute
  async function inlineCSS(linkElement) {
    const href = linkElement.href;
    const cssContent = await fetchResource(href);

    // Resolve relative URLs within CSS (for images, fonts, etc.)
    const resolvedCSS = cssContent.replace(/url\((?!['"]?(?:data|https?|ftp):)['"]?([^'")]+)['"]?\)/g, function(match, relativeUrl) {
      const absoluteUrl = new URL(relativeUrl, href).href;
      return `url(${absoluteUrl})`;
    });

    // Create a <style> tag with the inlined CSS
    const styleElement = document.createElement('style');
    styleElement.textContent = resolvedCSS;
    return styleElement;
  }

  // Helper function to convert images to base64-encoded data URIs
  async function inlineImages(element) {
    const images = element.querySelectorAll('img');
    for (let img of images) {
      if (img.src.startsWith('http')) {
        const dataUri = await fetchResource(img.src, true);
        img.src = dataUri; // Replace the src with base64-encoded data URI
      }
    }
  }

  // Get the entire DOM HTML structure
  const html = document.documentElement.outerHTML;

  // Create a new document to parse and modify the HTML content
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, "text/html");

  // Inline all external CSS files
  const linkElements = [...doc.querySelectorAll('link[rel="stylesheet"]')];
  for (let link of linkElements) {
    const inlineStyleElement = await inlineCSS(link);
    link.replaceWith(inlineStyleElement);
  }

  // Inline all images as base64 data URIs
  await inlineImages(doc);

  // Get the final HTML including the modified DOM
  const finalHTML = doc.documentElement.outerHTML;

  // Create a downloadable HTML file
  const downloadHTML = (content, fileName) => {
    const a = document.createElement("a");
    const file = new Blob([content], { type: "text/html" });
    a.href = URL.createObjectURL(file);
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };

  // Download the final HTML file
  downloadHTML(finalHTML, "index.html");

  // Hide loading overlay
  loadingOverlay.style.display = 'none';
})();

Saved Virgo Supercluster

Najua mko hapa

Saved my soul

Saved my eyes

What about Private Ryan?

как пользоваться?
how to use it?

как пользоваться? how to use it?

Копируешь весь код в консоль(Ctrl+Shift+I) и жмешь Enter, сайт скачается в файл index.html

@MuwMx,
You can create a bookmarklet and use it bookmarklet on any page you want to save.
Just click it, and a downloadable file will be created automatically.

How to create the bookmarklet

1. Initiate creating a new bookmark in your browser.

   If you cannot initiate the creation of a new bookmark...

   ..., you can edit any existing one by changing its name and the link to the program code.

2. Give it a name. I named it "💾".

3. Paste the code below as the URL of the bookmark.

   javascript:(async function downloadCompleteHTML() { async function fetchResource(url, isBinary = false) { try { const response = await fetch(url); if (isBinary) { const blob = await response.blob(); return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onloadend = () => resolve(reader.result); reader.onerror = reject; reader.readAsDataURL(blob); }); } else { return await response.text(); } } catch (error) { console.warn('Failed to fetch resource:', url); return ''; } } async function inlineCSS(linkElement) { const href = linkElement.href; const cssContent = await fetchResource(href); const resolvedCSS = cssContent.replace(/url\((?!['"]?(?:data|https?|ftp):)['"]?([^'")]+)['"]?\)/g, function(match, relativeUrl) { const absoluteUrl = new URL(relativeUrl, href).href; return `url(${absoluteUrl})`; }); const styleElement = document.createElement('style'); styleElement.textContent = resolvedCSS; return styleElement; } async function inlineImages(element) { const images = element.querySelectorAll('img'); for (let img of images) { if (img.src.startsWith('http')) { const dataUri = await fetchResource(img.src, true); img.src = dataUri; } } } const html = document.documentElement.outerHTML; const parser = new DOMParser(); const doc = parser.parseFromString(html, "text/html"); const linkElements = [...doc.querySelectorAll('link[rel="stylesheet"]')]; for (let link of linkElements) { const inlineStyleElement = await inlineCSS(link); link.replaceWith(inlineStyleElement); } await inlineImages(doc); const finalHTML = doc.documentElement.outerHTML; const downloadHTML = (content, fileName) => { const a = document.createElement("a"); const file = new Blob([content], { type: "text/html" }); a.href = URL.createObjectURL(file); a.download = fileName; document.body.appendChild(a); a.click(); document.body.removeChild(a); }; downloadHTML(finalHTML, "index.html"); })();
   

4. Save the bookmark. 🎉, you have just created the "💾" bookmarklet.

---

👉🏻 Note: It may not work on some websites (e.g., GitHub) due to security policies.

@MuwMx
i made a website to make it easier to use: https://nocodexport.com/

I've added Tampermonkey (https://www.tampermonkey.net/) script for this implementation.

Tampermonkey is plugin to run scripts on any page
e.g. in Chrome: https://chromewebstore.google.com/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo

Here is the script and guide
https://gist.github.com/crutch12/a43178a7c45d2dc8ecfbbcb05a9246e3

@MuwMx i made a website to make it easier to use: https://nocodexport.com/

Nice homie!

https://drive.google.com/file/d/14yRZZf4_gEdBdZJ0auwmnXVQf73iBZMu/view?usp=sharing

Hi.

1. Unpack dlindexhtml.zip
2. Installing the extension to Chrome:
   Open Chrome and go to the chrome://extensions/ page.
   Turn on developer mode in the top right corner.
   Click “Download unzipped extension” and select the folder with your extension.

Cool

@MuwMx Я создал сайт, чтобы сделать его более удобным в использовании: https://nocodexport.com/

Сайт хороший. Есть возможность добавить функцию скачать не только указанную страницу, но и весь сайт (все страницы) при указании главной страницы сайта, желательно с js, сss и т.д.? Было бы супер!

Just read this; nice update!