# FeHelper 开发者工具集

## 简介

FeHelper 是一款强大的浏览器开发者工具集，为Web开发者提供了丰富的开发辅助功能。它集成了30+种实用工具，包括代码格式化、JSON处理、编码转换、性能分析、AI助手等，旨在提高开发效率，简化开发流程。

![popup](static/screenshot/popup.png)

![options](static/screenshot/options.png)

![options](static/screenshot/settings.jpg)

## 主要特性

- 🛠️ **丰富的工具集**：包含30+种开发工具，涵盖前端开发的方方面面
- 🚀 **便捷的访问**：支持右键菜单快速访问，一键调用常用功能
- 💻 **跨平台支持**：支持Chrome、Firefox、Edge等主流浏览器
- 🔧 **开发者友好**：提供完整的开发者工具支持和开放平台
- 🎨 **界面美观**：现代化的UI设计，支持夜间模式，提供良好的用户体验
- ⚙️ **个性化配置**：支持工具排序、快捷键设置、功能开关等个性化配置
- 🤖 **AI驱动**：集成AI智能助手，提供代码编写、优化建议等智能功能

## 核心功能

### 🔧 开发工具类
专为前端开发者设计的核心开发工具，提升编码效率和调试体验。

| 工具名称 | 功能描述 | 
|---------|---------|
| [JSON美化工具](?tool=json-format) | 页面自动检测并格式化、手动格式化、乱码解码、排序、BigInt、编辑、下载、皮肤定制等 |
| [JSON比对工具](?tool=json-diff) | 支持两个JSON内容的自动键值比较，并高亮显示差异点，同时也能判断JSON是否合法 |
| [Mock数据生成器](?tool=mock-data) | 快速生成各种测试数据，支持个人信息、商业数据、技术数据等多种类型，提供快速模板一键生成，支持JSON/CSV/SQL/XML格式输出 |
| [代码美化工具](?tool=code-beautify) | 支持多语言的代码美化，包括Javascript、CSS、HTML、XML、SQL等格式 |
| [代码压缩工具](?tool=code-compress) | Web开发用，提供简单的代码压缩功能，支持HTML、Javascript、CSS代码压缩 |
| [简易Postman](?tool=postman) | 开发过程中的接口调试工具，支持GET/POST/HEAD请求方式，且支持JSON内容自动格式化 |
| [Websocket工具](?tool=websocket) | 支持对Websocket接口的抓包测试，包括ws服务的连接测试、消息发送测试、结果分析等 |
| [正则公式速查](?tool=regexp) | 支持JavaScript/Python/PHP/Java等语言的正则速查，包含验证类、提取类、替换类等常用正则表达式 |
| [网站性能优化](?tool=page-timing) | 全面分析网页性能指标，包括核心Web指标(LCP/FID/CLS)、资源加载性能、内存使用等，并提供优化建议 |

### 🔄 编解码转换类
各种格式的数据转换和编解码工具，满足不同开发场景需求。

| 工具名称 | 功能描述 | 
|---------|---------|
| [信息编码转换](?tool=en-decode) | 支持多格式的信息编解码，如Unicode、UTF-8、UTF-16、URL、Base64、MD5、Hex、Gzip等 |
| [进制转换工具](?tool=trans-radix) | 支持2进制到36进制数据之间的任意转换，比如：10进制转2进制，8进制转16进制等 |
| [时间(戳)转换](?tool=timestamp) | 本地化时间与时间戳之间的相互转换，支持秒/毫秒、支持世界时区切换、各时区时钟展示等 |
| [颜色转换工具](?tool=trans-color) | 支持HEX颜色到RGB格式的互转，比如HEX颜色「#43ad7f」转RGB后为「rgb(67, 173, 127)」 |

### 🖼️ 图像处理类
强大的图像处理和生成工具，支持多种格式和自定义配置。

