-
-
Save markflorkowski/4269bc529324dceb2858c77b7609704c to your computer and use it in GitHub Desktop.
(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'; | |
})(); |
In saved we saved
Saved porhub. Don't see ant video, fix it please
Saved by the bell
guys i made a free website out of it:
https://NoCodeXport.com
Hi all
Now, I have an extra life.
idk what exactly it saved me from but it saved something
doesnt download the fonts or the javascript
Unsaved the thing that was saved earlier.
hi @hololeo could you share me your website so i could make it work ? (dm me on twitter)
inline js should be an option
and for font i'm sorry but they while be external unless i drop you a full .zip file (but it should have worked unless your site block CORS)
so I'll think about adding option buttons like
[x] inline javascript
[x] download font (you will get a .zip)
also guys if it didn't work cause your page isn't build with a website builder you could try https://SiteClone.io it will get better result for this task (it's free) (it also clone not only the page but the whole website and even the api)
wow
Saved Johnny Silverhand's engram
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
-
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.
-
Give it a name. I named it "💾".
-
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"); })();
-
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.
- Unpack dlindexhtml.zip
- 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
Saved Pups @DenVot