Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Chrome Extension Builder</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .code-editor { | |
| font-family: 'Courier New', monospace; | |
| font-size: 14px; | |
| line-height: 1.5; | |
| tab-size: 2; | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| #previewFrame { | |
| border: 1px solid #e5e7eb; | |
| border-radius: 0.5rem; | |
| background: white; | |
| box-shadow: 0 1px 3px rgba(0,0,0,0.1); | |
| } | |
| .draggable-item { | |
| cursor: move; | |
| } | |
| .sidebar-item:hover { | |
| background-color: #f3f4f6; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <header class="mb-8"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <i class="fab fa-chrome text-3xl text-blue-600 mr-3"></i> | |
| <h1 class="text-3xl font-bold text-gray-800">Chrome Extension Builder</h1> | |
| </div> | |
| <div> | |
| <button id="exportBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md flex items-center"> | |
| <i class="fas fa-file-export mr-2"></i> Export Extension | |
| </button> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mt-2">Build your Chrome extension visually with this easy-to-use tool</p> | |
| </header> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> | |
| <!-- Sidebar --> | |
| <div class="lg:col-span-1 bg-white rounded-lg shadow p-4 h-fit"> | |
| <h2 class="text-xl font-semibold mb-4 text-gray-800 flex items-center"> | |
| <i class="fas fa-puzzle-piece mr-2 text-blue-500"></i> Components | |
| </h2> | |
| <div class="space-y-2"> | |
| <div class="sidebar-item draggable-item p-3 rounded border border-gray-200" draggable="true" data-type="popup"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-window-maximize text-blue-500 mr-2"></i> | |
| <span>Popup</span> | |
| </div> | |
| </div> | |
| <div class="sidebar-item draggable-item p-3 rounded border border-gray-200" draggable="true" data-type="content-script"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-file-code text-green-500 mr-2"></i> | |
| <span>Content Script</span> | |
| </div> | |
| </div> | |
| <div class="sidebar-item draggable-item p-3 rounded border border-gray-200" draggable="true" data-type="background"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-server text-purple-500 mr-2"></i> | |
| <span>Background Script</span> | |
| </div> | |
| </div> | |
| <div class="sidebar-item draggable-item p-3 rounded border border-gray-200" draggable="true" data-type="options"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-cog text-yellow-500 mr-2"></i> | |
| <span>Options Page</span> | |
| </div> | |
| </div> | |
| <div class="sidebar-item draggable-item p-3 rounded border border-gray-200" draggable="true" data-type="icon"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-image text-red-500 mr-2"></i> | |
| <span>Extension Icon</span> | |
| </div> | |
| </div> | |
| </div> | |
| <h2 class="text-xl font-semibold mt-6 mb-4 text-gray-800 flex items-center"> | |
| <i class="fas fa-list-check mr-2 text-blue-500"></i> Manifest | |
| </h2> | |
| <div class="bg-gray-100 p-4 rounded-md"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="font-medium">manifest.json</span> | |
| <button id="editManifestBtn" class="text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| </div> | |
| <pre class="text-xs bg-white p-2 rounded overflow-x-auto" id="manifestPreview">{ | |
| "name": "My Extension", | |
| "version": "1.0", | |
| "description": "", | |
| "manifest_version": 3 | |
| }</pre> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="lg:col-span-3 space-y-6"> | |
| <!-- Tabs --> | |
| <div class="bg-white rounded-lg shadow"> | |
| <div class="border-b border-gray-200"> | |
| <nav class="flex -mb-px"> | |
| <button class="tab-btn py-4 px-6 text-center border-b-2 font-medium text-sm border-blue-500 text-blue-600 flex items-center justify-center" data-tab="editor"> | |
| <i class="fas fa-code mr-2"></i> Code Editor | |
| </button> | |
| <button class="tab-btn py-4 px-6 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 flex items-center justify-center" data-tab="preview"> | |
| <i class="fas fa-eye mr-2"></i> Preview | |
| </button> | |
| <button class="tab-btn py-4 px-6 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 flex items-center justify-center" data-tab="console"> | |
| <i class="fas fa-terminal mr-2"></i> Console | |
| </button> | |
| </nav> | |
| </div> | |
| <div class="p-4"> | |
| <!-- Editor Tab --> | |
| <div id="editorTab" class="tab-content active"> | |
| <div class="mb-4 flex justify-between items-center"> | |
| <h3 class="text-lg font-medium" id="currentFile">popup.html</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-gray-100 rounded text-sm" id="saveBtn"> | |
| <i class="fas fa-save mr-1"></i> Save | |
| </button> | |
| <button class="px-3 py-1 bg-gray-100 rounded text-sm" id="newFileBtn"> | |
| <i class="fas fa-plus mr-1"></i> New File | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <select id="fileSelector" class="w-full p-2 border border-gray-300 rounded-md"> | |
| <option value="popup.html">popup.html</option> | |
| <option value="popup.js">popup.js</option> | |
| <option value="popup.css">popup.css</option> | |
| </select> | |
| </div> | |
| <textarea id="codeEditor" class="code-editor w-full h-96 p-4 border border-gray-300 rounded-md" spellcheck="false"></textarea> | |
| </div> | |
| <!-- Preview Tab --> | |
| <div id="previewTab" class="tab-content"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-medium">Extension Preview</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-gray-100 rounded text-sm" id="refreshPreviewBtn"> | |
| <i class="fas fa-sync-alt mr-1"></i> Refresh | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex justify-center"> | |
| <iframe id="previewFrame" src="about:blank" width="400" height="500"></iframe> | |
| </div> | |
| </div> | |
| <!-- Console Tab --> | |
| <div id="consoleTab" class="tab-content"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-medium">Extension Console</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-gray-100 rounded text-sm" id="clearConsoleBtn"> | |
| <i class="fas fa-trash-alt mr-1"></i> Clear | |
| </button> | |
| </div> | |
| </div> | |
| <div id="consoleOutput" class="bg-black text-green-400 font-mono text-sm p-4 rounded-md h-96 overflow-y-auto"> | |
| <div>> Ready to build your Chrome extension!</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project Files --> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <h2 class="text-xl font-semibold mb-4 text-gray-800 flex items-center"> | |
| <i class="fas fa-folder-open mr-2 text-blue-500"></i> Project Files | |
| </h2> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2" id="projectFiles"> | |
| <div class="file-item p-2 border rounded hover:bg-gray-50 cursor-pointer" data-file="popup.html"> | |
| <div class="flex items-center"> | |
| <i class="fab fa-html5 text-orange-500 mr-2"></i> | |
| <span>popup.html</span> | |
| </div> | |
| </div> | |
| <div class="file-item p-2 border rounded hover:bg-gray-50 cursor-pointer" data-file="popup.js"> | |
| <div class="flex items-center"> | |
| <i class="fab fa-js-square text-yellow-500 mr-2"></i> | |
| <span>popup.js</span> | |
| </div> | |
| </div> | |
| <div class="file-item p-2 border rounded hover:bg-gray-50 cursor-pointer" data-file="popup.css"> | |
| <div class="flex items-center"> | |
| <i class="fab fa-css3-alt text-blue-500 mr-2"></i> | |
| <span>popup.css</span> | |
| </div> | |
| </div> | |
| <div class="file-item p-2 border rounded hover:bg-gray-50 cursor-pointer" data-file="manifest.json"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-file-code text-gray-500 mr-2"></i> | |
| <span>manifest.json</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Manifest Editor Modal --> | |
| <div id="manifestModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden"> | |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-screen overflow-auto"> | |
| <div class="flex justify-between items-center border-b p-4"> | |
| <h3 class="text-lg font-medium">Edit manifest.json</h3> | |
| <button id="closeManifestModal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <textarea id="manifestEditor" class="code-editor w-full h-96 p-4 border border-gray-300 rounded-md" spellcheck="false">{ | |
| "name": "My Extension", | |
| "version": "1.0", | |
| "description": "", | |
| "manifest_version": 3 | |
| }</textarea> | |
| </div> | |
| <div class="flex justify-end p-4 border-t"> | |
| <button id="saveManifestBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md"> | |
| Save Changes | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ronakm/extension-builder" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |