FeHelper For Chrome, Firefox & MS-Edge
FeHelper是一个功能强大的浏览器扩展，专为前端开发者设计，集成了多种实用工具，帮助开发者提高工作效率。无论是JSON数据处理、二维码生成与解码，还是代码美化与压缩，FeHelper都能为您提供便捷的解决方案。
一、功能展示
二、贡献指南
我们欢迎社区的贡献！如果您有兴趣参与FeHelper的开发，请按照以下步骤进行：
- Fork本仓库并克隆到本地。
- 创建一个新的分支：
git checkout -b feature/YourFeature
- 提交您的更改：
git commit -m 'Add some feature'
- 推送到分支：
git push origin feature/YourFeature
- 创建一个Pull Request。
三、官网地址
https://www.baidufe.com/fehelper/index/index.html
1、扩展示例
2、关于新版
- 新版本的FeHelper，是以开放平台为思路的设计，详细了解FeHelper新版，可以参考链接：
- 新版本FeHelper在一个新的
私有仓储，待打磨得足够细腻了，再考虑开源
四、功能详细介绍
FeHelper是一个功能强大的开发者工具，专为前端开发者设计，集成了多种实用工具，帮助开发者提高工作效率。以下是FeHelper的主要功能：
-
JSON工具:
- JSON美化工具：自动检测并格式化JSON数据，支持手动格式化、乱码解码、排序、BigInt处理、编辑、下载和皮肤定制等功能，极大地方便了开发者对JSON数据的处理。
- JSON比对工具：支持两个JSON内容的自动键值比较，并高亮显示差异点，帮助开发者快速识别数据变化。
-
二维码工具:
- 二维码生成器：支持自定义颜色和icon的二维码生成，适用于多种应用场景。
- 二维码解码器：支持多种模式的二维码解码，包括截图后粘贴解码，方便快捷。
-
编码工具:
- 字符串编解码：支持多格式的信息编解码，如Unicode、UTF-8、URL、Base64、MD5等，满足不同编码需求。
- 代码美化工具：支持多语言的代码美化，包括Javascript、CSS、HTML、XML、SQL，帮助开发者保持代码整洁。
- 代码压缩工具：提供简单的代码压缩功能，支持HTML、Javascript、CSS代码压缩，优化网页加载速度。
-
开发者工具:
- AI助手：由AI强力支撑的超智能对话工具，支持代码编写、改代码、做方案设计等，提升开发效率。
- 简易Postman：接口调试工具，支持GET/POST/HEAD请求方式，自动格式化JSON内容，简化API测试流程。
- Websocket工具：支持对Websocket接口的抓包测试，包括ws服务的连接测试、消息发送测试、结果分析等。
-
其他工具:
- 时间(戳)转换：本地化时间与时间戳之间的相互转换，支持秒/毫秒、世界时区切换、各时区时钟展示等。
- 随机密码生成：将各种字符进行随机组合生成密码，支持指定长度和字符类型，确保密码安全性。
- 我的便签笔记：便签笔记工具，支持创建目录对笔记进行分类管理，笔记支持一键导出/导入，方便信息管理。
- Markdown转换：Markdown编写/预览工具，支持HTML片段直接转Markdown，支持将内容以PDF格式进行下载。
- 网页截屏工具：可对任意网页进行截屏，支持可视区域截屏、全网页滚动截屏，最终结果可预览后再保存。
- 页面取色工具：可直接在网页上针对任意元素进行色值采集，将光标移动到需要取色的位置，单击确定即可。
FeHelper不仅功能强大，而且易于使用，是前端开发者的得力助手。更多工具和详细介绍请访问FeHelper官网。
五、扩展安装地址
1、Chrome web store地址（推荐）
https://chrome.google.com/webstore/detail/pkgccpejnmalmdinmhkkfafefagiiiad?hl=zh-cn
2、Microsoft Edge Addons
https://microsoftedge.microsoft.com/addons/detail/feolnkbgcbjmamimpfcnklggdcbgakhe?hl=zh-CN
- 如果你在使用Microsoft Edge浏览器的话，
可以直接安装，不用翻墙
3、Firefox Add-ons
4、crx文件下载=>本地安装(Chrome)
六、使用方法
使用FeHelper时，请遵循以下最佳实践，以确保安全和高效：
-
从可信来源安装：
- 确保只从官方浏览器商店（如Chrome Web Store）安装FeHelper，以避免潜在的安全风险。
-
定期检查和更新：
- 定期检查FeHelper的更新，以确保使用最新版本，获得最新的功能和安全修复。
-
管理权限：
- 在安装FeHelper时，仔细查看所请求的权限，确保它们与扩展的功能相符。
-
安全使用：
-
用户反馈和支持：
- 如果在使用FeHelper时遇到问题或有建议，及时通过提供的反馈渠道联系开发者。
通过遵循这些指南，您可以更安全、更高效地使用FeHelper，充分发挥其强大的功能。
七、用户反馈渠道
八、使用推荐与案例
FeHelper在开发者社区中广受好评，以下是一些使用推荐和案例：
-
接口调试工具: FeHelper被誉为强大的接口调试工具，支持模拟各种HTTP请求，保存cookie等信息，详情请参阅CSDN博客。
-
功能丰富的插件: FeHelper支持多种浏览器，提供JSON格式化、代码美化与压缩等功能，更多信息请访问CSDN博客。
-
前端开发测试利器: FeHelper包含字符串编解码、代码美化、JSON格式化查看等前端实用工具，详见博客园。
-
网页源码压缩: FeHelper在网页html源码压缩、css或javascript的压缩方面表现出色，更多内容在阿里云开发者社区。
-
前端必备插件: FeHelper被推荐为前端必备的Chrome插件，详情请查看稀土掘金。
九、一些样例
FeHelper功能开发
最新更新：个性化工具排序功能
功能简介
新增了个性化工具排序功能，允许用户自定义已安装工具在弹窗中的显示顺序，提升使用体验。
使用方法
- 点击扩展图标旁的"插件设置"按钮，或在弹窗中点击"更多"
- 在设置页面中找到"FH工具排序"部分
- 通过拖拽调整工具的显示顺序
- 点击"保存排序"按钮确认更改
- 新的排序将立即在弹窗中生效
功能特性
- 拖拽排序: 直观的拖拽界面，轻松调整工具顺序
- 实时预览: 拖拽过程中提供视觉反馈
- 自动保存: 支持重置为默认顺序
- 兼容性好: 新安装的工具会自动添加到列表末尾
- 持久存储: 排序设置保存在本地，重启浏览器后依然有效
技术实现
- 使用HTML5拖拽API实现交互功能
- 通过chrome.storage.local存储用户自定义排序
- 修改popup显示逻辑，优先使用用户自定义排序
- 提供友好的用户界面和操作反馈
注意事项
- 只有已安装的工具才会出现在排序列表中
- 卸载工具后，该工具会自动从排序列表中移除
- 重置排序将恢复到默认的安装时间顺序
最新优化：弹窗显示优化
问题描述
修复了当启用工具数量较少时弹窗显示不协调的问题，优化了不同工具数量下的视觉体验。
优化内容
-
动态布局调整:
- 根据已安装工具数量自动调整弹窗最小高度
- 1个工具时使用紧凑布局（110px最小高度）
- 2-3个工具时使用适中布局（140px最小高度）
- 4个及以上工具使用标准布局（120px最小高度）
-
间距优化:
- 工具数量少时增加工具项的高度和间距
- 优化图标位置，确保视觉平衡
- 改进工具列表的内边距设置
-
布局增强:
- 使用Flexbox布局，确保反馈区域始终在底部
- 添加平滑过渡动画，提升用户体验
- 优化工具列表滚动行为，支持大量工具时的滚动显示
-
响应式设计:
- 设置合理的最大高度，避免弹窗过高
- 确保在不同屏幕DPI下都有良好的显示效果
- 优化空状态和加载状态的显示
技术实现
- 使用Vue.js计算属性动态判断工具数量
- CSS类名动态绑定实现不同状态下的样式
- 添加调试日志便于开发时查看布局状态
- 平滑过渡动画提升用户体验
评论