self-modifying-page.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Self-Modifying HTML Page</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            line-height: 1.6;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            color: #333;
        }
        h1 {
            color: #2c3e50;
            border-bottom: 2px solid #eee;
            padding-bottom: 10px;
        }
        .step {
            background: #f8f9fa;
            border-left: 4px solid #4285f4;
            margin: 20px 0;
            padding: 15px;
            border-radius: 0 4px 4px 0;
        }
        button {
            background: #4285f4;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            margin-right: 10px;
            margin-top: 10px;
        }
        button:hover {
            background: #3b78e7;
        }
        button:disabled {
            background: #cccccc;
            cursor: not-allowed;
        }
        .status {
            margin-top: 15px;
            padding: 12px;
            background: #e8f0fe;
            border-radius: 4px;
            color: #174ea6;
        }
        .error {
            background: #fdeded;
            color: #5f2120;
        }
        .success {
            background: #e6f4ea;
            color: #0d652d;
        }
        #timestamp {
            font-weight: bold;
        }
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <h1>Self-Modifying HTML File</h1>
    
    <p>This page demonstrates a self-modifying HTML file that can:</p>
    <ol>
        <li>Get a handle to itself</li>
        <li>Validate it's the correct file</li>
        <li>Edit its own content</li>
        <li>Reload to show the changes</li>
    </ol>

    <div class="step" id="step1">
        <h2>Step 1: Get File Handle</h2>
        <p>Click the button below to select this HTML file. The browser will open a file picker - you need to select THIS file.</p>
        <button id="getFileHandleBtn">Select This File</button>
        <div id="step1Status" class="status">Waiting for file selection...</div>
    </div>

    <div class="step hidden" id="step2">
        <h2>Step 2: Validate File</h2>
        <p>Let's verify this is the correct file by checking its contents.</p>
        <button id="validateFileBtn">Validate File</button>
        <div id="step2Status" class="status">Ready to validate...</div>
    </div>

    <div class="step hidden" id="step3">
        <h2>Step 3: Modify File</h2>
        <p>Now let's modify the file by updating the timestamp below.</p>
        <div>Current timestamp: <span id="timestamp">27/03/2025, 19:12:18</span></div>
        <button id="modifyFileBtn">Update Timestamp</button>
        <div id="step3Status" class="status">Ready to modify...</div>
    </div>

    <div class="step hidden" id="step4">
        <h2>Step 4: Reload Page</h2>
        <p>Let's reload the page to see our changes.</p>
        <button id="reloadPageBtn">Reload Page</button>
        <div id="step4Status" class="status">Ready to reload...</div>
    </div>

    <script>
        // Store our file handle
        let fileHandle = null;
        let fileContent = null;
        
        // Check if the browser supports the File System Access API
        if (!('showOpenFilePicker' in window)) {
            document.getElementById('step1Status').textContent = 
                "Your browser doesn't support the File System Access API. Try Chrome, Edge, or another Chromium-based browser.";
            document.getElementById('step1Status').classList.add('error');
            document.getElementById('getFileHandleBtn').disabled = true;
        }
        
        // IndexedDB functions to store and retrieve file handle
        const dbPromise = (() => {
            return new Promise((resolve, reject) => {
                const request = indexedDB.open('SelfModifyingFileDB', 1);
                
                request.onupgradeneeded = () => {
                    const db = request.result;
                    if (!db.objectStoreNames.contains('handles')) {
                        db.createObjectStore('handles', { keyPath: 'id' });
                    }
                };
                
                request.onsuccess = () => resolve(request.result);
                request.onerror = () => reject(request.error);
            });
        })();
        
        // Save file handle to IndexedDB
        async function saveFileHandle(handle) {
            try {
                const db = await dbPromise;
                const transaction = db.transaction('handles', 'readwrite');
                const store = transaction.objectStore('handles');
                
                await new Promise((resolve, reject) => {
                    const request = store.put({ id: 'selfFile', handle });
                    request.onsuccess = () => resolve();
                    request.onerror = () => reject(request.error);
                });
                
                console.log('File handle saved to IndexedDB');
            } catch (error) {
                console.error('Error saving file handle:', error);
            }
        }
        
        // Load file handle from IndexedDB
        async function loadFileHandle() {
            try {
                const db = await dbPromise;
                const transaction = db.transaction('handles', 'readonly');
                const store = transaction.objectStore('handles');
                
                const result = await new Promise((resolve, reject) => {
                    const request = store.get('selfFile');
                    request.onsuccess = () => resolve(request.result);
                    request.onerror = () => reject(request.error);
                });
                
                return result?.handle;
            } catch (error) {
                console.error('Error loading file handle:', error);
                return null;
            }
        }

        // Check if we were recently reloaded after a modification
        if (sessionStorage.getItem('justModified') === 'true') {
            sessionStorage.removeItem('justModified');
            const message = document.createElement('div');
            message.className = 'step success';
            message.innerHTML = '<h2>Success!</h2><p>The page has been successfully modified and reloaded. Check the timestamp above to see the update.</p>';
            document.body.insertBefore(message, document.querySelector('#step1'));
        }
        
        // Try to load the file handle on page load
        (async function loadSavedHandle() {
            try {
                const savedHandle = await loadFileHandle();
                
                if (savedHandle) {
                    fileHandle = savedHandle;
                    
                    // Check if we still have permission
                    const permission = await fileHandle.queryPermission({ mode: 'readwrite' });
                    
                    if (permission === 'granted') {
                        document.getElementById('step1Status').textContent = 'File handle loaded from previous session!';
                        document.getElementById('step1Status').classList.add('success');
                        document.getElementById('step2').classList.remove('hidden');
                    } else {
                        document.getElementById('step1Status').textContent = 'File handle found, but needs permission renewal.';
                        
                        // Add a request permission button
                        const requestPermBtn = document.createElement('button');
                        requestPermBtn.textContent = 'Request Permission Again';
                        requestPermBtn.onclick = async () => {
                            try {
                                const newPermission = await fileHandle.requestPermission({ mode: 'readwrite' });
                                if (newPermission === 'granted') {
                                    document.getElementById('step1Status').textContent = 'Permission granted!';
                                    document.getElementById('step1Status').classList.add('success');
                                    document.getElementById('step2').classList.remove('hidden');
                                } else {
                                    throw new Error('Permission denied');
                                }
                            } catch (error) {
                                document.getElementById('step1Status').textContent = `Error: ${error.message}`;
                                document.getElementById('step1Status').classList.add('error');
                            }
                        };
                        document.getElementById('step1').appendChild(requestPermBtn);
                    }
                }
            } catch (error) {
                console.error('Error loading saved handle:', error);
            }
        })();
        
        // Step 1: Get file handle
        document.getElementById('getFileHandleBtn').addEventListener('click', async () => {
            const statusEl = document.getElementById('step1Status');
            
            try {
                // Show file picker
                const [handle] = await window.showOpenFilePicker({
                    types: [
                        {
                            description: 'HTML Files',
                            accept: {
                                'text/html': ['.html']
                            }
                        }
                    ]
                });
                
                // Store the file handle
                fileHandle = handle;
                
                // Save the file handle to IndexedDB for future use
                await saveFileHandle(handle);
                
                // Get file name
                const file = await handle.getFile();
                
                statusEl.textContent = `Selected file: ${file.name}`;
                statusEl.classList.add('success');
                
                // Show the next step
                document.getElementById('step2').classList.remove('hidden');
                
                // Request write permission
                if ((await handle.queryPermission({ mode: 'readwrite' })) !== 'granted') {
                    const permission = await handle.requestPermission({ mode: 'readwrite' });
                    if (permission !== 'granted') {
                        throw new Error('Write permission was not granted');
                    }
                }
                
            } catch (error) {
                statusEl.textContent = `Error: ${error.message}`;
                statusEl.classList.add('error');
                console.error(error);
            }
        });
        
        // Step 2: Validate file
        document.getElementById('validateFileBtn').addEventListener('click', async () => {
            const statusEl = document.getElementById('step2Status');
            
            if (!fileHandle) {
                statusEl.textContent = 'No file handle. Please complete step 1 first.';
                statusEl.classList.add('error');
                return;
            }
            
            try {
                // Get the file content
                const file = await fileHandle.getFile();
                fileContent = await file.text();
                
                // Check if it's the correct file 
                // We'll do this by checking if it contains our unique element ids
                const requiredIds = ['step1', 'step2', 'step3', 'step4', 'timestamp'];
                const missingIds = requiredIds.filter(id => !fileContent.includes(`id="${id}"`));
                
                if (missingIds.length > 0) {
                    throw new Error(`This doesn't appear to be the correct file. Missing elements: ${missingIds.join(', ')}`);
                }
                
                // Update timestamp display if one exists in the file
                const timestampMatch = fileContent.match(/<span id="timestamp">(.*?)<\/span>/);
                if (timestampMatch && timestampMatch[1] !== 'None yet') {
                    document.getElementById('timestamp').textContent = timestampMatch[1];
                }
                
                statusEl.textContent = 'Validation successful! This is the correct file.';
                statusEl.classList.add('success');
                
                // Show the next step
                document.getElementById('step3').classList.remove('hidden');
                
            } catch (error) {
                statusEl.textContent = `Error: ${error.message}`;
                statusEl.classList.add('error');
                console.error(error);
            }
        });
        
        // Step 3: Modify file
        document.getElementById('modifyFileBtn').addEventListener('click', async () => {
            const statusEl = document.getElementById('step3Status');
            
            if (!fileHandle || !fileContent) {
                statusEl.textContent = 'Missing file handle or content. Please complete previous steps first.';
                statusEl.classList.add('error');
                return;
            }
            
            try {
                // Create a new timestamp
                const now = new Date().toLocaleString();
                
                // Update the timestamp in the file content
                const updatedContent = fileContent.replace(
                    /<span id="timestamp">.*?<\/span>/,
                    `<span id="timestamp">${now}</span>`
                );
                
                // Create a writable stream
                const writable = await fileHandle.createWritable();
                
                // Write the updated content
                await writable.write(updatedContent);
                
                // Close the stream
                await writable.close();
                
                statusEl.textContent = `File successfully modified with timestamp: ${now}`;
                statusEl.classList.add('success');
                
                // Update displayed timestamp
                document.getElementById('timestamp').textContent = now;
                
                // Show the next step
                document.getElementById('step4').classList.remove('hidden');
                
            } catch (error) {
                statusEl.textContent = `Error: ${error.message}`;
                statusEl.classList.add('error');
                console.error(error);
            }
        });
        
        // Step 4: Reload page
        document.getElementById('reloadPageBtn').addEventListener('click', () => {
            // Set a flag in sessionStorage to indicate we're reloading after modification
            sessionStorage.setItem('justModified', 'true');
            
            // Reload the page
            window.location.reload();
        });
    </script>
</body>
</html>