欢迎光临
我们一直在努力

DevToolBox - 开发者自用 Chrome 扩展

DevToolBox – 开发者自用 Chrome 扩展

我做了一个Chrome开发者工具箱,把所有常用开发工具装在一个标签页里 在这里插入图片描述

零依赖、无广告、纯本地运行、Manifest V3,所有开发者常用工具一个就够了

作为一个后端开发,我每天都要和各种格式转换打交道:JSON格式化、URL转码、时间戳转换、Cron表达式解析… 每次打开那些在线工具网站,要么满屏广告,要么要登录,要么担心粘贴的敏感数据被上传。

忍无可忍,我自己写了一个Chrome扩展——DevToolBox 开发者工具箱,把我平时最常用的工具都整合到了一起,新标签页打开即用,没有任何多余的东西。

📦 GitHub地址:https://github.com/IvoryWalk/devtools-extension 欢迎Star、提Issue、PR!


✨ 它有什么不一样?

现在市面上类似的工具扩展不少,但我这个有几个特点:

1. 🚀 真·零依赖,体积极小

整个扩展打包后只有 38KB,没有任何第三方依赖,纯原生JavaScript写的,打开速度秒开,不会卡。

2. 🔒 绝对安全,数据不上传

所有处理都在浏览器本地完成,完全不联网,你粘贴的生产环境JSON、密钥、配置文件,绝对不会传到任何服务器。源码完全开放,可以自己审计。

符合Chrome最新的Manifest V3规范,没有多余权限,只申请了本地存储权限。

3. 🎨 简洁到极致

没有花里胡哨的皮肤,没有弹窗广告,没有会员引导,没有社交分享。打开就是工具,所有功能平铺在一个页面,不用切Tab,点一下就出结果。

支持系统明暗主题自动切换,晚上用也不刺眼。

4. 🎯 懂你的使用习惯

用的多的功能自动排到最前面,不用每次找半天。当然你也可以完全自定义:功能行顺序、每个按钮的显示隐藏、按钮顺序,想怎么排就怎么排。


🛠️ 现在已经支持的功能

所有功能都是我日常开发高频使用的,没有凑数的:

📋 JSON处理(最常用)

  • 一键格式化/美化JSON
  • JSON压缩/最小化
  • 转义/去转义(复制到代码里不用手动加斜杠)
  • Key按字母排序
  • JSON格式验证,报错提示位置
  • 递归提取指定Key:嵌套再深的JSON也能一键把某个字段都提出来
  • 递归排除指定Key:比如要脱敏去掉所有password、token字段,一键搞定

🔐 编解码

  • URL编码/解码
  • Unicode编码/解码(中文转\\uXXXX那种)
  • GBK编码/解码(用浏览器原生能力,零额外体积)
  • Base64编码/解码

⏰ 时间戳处理

  • 一键获取当前时间戳
  • 时间戳转日期时间,自动识别秒/毫秒
  • 日期时间转时间戳,支持多种格式

⏱️ Cron表达式解析

做后端开发经常要写Cron,这个功能我找了好久好用的工具:

  • 支持三种格式:Linux Cron(5位)、Spring Cron(6位)、Quartz Cron(6-7位)
  • 支持?、L(每月最后一天)等特殊字符
  • 自动计算未来10次执行时间,不用再猜写的对不对

📦 数据暂存

经常遇到要在多个页面之间复制粘贴内容,或者常用的JSON片段每次都要找?内置了暂存功能:

  • 一键保存当前结果到暂存
  • 支持重命名每个暂存项
  • 抽屉式面板,不占主界面
  • 可配置最大条数和容量,自动清理最早的内容

⚙️ 高度可配置

  • 功能行可以拖拽排序
  • 每个按钮都可以单独设置显示/隐藏,不用的功能直接藏起来
  • 按钮顺序可以在弹窗里调整,支持置顶、上移、下移、置底,比拖拽好用
  • 自动排序阈值可以调,比如点100次再重排,不会每次点都跳
  • 所有配置支持导出备份,换电脑导入就行

🖥️ 界面预览

在这里插入图片描述

主界面就是这么简单:

  • 左边输入框,带行号,滚动同步
  • 右边结果框
  • 上面四行功能按钮,最常用的"格式化"是蓝色,其他都是普通按钮
  • 输入输出下面各三个按钮:复制、保存、清空
  • 右边抽屉打开是暂存列表
  • 右上角设置按钮进入配置页

没有任何多余的元素,打开就用。

快捷键:

  • Ctrl/Cmd + Enter:快速格式化JSON
  • Esc:关闭弹窗/抽屉

📦 安装方法

方式一:源码安装(推荐,永远最新版)

git clone https://github.com/IvoryWalk/devtools-extension.git

  • 打开Chrome,进入 chrome://extensions/
  • 开启右上角「开发者模式」
  • 点击「加载已解压的扩展程序」,选择clone下来的文件夹
  • 点击工具栏图标,就会在新标签页打开了
  • 方式二:下载安装包

    在Release页面下载最新的zip包,解压后按照上面的方式加载即可。


    🤔 为什么做这个?

    网上的在线工具我用了不下十个,痛点太明显了:

  • 广告太多:两边弹窗、浮动广告,有时候点按钮还点到广告
  • 数据不安全:公司的配置、生产数据不敢随便粘上去,谁知道后台有没有记录
  • 功能不全:每个网站只有一两个功能,要收藏好几个书签
  • 要登录:用个工具还要注册登录,烦得很
  • 卡:一堆第三方统计脚本,打开半天加载不出来
  • 与其忍,不如自己写一个。反正功能也不复杂,花了几个晚上写完,自己用着舒服,现在开源出来给大家用。


    🚀 后续规划

    现在已经是我日常每天用的状态了,后续还计划加这些功能:

    • SQL格式化、压缩、去注释净化
    • 自定义功能按钮:可以自己加常用的脚本
    • AI能力接入:对接大模型,帮着解释JSON、找错误、写正则
    • 更多小工具:正则测试、UUID生成、Hash计算、加解密
    • 多语言支持

    🤝 最后

    这个工具就是给自己写的,肯定还有不完善的地方,大家用着有什么问题、想要什么功能,欢迎去GitHub提Issue,也欢迎PR。

    如果觉得好用,给个Star就是对我最大的鼓励了 ⭐

    GitHub地址:https://github.com/IvoryWalk/devtools-extension

    赞(0)
    未经允许不得转载:171主机测评 » DevToolBox - 开发者自用 Chrome 扩展
    分享到: 更多 (0)

    评论 抢沙发

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址