Spaces:

duqing026
/

chrome-extension-studio

Sleeping

App Files Files Community

duqing2026 commited on Jan 30

Commit

7b84ccf

1 Parent(s): 8bc4ec7

feat: enhance functionality, fix sidepanel bug, and switch to local static assets

Browse files

Files changed (5) hide show

app.py +10 -3
extension_templates/sidepanel.html +29 -0
static/js/tailwindcss.js +0 -0
static/js/vue.global.js +0 -0
templates/index.html +18 -10

app.py CHANGED Viewed

@@ -78,8 +78,12 @@ def generate():
             # 6. Content Script
             if context['include_content_script']:
                 write_template('content-script.js', 'content-script.js')
-            # 7. Icons (Generated)
             zf.writestr('images/icon16.png', generate_icon(16))
             zf.writestr('images/icon48.png', generate_icon(48))
             zf.writestr('images/icon128.png', generate_icon(128))
@@ -93,7 +97,10 @@ def generate():
         )
     except Exception as e:
         return jsonify({'error': str(e)}), 500
 if __name__ == '__main__':
-    app.run(host='0.0.0.0', port=7860)

             # 6. Content Script
             if context['include_content_script']:
                 write_template('content-script.js', 'content-script.js')
+            # 7. Side Panel
+            if context['include_side_panel']:
+                write_template('sidepanel.html', 'sidepanel.html')
+            # 8. Icons (Generated)
             zf.writestr('images/icon16.png', generate_icon(16))
             zf.writestr('images/icon48.png', generate_icon(48))
             zf.writestr('images/icon128.png', generate_icon(128))
         )
     except Exception as e:
+        import traceback
+        traceback.print_exc()
         return jsonify({'error': str(e)}), 500
 if __name__ == '__main__':
+    port = int(os.environ.get('PORT', 7860))
+    app.run(host='0.0.0.0', port=port)

extension_templates/sidepanel.html ADDED Viewed

	@@ -0,0 +1,29 @@

+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Side Panel</title>
+    <style>
+      body {
+        width: 100%;
+        height: 100vh;
+        margin: 0;
+        padding: 10px;
+        font-family: sans-serif;
+        box-sizing: border-box;
+      }
+      h1 {
+        font-size: 16px;
+        margin-top: 0;
+      }
+      p {
+        font-size: 14px;
+        color: #555;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Side Panel</h1>
+    <p>This is your extension's side panel.</p>
+    <p>You can add more content here.</p>
+  </body>
+</html>

static/js/tailwindcss.js ADDED Viewed

The diff for this file is too large to render. See raw diff

static/js/vue.global.js ADDED Viewed

The diff for this file is too large to render. See raw diff

templates/index.html CHANGED Viewed

@@ -4,8 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Chrome 插件工坊 (Chrome Extension Studio)</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <style>
         body { background-color: #f3f4f6; }
@@ -29,9 +29,9 @@
                     <p class="text-xs text-gray-500">Chrome Extension Studio</p>
                 </div>
             </div>
-            <button @click="generateZip" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium transition flex items-center gap-2 shadow-lg shadow-blue-200">
-                <i class="fa-solid fa-download"></i>
-                下载源码 (ZIP)
             </button>
         </header>
@@ -200,6 +200,7 @@
                 ];
                 const newHostPerm = ref('');
                 const addHostPerm = () => {
                     if(newHostPerm.value && !form.value.host_permissions.includes(newHostPerm.value)) {
@@ -253,14 +254,17 @@
                     }
                     if (form.value.include_side_panel) {
                         manifest.side_panel = { default_path: "sidepanel.html" };
-                        // Note: sidepanel needs "sidePanel" permission usually, let's auto add it?
-                        // Actually let user add it to be safe, or logic it here.
                     }
                     return JSON.stringify(manifest, null, 2);
                 });
                 const generateZip = async () => {
                     try {
                         const response = await fetch('/generate', {
                             method: 'POST',
@@ -279,11 +283,14 @@
                             window.URL.revokeObjectURL(url);
                             document.body.removeChild(a);
                         } else {
-                            alert('Generate failed');
                         }
                     } catch (e) {
                         console.error(e);
-                        alert('Error generating zip');
                     }
                 };
@@ -294,7 +301,8 @@
                     newHostPerm,
                     addHostPerm,
                     manifestJson,
-                    generateZip
                 };
             }
         }).mount('#app');

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Chrome 插件工坊 (Chrome Extension Studio)</title>
+    <script src="/static/js/tailwindcss.js"></script>
+    <script src="/static/js/vue.global.js"></script>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <style>
         body { background-color: #f3f4f6; }
                     <p class="text-xs text-gray-500">Chrome Extension Studio</p>
                 </div>
             </div>
+            <button @click="generateZip" :disabled="isGenerating" class="bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white px-6 py-2 rounded-lg font-medium transition flex items-center gap-2 shadow-lg shadow-blue-200">
+                <i class="fa-solid" :class="isGenerating ? 'fa-spinner fa-spin' : 'fa-download'"></i>
+                {{ isGenerating ? '正在生成...' : '下载源码 (ZIP)' }}
             </button>
         </header>
                 ];
                 const newHostPerm = ref('');
+                const isGenerating = ref(false);
                 const addHostPerm = () => {
                     if(newHostPerm.value && !form.value.host_permissions.includes(newHostPerm.value)) {
                     }
                     if (form.value.include_side_panel) {
                         manifest.side_panel = { default_path: "sidepanel.html" };
+                        if (!manifest.permissions.includes('sidePanel')) {
+                             manifest.permissions.push('sidePanel');
+                        }
                     }
                     return JSON.stringify(manifest, null, 2);
                 });
                 const generateZip = async () => {
+                    if (isGenerating.value) return;
+                    isGenerating.value = true;
                     try {
                         const response = await fetch('/generate', {
                             method: 'POST',
                             window.URL.revokeObjectURL(url);
                             document.body.removeChild(a);
                         } else {
+                            const errorData = await response.json();
+                            alert('Generate failed: ' + (errorData.error || 'Unknown error'));
                         }
                     } catch (e) {
                         console.error(e);
+                        alert('Error generating zip: ' + e.message);
+                    } finally {
+                        isGenerating.value = false;
                     }
                 };
                     newHostPerm,
                     addHostPerm,
                     manifestJson,
+                    generateZip,
+                    isGenerating
                 };
             }
         }).mount('#app');