browser-plugin-creator

# {{name}} {{description}} ## 🎯 功能概述这是一个专为Chrome侧边栏设计的页面分析工具，提供实时、全面的网页洞察。 ### 🔍 核心功能 - **📊 实时概览** - 页面元素、标签、颜色、大小的即时统计 - **🔍 DOM树查看** - 可视化页面DOM结构，支持搜索和过滤 - **⚡ 性能监控** - 页面加载时间、FCP、LCP等关键指标 - **🌐 网络分析** - 资源请求、大小、加载时间的详细统计 - **💾 存储查看** - 本地存储、会话存储、Cookies的完整查看 - **📤 数据导出** - 一键导出分析报告 ### 🎨 界面特色 - **响应式设计** - 完美适配侧边栏宽度 - **深色主题** - 保护眼睛的深色模式 - **实时更新** - 自动刷新页面数据 - **快速操作** - 一键截图、分析、导出 ## 🚀 快速开始 ### 安装扩展 1. 打开Chrome扩展管理页面 (`chrome://extensions/`) 2. 开启右上角的"开发者模式" 3. 点击"加载已解压的扩展程序" 4. 选择本项目文件夹 5. 扩展图标将出现在工具栏 ### 使用侧边栏 1. 点击扩展图标 2. 选择"打开侧边栏"选项 3. 侧边栏将在右侧打开 4. 使用导航切换不同功能面板 ## 🛠️ 开发指南 ### 环境准备 ```bash # 安装依赖 npm install # 开发模式 npm run dev # 构建生产版本 npm run build # 打包扩展 npm run package ``` ### 文件结构 ``` ├── manifest.json # 扩展清单文件 ├── sidepanel.html # 侧边栏主界面 ├── sidepanel.css # 侧边栏样式 ├── sidepanel.js # 侧边栏逻辑 ├── content.js # 内容脚本 ├── background.js # 后台服务 ├── package.json # 项目配置 └── README.md # 项目文档 ``` ## 📊 功能详解 ### 概览面板显示页面的关键统计信息： - 总元素数量 - 唯一标签类型数 - 使用的颜色数量 - 页面总大小 ### 元素面板 - **DOM树可视化** - 层级展示页面结构 - **元素搜索** - 快速定位特定元素 - **详细信息** - 显示标签、ID、类名等 ### 性能面板 - **关键指标** - FCP、LCP、DOMReady、Load时间 - **可视化图表** - 性能数据柱状图 - **实时更新** - 页面性能变化追踪 ### 网络面板 - **资源统计** - 请求总数、总大小、总时间 - **资源列表** - 每个资源的详细信息 - **性能分析** - 识别慢速资源 ### 存储面板 - **本地存储** - 查看localStorage数据 - **会话存储** - 查看sessionStorage数据 - **Cookies** - 查看页面Cookies - **数据编辑** - 支持直接修改存储数据 ## 🎯 使用场景 ### 前端开发 - **调试DOM结构** - 快速查看页面元素层级 - **性能优化** - 识别页面加载瓶颈 - **资源分析** - 检查资源加载效率 ### 网页设计 - **颜色分析** - 提取页面配色方案 - **元素统计** - 了解页面复杂度 - **响应式测试** - 检查不同尺寸下的表现 ### SEO优化 - **页面结构** - 分析HTML语义化程度 - **资源优化** - 检查图片、脚本大小 - **性能监控** - 跟踪页面加载速度 ## 🔧 自定义配置 ### 自动刷新侧边栏每5秒自动刷新数据，确保信息实时性。 ### 数据导出支持将分析结果导出为JSON格式，便于后续分析。 ### 主题切换内置深色主题，减少眼睛疲劳。 ## 📱 兼容性 - **Chrome 88+** - 支持Manifest V3 - **Edge 88+** - 基于Chromium的Edge浏览器 - **其他Chromium浏览器** - 理论上兼容 ## 🤝 贡献欢迎提交Issue和Pull Request！ ## 📄 许可证 MIT License