| 工具名称 | 功能描述 | 
|---------|---------|
| [二维码工具](?tool=qr-code) | 支持自定义颜色和icon的二维码生成器，并且支持多种模式的二维码解码，包括截图后粘贴解码 |
| [图片Base64转换](?tool=image-base64) | 支持多种模式的图片转Base64格式，比如链接粘贴/截图粘贴等，也支持Base64数据逆转图片 |
| [SVG转为图片](?tool=svg-converter) | 支持SVG文件转换为PNG、JPG、WEBP等格式，可自定义输出尺寸，支持文件拖放和URL导入 |
| [图表制作工具](?tool=chart-maker) | 快速制作各类数据可视化图表，支持柱状图、折线图、饼图等多种图表类型，可导出为图片格式 |
| [海报快速生成](?tool=poster-maker) | 快速创建营销推广海报，支持朋友圈、小红书等多种模板，可自定义文字、图片和配色 |
| [网页截屏工具](?tool=screenshot) | 可对任意网页进行截屏，支持可视区域截屏、全网页滚动截屏，最终结果可预览后再保存 |
| [页面取色工具](?tool=color-picker) | 可直接在网页上针对任意元素进行色值采集，将光标移动到需要取色的位置，单击确定即可 |

### ⚡ 效率工具类
提升工作效率的实用工具，让日常开发更加便捷。

| 工具名称 | 功能描述 | 
|---------|---------|
| [AI智能助手](?tool=aiagent) | 由AI强力支撑的超智能对话工具，可以让它帮你写代码、改代码、做方案设计、查资料、做分析等 |
| [我的便签笔记](?tool=sticky-notes) | 方便快捷的浏览器便签笔记工具，支持创建目录对笔记进行分类管理，笔记支持一键导出/导入 |
| [Markdown转换](?tool=html2markdown) | Markdown编写/预览工具，支持HTML片段直接转Markdown，支持将内容以PDF格式进行下载 |
| [网页油猴工具](?tool=page-monkey) | 自行配置页面匹配规则、编写Hack脚本，实现网页Hack，如页面自动刷新、自动抢票等 |

### 🔢 计算工具类
各种实用的计算和生成工具，解决特定场景的计算需求。

| 工具名称 | 功能描述 | 
|---------|---------|
| [Crontab工具](?tool=crontab) | 一个简易的Crontab生成工具，支持随机生成Demo，编辑过程中，分时日月周会高亮提示 |
| [贷(还)款利率](?tool=loan-rate) | 贷款或还款利率的计算器，按月呈现还款计划；并支持按还款额反推贷款实际利率 |
| [随机密码生成](?tool=password) | 将各种字符进行随机组合生成密码，可以由数字、大小写字母、特殊符号组成，支持指定长度 |

### 🧩 其他工具
更多专业化和特殊用途的开发工具。

| 工具名称 | 功能描述 | 
|---------|---------|
| [便捷思维导图](?tool=naotu) | 轻量便捷，随想随用，支持自动保存、本地数据存储、批量数据导入导出、图片格式下载等 |
| [Excel转JSON](?tool=excel2json) | 将Excel或CVS中的数据，直接转换成为结构化数据，如JSON、XML、MySQL、PHP等 |
| [网页栅格标尺](?tool=grid-ruler) | Web开发用，横竖两把尺子，以10px为单位，用以检测&校准当前网页的栅格对齐率 |
| [FH开发者工具](?tool=devtools) | 以开发平台的思想，FeHelper支持用户进行本地开发，将自己的插件功能集成进FH工具市场 |

## 插件市场与配置管理

FeHelper提供了完整的插件市场和配置管理功能，让用户可以根据自己的需求灵活安装、配置和管理各种工具。

### 🏪 插件市场功能

#### 工具分类浏览
- **全部分类**：查看所有可用工具的完整列表
- **开发工具类**：JSON处理、Mock数据生成、代码美化、接口调试等核心开发工具
- **编解码转换类**：各种格式的数据转换和编解码工具
- **图像处理类**：二维码、图片转换、截图等图像相关工具
- **效率工具类**：AI助手、便签、Markdown等提升效率的工具
- **计算工具类**：Crontab、贷款计算、密码生成等计算工具
- **其他工具**：思维导图、Excel转换等专业化工具

