☰

Capture and Save Website Source

Capture HTML, CSS, and JS of the page and save it as a file

  1. // ==UserScript==
  2. // @name         Capture and Save Website Source
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Capture HTML, CSS, and JS of the page and save it as a file
  6. // @author       You
  7. // @match        *://*/*
  8. // @grant        GM_download
  9. // @grant        GM_info
  10. // @require      https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js
  11. // @require      https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.     'use strict';
  16.  
  17.     // Function to capture and save the website's HTML, CSS, and JS
  18.     function captureAndSave() {
  19.         // Get HTML content
  20.         let htmlContent = document.documentElement.outerHTML;
  21.  
  22.         // Get CSS content
  23.         let cssContent = '';
  24.         document.querySelectorAll('link[rel="stylesheet"]').forEach(link => {
  25.             fetch(link.href)
  26.                 .then(response => response.text())
  27.                 .then(css => cssContent += css);
  28.         });
  29.  
  30.         // Get JavaScript content
  31.         let jsContent = '';
  32.         document.querySelectorAll('script[src]').forEach(script => {
  33.             fetch(script.src)
  34.                 .then(response => response.text())
  35.                 .then(js => jsContent += js);
  36.         });
  37.  
  38.         // Wait for all fetch requests to complete
  39.         Promise.all([
  40.             ...Array.from(document.querySelectorAll('link[rel="stylesheet"]')).map(link => fetch(link.href).then(response => response.text())),
  41.             ...Array.from(document.querySelectorAll('script[src]')).map(script => fetch(script.src).then(response => response.text()))
  42.         ]).then(() => {
  43.             // Create a new JSZip instance
  44.             const zip = new JSZip();
  45.             zip.file("index.html", htmlContent);
  46.             zip.file("styles.css", cssContent);
  47.             zip.file("scripts.js", jsContent);
  48.  
  49.             // Generate the ZIP file and save it
  50.             zip.generateAsync({ type: "blob" })
  51.                 .then(content => {
  52.                     saveAs(content, "website-source.zip");
  53.                 });
  54.         });
  55.     }
  56.  
  57.     // Add a button to trigger capture and save
  58.     let button = document.createElement('button');
  59.     button.textContent = 'Save Website Source';
  60.     button.style.position = 'fixed';
  61.     button.style.top = '10px';
  62.     button.style.right = '10px';
  63.     button.style.zIndex = '9999';
  64.     button.style.padding = '10px';
  65.     button.style.backgroundColor = '#007BFF';
  66.     button.style.color = '#FFFFFF';
  67.     button.style.border = 'none';
  68.     button.style.borderRadius = '5px';
  69.     button.style.cursor = 'pointer';
  70.     document.body.appendChild(button);
  71.  
  72.     button.addEventListener('click', captureAndSave);
  73. })();