browser-plugin-creator

# {{name}} {{description}} ## 🚀 功能特性 ### 📊 页面分析 - **DOM结构分析** - 统计页面元素、图片、表单等 - **性能监控** - 实时跟踪页面加载时间和资源使用 - **SEO检查** - 分析页面的SEO优化程度 - **可访问性检测** - 检查无障碍访问合规性 ### 🛠️ 开发工具 - **元素检查器** - 详细查看页面元素属性 - **颜色选择器** - 从页面提取颜色值 - **标尺工具** - 测量页面元素尺寸 - **截图工具** - 快速截取页面区域 ### 🔧 自定义设置 - **主题切换** - 支持浅色/深色/自动主题 - **通知管理** - 自定义通知偏好 - **自动分析** - 配置自动分析规则 - **数据导出** - 导出分析结果和设置 ### 📱 多界面支持 - **弹出窗口** - 快速访问主要功能 - **侧边栏** - 持续监控和详细分析 - **选项页** - 完整的配置管理 - **DevTools** - 深度集成开发者工具 ## 🏗️ 技术架构 - **Manifest V3** - 最新的Chrome扩展标准 - **Service Worker** - 高效的后台处理 - **模块化架构** - 清晰的代码组织结构 - **响应式设计** - 适配不同屏幕尺寸 ## 🛠️ 开发环境 ### 安装依赖 ```bash npm install ``` ### 开发模式 ```bash npm run dev # 访问 http://localhost:3000 进行开发 ``` ### 构建扩展 ```bash npm run build ``` ### 运行测试 ```bash npm test npm run lint ``` ### 打包发布 ```bash npm run package ``` ## 📁 项目结构 ``` ├── src/ │ ├── background/ # 后台服务工作线程 │ ├── content/ # 内容脚本 │ ├── popup/ # 弹出窗口 │ ├── options/ # 选项页面 │ ├── sidepanel/ # 侧边栏 │ ├── devtools/ # 开发者工具 │ └── shared/ # 共享组件和工具 ├── templates/ │ ├── popup.html # 弹出窗口界面 │ ├── options.html # 选项页面 │ ├── sidepanel.html # 侧边栏界面 │ └── devtools.html # 开发者工具 ├── icons/ # 扩展图标 ├── manifest.json # 扩展清单 └── package.json # 项目配置 ``` ## 🎯 使用指南 ### 快速开始 1. 克隆项目并安装依赖 2. 运行 `npm run build` 构建扩展 3. 打开Chrome扩展管理页面 (`chrome://extensions/`) 4. 开启开发者模式并加载已解压的扩展 5. 开始使用扩展功能 ### 功能使用 - **点击扩展图标** - 打开弹出窗口 - **右键页面** - 使用上下文菜单功能 - **按F12** - 打开开发者工具面板 - **点击侧边栏图标** - 打开侧边栏 ## 🔧 配置选项在选项页面中可以配置： - 分析深度和频率 - 通知偏好设置 - 主题和界面选项 - 数据导出格式 - 自定义规则 ## 📊 数据分析扩展提供详细的数据分析： - 页面性能指标 - 资源加载统计 - SEO优化建议 - 用户体验评分 ## 🤝 贡献指南欢迎提交Issue和Pull Request！ ## 📄 许可证 MIT License - 详见 [LICENSE](LICENSE) 文件