// ==UserScript== // @name Browser Extension Builder // @description Interactive tool to create browser extensions for Chrome and Edge // @version 1.0.1 // @match https://*.stevefenton.co.uk/* // @icon https://stevefenton.co.uk/icons/favicon.ico // ==/UserScript== (function() { 'use strict'; console.log('Browser Extension Builder initialized'); // Debounce function for performance function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } // Create the builder UI function createBuilderUI() { console.log('Creating builder UI'); // Check if UI already exists if (document.getElementById('extension-builder-panel')) { console.log('Builder UI already exists'); return; } // Create main panel const panel = document.createElement('div'); panel.id = 'extension-builder-panel'; panel.innerHTML = `

🔧 Extension Builder

Extension Name:

Version:

Description:

Match URL Pattern: Which websites should this extension work on?

Permissions (comma-separated):

Extension Code (JavaScript):

`; // Add styles const styles = ` #extension-builder-panel { position: fixed; top: 20px; right: 20px; width: 450px; max-height: 90vh; background: white; border: 2px solid #007bff; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.2); z-index: 999999; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; overflow: hidden; display: flex; flex-direction: column; } .builder-header { background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); color: white; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; } .builder-header h3 { margin: 0; font-size: 18px; font-weight: 600; } .close-btn { background: rgba(255,255,255,0.2); border: none; color: white; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; transition: background 0.2s; } .close-btn:hover { background: rgba(255,255,255,0.3); } .builder-content { padding: 20px; overflow-y: auto; flex: 1; } .form-section { margin-bottom: 16px; } .form-section label { display: block; margin-bottom: 6px; font-weight: 600; color: #333; font-size: 13px; } .form-section input, .form-section textarea { width: 100%; padding: 10px; border: 2px solid #e0e0e0; border-radius: 6px; font-size: 13px; font-family: inherit; box-sizing: border-box; transition: border-color 0.2s; } .form-section input:focus, .form-section textarea:focus { outline: none; border-color: #007bff; } .form-section textarea { resize: vertical; font-family: 'Courier New', monospace; } .form-section small { display: block; margin-top: 4px; color: #666; font-size: 11px; } .button-group { margin: 20px 0; } .generate-btn, .download-btn { width: 100%; padding: 12px; background: linear-gradient(135deg, #28a745 0%, #20873a 100%); color: white; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .generate-btn:hover, .download-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3); } .download-btn { background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); margin-top: 16px; } .download-btn:hover { box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3); } .output-section { margin-top: 20px; padding-top: 20px; border-top: 2px solid #e0e0e0; } .output-section h4 { margin: 0 0 16px 0; color: #333; font-size: 15px; } .file-output { margin-bottom: 16px; background: #f8f9fa; border-radius: 6px; overflow: hidden; } .file-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: #e9ecef; border-bottom: 1px solid #dee2e6; } .file-header strong { color: #495057; font-size: 13px; } .copy-file-btn { padding: 4px 12px; background: #007bff; color: white; border: none; border-radius: 4px; font-size: 11px; cursor: pointer; transition: background 0.2s; } .copy-file-btn:hover { background: #0056b3; } .file-output pre { margin: 0; padding: 12px; background: #f8f9fa; overflow-x: auto; font-size: 11px; line-height: 1.5; color: #212529; } .instructions { background: #e7f3ff; border-left: 4px solid #007bff; padding: 16px; border-radius: 6px; margin: 20px 0; } .instructions h4 { margin: 0 0 12px 0; color: #0056b3; font-size: 14px; } .instructions ol { margin: 0; padding-left: 20px; } .instructions li { margin-bottom: 6px; color: #333; font-size: 12px; line-height: 1.5; } #builder-toggle-btn { position: fixed; bottom: 20px; right: 20px; padding: 14px 20px; background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); color: white; border: none; border-radius: 50px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.2); z-index: 999998; transition: transform 0.2s, box-shadow 0.2s; } #builder-toggle-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); } `; const styleSheet = document.createElement('style'); styleSheet.textContent = styles; document.head.appendChild(styleSheet); document.body.appendChild(panel); // Add event listeners document.getElementById('close-builder').addEventListener('click', () => { panel.style.display = 'none'; }); document.getElementById('generate-extension').addEventListener('click', generateExtension); // Add copy button listeners document.querySelectorAll('.copy-file-btn').forEach(btn => { btn.addEventListener('click', (e) => { const fileType = e.target.getAttribute('data-file'); const outputId = fileType === 'manifest' ? 'manifest-output' : 'worker-output'; const content = document.getElementById(outputId).textContent; navigator.clipboard.writeText(content).then(() => { const originalText = e.target.textContent; e.target.textContent = '✓ Copied!'; setTimeout(() => { e.target.textContent = originalText; }, 2000); }); }); }); console.log('Builder UI created successfully'); } // Generate extension files function generateExtension() { console.log('Generating extension files'); const name = document.getElementById('ext-name').value.trim(); const version = document.getElementById('ext-version').value.trim(); const description = document.getElementById('ext-description').value.trim(); const matchPattern = document.getElementById('ext-match').value.trim(); const permissionsInput = document.getElementById('ext-permissions').value.trim(); const code = document.getElementById('ext-code').value; // Parse permissions const permissions = permissionsInput.split(',').map(p => p.trim()).filter(p => p); // Generate manifest.json const manifest = { "name": name, "version": version, "description": description, "action": {}, "manifest_version": 3, "icons": { "128": "icon-128.png" }, "background": { "service_worker": "worker.js" }, "permissions": permissions, "host_permissions": [matchPattern] }; // Generate worker.js const worker = `// ${name} - Background Service Worker // Generated by Browser Extension Builder console.log('${name} extension loaded'); // Listen for extension icon click chrome.action.onClicked.addListener((tab) => { console.log('Extension icon clicked on tab:', tab.id); // Execute the extension code on the active tab chrome.scripting.executeScript({ target: { tabId: tab.id }, func: extensionCode }); }); // The main extension code function extensionCode() { ${code.split('\n').map(line => ' ' + line).join('\n')} } `; // Display the generated files document.getElementById('manifest-output').textContent = JSON.stringify(manifest, null, 2); document.getElementById('worker-output').textContent = worker; document.getElementById('output-section').style.display = 'block'; // Scroll to output document.getElementById('output-section').scrollIntoView({ behavior: 'smooth', block: 'nearest' }); console.log('Extension files generated successfully'); } // Create toggle button function createToggleButton() { if (document.getElementById('builder-toggle-btn')) { return; } const toggleBtn = document.createElement('button'); toggleBtn.id = 'builder-toggle-btn'; toggleBtn.textContent = '🔧 Build Extension'; toggleBtn.addEventListener('click', () => { const panel = document.getElementById('extension-builder-panel'); if (panel) { panel.style.display = panel.style.display === 'none' ? 'flex' : 'none'; } else { createBuilderUI(); } }); document.body.appendChild(toggleBtn); } // Initialize when DOM is ready function init() { console.log('Initializing Browser Extension Builder'); if (document.body) { createToggleButton(); console.log('Toggle button created'); } else { console.log('Body not ready, waiting...'); setTimeout(init, 100); } } // Start the extension if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } })();

🔧 Extension Builder

Generated Files:

📦 Next Steps:

Browser Extension Builder

About