#### 我的工具管理
- **已安装**：查看和管理已安装的工具，显示安装数量统计
- **我的收藏**：收藏常用工具，快速访问收藏列表
- **最近使用**：自动记录最近使用的工具，方便快速重新访问

#### 搜索与筛选
- **智能搜索**：支持按工具名称和功能描述进行搜索
- **分类筛选**：快速筛选特定分类的工具
- **排序方式**：支持默认排序、最新排序、最热排序
- **视图切换**：支持网格视图和列表视图两种展示方式

#### 工具操作
- **一键安装/卸载**：快速安装或卸载工具
- **右键菜单管理**：选择性地将工具加入或移出右键菜单
- **收藏管理**：对常用工具进行收藏标记
- **批量操作**：支持批量管理多个工具

### ⚙️ 个性化配置

#### FH快捷键设置
- **自定义快捷键**：支持自定义FeHelper快捷键（默认：Alt+Shift+J）
- **键盘导航**：快捷键打开后可用上/下方向键选择功能，回车键直接打开
- **快速访问**：按下快捷键自动打开FeHelper工具面板

#### FH工具排序
- **拖拽排序**：支持拖拽调整已安装工具在弹窗中的显示顺序
- **可视化操作**：直观的拖拽界面，每个工具显示图标、名称和描述
- **实时预览**：拖拽过程中提供视觉反馈和排序预览
- **持久存储**：排序设置自动保存在本地，重启浏览器后依然有效
- **一键重置**：支持重置为默认顺序，恢复初始排列
- **智能排序**：新安装的工具会自动添加到列表末尾

#### FH基本配置

**右键菜单配置**
- **工具集成**：将FeHelper工具添加到浏览器右键菜单
- **插件分享/下载**：将插件分享和下载功能添加到右键菜单
- **FeHelper设置**：将插件设置入口添加到右键菜单
- **智能显示**：仅在相关上下文中显示对应的右键菜单项

**窗口管理配置**
- **单窗口模式**：禁止在多个Tab页/窗口同时打开相同工具
- **防止冲突**：同一个工具只保留一个活动窗口，避免资源浪费

**页面权限配置**
- **iframe支持**：授权FeHelper访问页面所有iframe框架
- **扩展权限**：默认不对网页内嵌的iframe支持，可按需开启

**自动化功能配置**
- **JSON自动美化**：开启JSON页面自动检测并格式化功能
- **皮肤定制**：JSON自动美化后支持工具高级定制和皮肤设置

**主题模式配置**
- **自动夜间模式**：晚上19:00-06:00自动开启夜间模式
- **始终夜间模式**：忽略时间限制，随时启用Dark Mode
- **体验功能**：支持临时体验夜间模式效果
- **护眼设计**：深色主题减少眼部疲劳

### 🎯 推荐与发现

#### 热门工具推荐
- **必装工具**：推荐最实用的核心开发工具
- **最新工具**：展示新增的功能和工具
- **推荐工具**：基于用户使用习惯的个性化推荐
- **广告位**：支持第三方工具推广和合作

#### 智能推荐系统
- **使用统计**：基于工具使用频率进行智能推荐
- **分类推荐**：根据用户安装的工具类型推荐相关工具
- **个性化**：学习用户习惯，提供个性化的工具推荐

## 安装方式

