CoolFace
Apppublic

duqing026/chrome-extension-studio

sourceHugging Faceupdated 8mo agoView on Hugging Face
0likes
App README

🧩 Chrome 插件工坊 (Chrome Extension Studio)

零代码可视化构建 Chrome Extension (Manifest V3) 扩展程序，一键导出生产级 ZIP 源码。

想要开发 Chrome 插件但不想写繁琐的 manifest.json 配置？想快速验证一个微型 SaaS 想法？ Chrome 插件工坊 帮你快速生成插件骨架，包含后台脚本、Content Script、Popup 页面等标准组件，并内置消息通信和存储示例代码。

✨ 核心功能

  • —可视化配置 Manifest V3：勾选即可生成标准的 manifest.json，无需记忆复杂的配置项。
  • —组件一键装配：
  • —🧩 Popup Action：点击图标弹出的交互界面。
  • —⚙️ Options Page：独立的设置页面。
  • —🤖 Background Service Worker：后台常驻逻辑。
  • —💉 Content Scripts：网页注入脚本（支持自定义匹配规则）。
  • —📑 Side Panel：侧边栏支持 (Chrome 114+)。
  • —权限管理：可视化的权限选择器（Storage, Tabs, ContextMenus...），自动处理 host_permissions。
  • —代码注入 (Snippets)：
  • —内置 Messaging System (消息通信) 示例，打通 Background 与 Content Script。
  • —内置 Storage API 封装示例。
  • —实时预览：配置过程中实时查看生成的 manifest.json 代码。
  • —一键导出：生成包含完整目录结构、图标和代码文件的 ZIP 包，解压即可在 Chrome 中加载。

🚀 快速开始

Docker 部署 (推荐)

本项目已配置 Dockerfile，可直接部署到 Hugging Face Spaces。

bash
# 构建镜像
docker build -t chrome-extension-studio .

# 运行
docker run -p 7860:7860 chrome-extension-studio

访问 http://localhost:7860 即可使用。

本地开发

bash
# 安装依赖
pip install -r requirements.txt

# 运行
python app.py

🛠️ 技术栈

  • —Frontend: Vue 3 + Tailwind CSS (CDN)
  • —Backend: Flask (Python)
  • —Template Engine: Jinja2 (用于生成扩展代码)
  • —Image Gen: Pillow (用于生成默认图标)

📦 生成项目结构示例

text
my-extension/
├── manifest.json
├── service-worker.js
├── content-script.js
├── popup.html
├── popup.js
├── popup.css
├── options.html
├── options.js
├── images/
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
└── README.md

📝 License