### Chrome浏览器
1. 访问 [Chrome网上应用店](https://chrome.google.com/webstore/detail/pkgccpejnmalmdinmhkkfafefagiiiad)
2. 点击"添加到Chrome"即可安装

### Firefox浏览器
1. 访问 [FeHelper官网](https://addons.mozilla.org/zh-CN/firefox/addon/fehelper-%E5%89%8D%E7%AB%AF%E5%8A%A9%E6%89%8B/)
2. 点击一键安装Firefox版本

### Edge浏览器
1. 访问 [Microsoft Edge扩展商店](https://microsoftedge.microsoft.com/addons/detail/feolnkbgcbjmamimpfcnklggdcbgakhe)
2. 点击"获取"即可安装

### 本地安装
- 官网下载：[FeHelper官网](https://www.baidufe.com/fehelper)
- GitHub下载：[GitHub Release页面](https://github.com/zxlie/FeHelper/releases)

## 使用指南

### 基本使用
1. **扩展图标访问**：点击浏览器工具栏的FeHelper图标打开工具面板
2. **快捷键访问**：使用自定义快捷键（默认Alt+Shift+J）快速打开
3. **右键菜单**：在网页上右键可通过菜单快速访问常用工具
4. **方向键导航**：快捷键打开后可用上/下方向键选择功能，回车键直接打开

### 高级功能
1. **插件市场**：完整的工具市场，支持搜索、分类、安装、卸载等功能
2. **配置管理**：丰富的个性化配置选项，包括快捷键、工具排序、主题模式等
3. **收藏系统**：对常用工具进行收藏，快速访问收藏列表
4. **使用统计**：自动记录工具使用情况，提供最近使用和热门推荐
5. **版本管理**：自动检查版本更新，提供版本对比和一键更新

### 插件市场使用技巧
1. **搜索技巧**：
   - 使用关键词搜索工具名称或功能描述
   - 支持模糊搜索，快速定位所需工具
   
2. **分类筛选**：
   - 按工具类型进行分类筛选
   - 结合搜索和分类，快速找到目标工具
   
3. **视图切换**：
   - 网格视图：适合浏览大量工具，视觉效果更好
   - 列表视图：适合快速查看工具详情，信息更丰富
   
4. **工具管理**：
   - 根据实际需求安装工具，避免安装过多无用工具
   - 定期查看"已安装"列表，清理不常用的工具
   - 善用收藏功能，标记常用工具
   
5. **排序设置**：
   - 通过拖拽调整工具在弹窗中的显示顺序
   - 将常用工具排在前面，提高使用效率

### 性能优化建议
- **精简安装**：只安装必要的工具以减少内存占用和启动时间
- **定期清理**：定期清理不常用的工具，保持插件轻量化
- **合理配置**：合理使用右键菜单功能，避免菜单过于冗长
- **排序优化**：将常用工具排在前面，减少查找时间
- **收藏管理**：善用收藏功能，快速访问常用工具

## 配置指南

### 📋 首次使用配置建议

#### 1. 基础设置
1. **访问配置页面**：
   - 点击FeHelper图标旁的"插件设置"按钮
   - 或在弹窗中点击"更多"进入插件市场

2. **快捷键配置**：
   - 设置个人习惯的快捷键组合
   - 测试快捷键是否与其他软件冲突
   - 熟悉键盘导航方式（上下键选择，回车键确认）

3. **右键菜单设置**：
   - 根据使用习惯开启或关闭右键菜单功能
   - 选择性添加常用功能到右键菜单
   - 避免添加过多项目造成菜单冗长

#### 2. 工具安装与管理
1. **按需安装**：
   - 根据工作需要安装相应的工具
   - 优先安装核心开发工具（JSON、代码美化等）
   - 可以先试用再决定是否长期保留

2. **工具排序**：
   - 将最常用的工具排在前面
   - 按使用频率或功能类型进行排序
   - 定期调整排序以适应工作变化

3. **收藏管理**：
   - 收藏日常高频使用的工具
   - 利用收藏列表快速访问工具
   - 定期清理不再常用的收藏

#### 3. 高级配置
1. **主题设置**：
   - 根据使用时间设置自动夜间模式
   - 或选择始终使用夜间模式保护视力
   - 可先体验夜间模式效果再决定

2. **页面权限**：
   - 根据实际需要开启iframe访问权限
   - 开启JSON自动美化功能（推荐）
   - 配置单窗口模式避免重复打开

### 🔧 常见配置场景

#### 前端开发者配置
**推荐安装工具**：
- JSON美化工具、JSON比对工具
- Mock数据生成器、代码美化工具、代码压缩工具
- 简易Postman、Websocket工具
- 时间戳转换、信息编码转换

**配置建议**：
- 开启JSON自动美化功能
- 设置快捷键为熟悉的组合
- 将开发工具类排在前面

#### 设计师配置
**推荐安装工具**：
- 二维码工具、图片Base64转换
- 颜色转换工具、页面取色工具
- SVG转换工具、海报生成工具
- 网页截屏工具

**配置建议**：
- 将图像处理类工具排在前面
- 开启右键菜单的取色和截图功能
- 收藏常用的颜色和图像工具

#### 产品经理配置
**推荐安装工具**：
- 便签笔记、思维导图
- Markdown转换、图表制作工具
- 二维码工具、海报生成工具
- AI智能助手

**配置建议**：
- 将效率工具类排在前面
- 开启自动夜间模式保护视力
- 善用收藏功能管理常用工具

### 📊 使用数据与反馈

#### 统计功能
- **使用记录**：自动记录每个工具的使用频率和时间
- **热门统计**：基于使用数据推荐热门工具
- **个性化推荐**：根据使用习惯提供个性化工具推荐

#### 版本更新
- **自动检查**：定期检查是否有新版本可用
- **版本对比**：清晰显示当前版本和最新版本信息
- **一键更新**：支持直接跳转到商店进行更新

#### 用户反馈
- **打赏支持**：支持微信打赏鼓励开发者持续更新
- **反馈渠道**：提供多种反馈方式收集用户建议
- **功能投票**：参与新功能的需求讨论和投票

## 开发者支持

### 开放平台
FeHelper支持开发者进行本地开发，可以将自己的插件功能集成到FeHelper工具市场中。

- **开发文档**：详细说明请参考[开发者工具](devtools.md)文档
- **API接口**：提供完整的API接口供第三方工具接入
- **模板工程**：提供标准的工具开发模板和最佳实践

### 贡献方式
1. **代码贡献**：通过GitHub提交Pull Request
2. **Bug反馈**：通过GitHub Issues报告问题
3. **功能建议**：提出新功能需求和改进建议
4. **文档优化**：帮助完善文档和使用说明

## 版本更新

### 最新功能
- ✨ **个性化工具排序**：支持拖拽调整工具显示顺序
- 🤖 **AI智能助手**：集成AI对话功能，支持代码编写和优化
- 📊 **图表制作工具**：新增数据可视化图表制作功能
- 🖼️ **海报生成工具**：快速创建营销推广海报
- ⚡ **网站性能优化**：全面的网页性能分析和优化建议
- 🔄 **SVG转换工具**：支持SVG转换为各种图片格式

### 版本检查
- 扩展会自动检查版本更新
- 在设置页面可查看当前版本和最新版本信息
- 支持一键跳转到商店进行更新

## 社区与支持

### 官方渠道
- **官网**：[https://www.baidufe.com/fehelper](https://www.baidufe.com/fehelper)
- **GitHub**：[https://github.com/zxlie/FeHelper](https://github.com/zxlie/FeHelper)
- **反馈页面**：[在线反馈](https://www.baidufe.com/fehelper/feedback.html)

### 联系方式
- **邮箱反馈**：xianliezhao@foxmail.com
- **微信反馈**：398824681
- **QQ群**：前端开发者交流群

### 打赏支持
如果FeHelper对您的工作有帮助，欢迎通过微信打赏支持项目持续发展和功能改进。

## 隐私与安全

### 隐私保护
- 所有数据处理均在本地进行，不会上传用户数据
- 工具使用过程中产生的临时数据会及时清理
- 严格遵循最小权限原则，只申请必要的浏览器权限

### 安全保障
- 定期进行安全审计和漏洞修复
- 遵循Chrome扩展安全最佳实践
- 支持用户自定义权限管理

## 许可证

FeHelper采用MIT许可证。详情请查看[LICENSE](LICENSE)文件。

---

*FeHelper - 让前端开发更高效*