{"id":40730398,"url":"https://github.com/daichangya/dev-tools-chrome","last_synced_at":"2026-01-21T14:31:22.481Z","repository":{"id":292770134,"uuid":"981871501","full_name":"daichangya/dev-tools-chrome","owner":"daichangya","description":"Integrated developer tool suite: JSON/XML formatting, text encryption/decryption, Base64 encoding/decoding, encoding conversion","archived":false,"fork":false,"pushed_at":"2026-01-19T09:23:57.000Z","size":818,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-19T16:54:49.631Z","etag":null,"topics":["chrome","json","xml"],"latest_commit_sha":null,"homepage":"https://chromewebstore.google.com/detail/dev-tools/kjlnngihiddagfiojdggelcedcdnkaii","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/daichangya.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-05-12T03:06:41.000Z","updated_at":"2026-01-19T09:24:01.000Z","dependencies_parsed_at":"2025-05-12T04:23:46.539Z","dependency_job_id":"5a474420-b523-4871-ada4-250db8240980","html_url":"https://github.com/daichangya/dev-tools-chrome","commit_stats":null,"previous_names":["daichangya/dev-tools-chrome"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/daichangya/dev-tools-chrome","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daichangya%2Fdev-tools-chrome","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daichangya%2Fdev-tools-chrome/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daichangya%2Fdev-tools-chrome/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daichangya%2Fdev-tools-chrome/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/daichangya","download_url":"https://codeload.github.com/daichangya/dev-tools-chrome/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daichangya%2Fdev-tools-chrome/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28634807,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-21T04:47:28.174Z","status":"ssl_error","status_checked_at":"2026-01-21T04:47:22.943Z","response_time":86,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chrome","json","xml"],"created_at":"2026-01-21T14:31:22.426Z","updated_at":"2026-01-21T14:31:22.475Z","avatar_url":"https://github.com/daichangya.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dev Tools Chrome Extension\n\n一个功能强大的Chrome浏览器扩展，为开发者和IT工作者提供集成化的开发工具套件。\n\n## 📋 项目简介\n\n本项目是一个基于 Chrome Extension Manifest V3 开发的开发者工具集合，提供14种常用的文本处理、格式化和转换工具。该扩展采用现代化的前端技术栈，支持中英文双语界面，具有良好的用户体验和可扩展的架构设计。\n\n## 📚 文档导航\n\n- **[README.md](./README.md)** - 项目概览和使用指南（当前文档）\n- **[快速上手](./docs/QUICK_START.md)** - 5分钟快速开始和开发指南\n- **[架构文档](./docs/ARCHITECTURE.md)** - 详细的技术架构和实现细节\n- **[工具使用指南](./docs/TOOLS_GUIDE.md)** - 所有工具的详细使用说明\n\n### 核心特性\n\n- ✅ **14种实用工具** - 覆盖JSON/XML处理、加密解密、编码转换等多个场景\n- ✅ **双语支持** - 内置中英文界面，支持实时切换\n- ✅ **模块化架构** - 基于ES6模块化设计，易于扩展和维护\n- ✅ **美观UI** - 采用Material Design图标和现代化CSS设计\n- ✅ **即开即用** - 无需额外配置，安装即可使用\n\n## 📦 项目结构\n\n```\ndev-tools-chrome/\n├── manifest.json              # Chrome扩展配置文件\n├── index.html                 # 主页面HTML\n├── index.js                   # 主入口文件\n├── background.js              # 后台服务Worker\n├── css/                       # 样式文件目录\n│   ├── styles.css            # 主样式文件\n│   └── materialdesignicons.min.css  # 图标字体样式\n├── fonts/                     # 字体文件目录\n│   └── materialdesignicons-webfont.ttf\n├── images/                    # 图标资源目录\n│   ├── icon16.png\n│   ├── icon48.png\n│   └── icon128.png\n└── js/                        # JavaScript源码目录\n    ├── tools.js              # 工具管理器\n    ├── base-tool.js          # 工具基类\n    ├── i18n.js               # 国际化配置文件\n    ├── language-manager.js   # 语言管理器\n    └── tools/                 # 工具实现目录\n        ├── json-formatter.js\n        ├── xml-formatter.js\n        ├── text-encrypt.js\n        ├── base64-converter.js\n        ├── base64-image-converter.js\n        ├── case-converter.js\n        ├── text-to-ascii.js\n        ├── text-to-unicode.js\n        ├── json-diff.js\n        ├── string-reverse.js\n        ├── text-diff.js\n        ├── ascii-art.js\n        ├── text-icon-generator.js\n        └── json-to-javabean.js\n```\n\n## 🛠️ 功能列表\n\n### 1. JSON转换和格式化 (JSON Formatter)\n- JSON数据格式化和美化\n- JSON验证和错误提示\n- 支持压缩和展开显示\n\n### 2. XML格式化 (XML Formatter)\n- XML数据格式化\n- XML结构验证\n\n### 3. 加密/解密文本 (Text Encryption)\n- 支持多种加密算法\n- 凯撒密码加密/解密\n- Base64编码/解码\n\n### 4. Base64文件转换器 (Base64 Converter)\n- 文本转Base64编码\n- Base64编码转文本\n- 支持文件上传和转换\n\n### 5. Base64转图片 (Base64 Image Converter)\n- Base64编码转图片预览\n- 图片下载功能\n- 支持多种图片格式\n\n### 6. 大小写转换 (Case Converter)\n- 转换为大写\n- 转换为小写\n- 首字母大写（标题格式）\n- 句首大写（句子格式）\n\n### 7. 文本到ASCII (Text to ASCII)\n- 文本转ASCII码\n- 文本转二进制\n- ASCII码转文本\n\n### 8. 文本到Unicode (Text to Unicode)\n- 文本转Unicode编码\n- 支持\\u格式和U+格式\n- Unicode编码转文本\n\n### 9. JSON差异比较 (JSON Diff)\n- 两个JSON对象对比\n- 差异高亮显示\n- 支持添加、删除、修改等操作识别\n\n### 10. 字符串逆序 (String Reverse)\n- 按字符反转\n- 按单词反转\n- 按句子反转\n\n### 11. 文本比较 (Text Diff)\n- 字符级别比较\n- 单词级别比较\n- 行级别比较\n- 差异可视化\n\n### 12. ASCII艺术字生成器 (ASCII Art Generator)\n- 标准字体生成\n- 方块字体生成\n- 简单字体生成\n\n### 13. 文字图标生成器 (Text Icon Generator)\n- 自定义文字图标\n- 多种样式（标准、圆角、描边）\n- 颜色和大小自定义\n- PNG格式导出\n\n### 14. JSON转JavaBean (JSON to JavaBean)\n- JSON对象转JavaBean类\n- 自动生成getter/setter方法\n- 支持嵌套对象处理\n\n## 🏗️ 技术架构\n\n### 技术栈\n\n- **前端框架**: 原生JavaScript (ES6+)\n- **模块化**: ES6 Modules\n- **浏览器API**: Chrome Extension API (Manifest V3)\n- **UI框架**: 原生HTML5 + CSS3\n- **图标库**: Material Design Icons\n- **国际化**: 自定义i18n实现\n\n### 架构设计\n\n#### 1. 模块化设计\n\n项目采用ES6模块化设计，主要模块包括：\n\n- **ToolManager** (`js/tools.js`): 工具管理器，负责工具的注册、切换和生命周期管理\n- **BaseTool** (`js/base-tool.js`): 工具基类，提供统一的UI模板和通用功能\n- **LanguageManager** (`js/language-manager.js`): 语言管理器，处理多语言切换\n- **i18n** (`js/i18n.js`): 国际化配置文件，存储所有语言文本\n\n#### 2. 工具开发模式\n\n每个工具都继承自 `BaseTool` 基类，实现以下方法：\n\n```javascript\nexport class CustomTool extends BaseTool {\n  constructor() {\n    super();\n    // 初始化工具特定配置\n  }\n\n  show() {\n    // 渲染工具UI\n    this.container.innerHTML = this.createUI();\n    this.setupEventListeners();\n  }\n\n  setupSpecificEventListeners() {\n    // 设置工具特定的交互逻辑\n  }\n}\n```\n\n#### 3. 国际化机制\n\n- 所有文本内容存储在 `i18n.js` 中\n- 支持中英文双语\n- 通过 `LanguageManager` 实现动态切换\n- 工具文本通过 `languageManager.getText()` 方法获取\n\n#### 4. 样式系统\n\n- 使用CSS变量定义主题颜色\n- 响应式布局设计\n- Material Design风格的图标系统\n\n## 📥 安装指南\n\n### 方法一：从源码安装（开发模式）\n\n1. **下载项目代码**\n   ```bash\n   git clone \u003crepository-url\u003e\n   cd dev-tools-chrome\n   ```\n\n2. **打开Chrome扩展管理页面**\n   - 在Chrome浏览器地址栏输入: `chrome://extensions/`\n   - 或者通过菜单：`更多工具` → `扩展程序`\n\n3. **开启开发者模式**\n   - 在扩展程序页面右上角，开启\"开发者模式\"开关\n\n4. **加载扩展**\n   - 点击\"加载已解压的扩展程序\"按钮\n   - 选择项目根目录（包含 `manifest.json` 的文件夹）\n   - 点击\"选择文件夹\"\n\n5. **完成安装**\n   - 扩展安装成功后，会在Chrome工具栏显示扩展图标\n   - 点击图标即可打开工具集\n\n### 方法二：打包安装\n\n1. 在扩展程序页面点击\"打包扩展程序\"\n2. 选择项目根目录\n3. 生成 `.crx` 文件\n4. 通过拖拽方式安装生成的 `.crx` 文件\n\n## 🚀 使用指南\n\n### 基本操作\n\n1. **打开工具**\n   - 点击Chrome工具栏中的扩展图标\n   - 或者通过扩展菜单打开\n\n2. **选择工具**\n   - 在左侧侧边栏点击需要的工具菜单项\n   - 工具界面会在主内容区域显示\n\n3. **使用工具**\n   - 在输入框中输入或粘贴需要处理的内容\n   - 根据需要调整工具选项（如果有）\n   - 点击\"转换\"或相应的处理按钮\n   - 结果会显示在输出框中\n\n4. **复制结果**\n   - 点击\"复制结果\"按钮\n   - 或者手动选择输出框内容复制\n\n5. **切换语言**\n   - 在顶部右侧选择语言（中文/English）\n   - 界面文本会实时切换\n\n### 工具使用示例\n\n#### JSON格式化示例\n\n1. 选择\"JSON转换和格式化\"工具\n2. 在输入框粘贴JSON字符串（压缩或未格式化的）\n3. 点击\"转换\"按钮\n4. 格式化后的JSON会显示在输出框\n5. 点击\"复制结果\"复制到剪贴板\n\n#### Base64编码示例\n\n1. 选择\"Base64 文件转换器\"工具\n2. 在输入框输入需要编码的文本\n3. 点击\"转换为Base64\"按钮\n4. 获取Base64编码结果\n5. 如需解码，粘贴Base64编码后点击\"Base64转文件\"\n\n## 🔧 开发指南\n\n### 环境要求\n\n- Chrome浏览器（支持Manifest V3）\n- 文本编辑器或IDE（推荐VS Code）\n- 基础JavaScript和HTML/CSS知识\n\n### 添加新工具\n\n1. **创建工具文件**\n   在 `js/tools/` 目录下创建新工具文件，例如 `custom-tool.js`:\n\n   ```javascript\n   import BaseTool from '../base-tool.js';\n   import languageManager from '../language-manager.js';\n\n   export class CustomTool extends BaseTool {\n     constructor() {\n       super();\n     }\n\n     show() {\n       this.container.innerHTML = this.createUI();\n       this.setupCommonEventListeners();\n       this.setupSpecificEventListeners();\n     }\n\n     setupSpecificEventListeners() {\n       const processBtn = document.getElementById('processBtn');\n       const input = document.getElementById('input');\n       const output = document.getElementById('output');\n\n       if (processBtn) {\n         processBtn.addEventListener('click', () =\u003e {\n           // 实现工具逻辑\n           const inputText = input.value;\n           output.value = this.process(inputText);\n         });\n       }\n     }\n\n     process(text) {\n       // 工具核心处理逻辑\n       return text;\n     }\n   }\n   ```\n\n2. **注册工具**\n   在 `js/tools.js` 中导入并注册新工具:\n\n   ```javascript\n   import { CustomTool } from './tools/custom-tool.js';\n\n   // 在 initializeTools() 方法中添加\n   this.tools = {\n     // ... 其他工具\n     'customtool': new CustomTool()\n   };\n   ```\n\n3. **添加菜单项**\n   在 `index.html` 中添加菜单项:\n\n   ```html\n   \u003cdiv class=\"menu-item\" data-tool-id=\"customtool\"\u003e\n     \u003ci class=\"mdi mdi-icon-name\"\u003e\u003c/i\u003e\n     \u003cspan\u003e自定义工具\u003c/span\u003e\n   \u003c/div\u003e\n   ```\n\n4. **添加国际化文本**\n   在 `js/i18n.js` 中添加工具相关文本:\n\n   ```javascript\n   zh: {\n     menuItems: {\n       'customtool': '自定义工具'\n     },\n     tools: {\n       'customtool': {\n         title: '自定义工具',\n         description: '工具描述'\n       }\n     }\n   }\n   ```\n\n### 调试技巧\n\n1. **查看控制台日志**\n   - 右键点击扩展图标 → \"检查弹出内容\"\n   - 或者在工具页面按 `F12` 打开开发者工具\n\n2. **检查后台服务**\n   - 在扩展程序页面点击\"service worker\"链接\n   - 查看后台脚本的日志和错误\n\n3. **重新加载扩展**\n   - 修改代码后，在扩展程序页面点击刷新图标\n   - 重新打开工具页面测试\n\n### 代码规范\n\n- 使用ES6+语法\n- 遵循模块化设计原则\n- 工具类必须继承 `BaseTool`\n- 使用 `languageManager` 获取国际化文本\n- 保持代码注释清晰\n\n## 📝 文件说明\n\n### 核心文件\n\n- **manifest.json**: Chrome扩展配置文件，定义扩展的基本信息、权限和资源\n- **index.html**: 工具集主页面，包含侧边栏导航和主内容区域\n- **index.js**: 入口文件，初始化工具管理器\n- **background.js**: 后台服务Worker，处理扩展图标点击事件\n\n### 工具管理\n\n- **js/tools.js**: 工具管理器，负责工具的注册、切换和显示\n- **js/base-tool.js**: 工具基类，提供统一的UI模板和通用功能接口\n\n### 国际化\n\n- **js/i18n.js**: 国际化文本配置，包含中英文所有文本内容\n- **js/language-manager.js**: 语言管理器，处理语言切换和文本获取\n\n### 样式资源\n\n- **css/styles.css**: 主样式文件，定义UI样式和主题\n- **css/materialdesignicons.min.css**: Material Design图标样式\n- **fonts/**: 图标字体文件\n\n## 🔒 权限说明\n\n本扩展仅申请了必要的权限：\n\n- **clipboardWrite**: 用于复制结果到剪贴板\n\n扩展不收集用户数据，所有处理都在本地完成，不会上传任何信息到服务器。\n\n## 🐛 已知问题\n\n- 某些复杂JSON格式可能需要手动预处理\n- 大文件处理可能影响性能（建议使用较小的文件）\n\n## 🔮 未来计划\n\n- [ ] 添加更多编码格式支持（URL编码、HTML实体等）\n- [ ] 支持工具历史记录\n- [ ] 添加主题切换功能\n- [ ] 支持快捷键操作\n- [ ] 添加更多JSON处理工具（JSONPath、JSON Schema验证等）\n- [ ] 支持插件系统，允许第三方工具扩展\n\n## 🤝 贡献指南\n\n欢迎提交Issue和Pull Request来帮助改进这个项目！\n\n### 贡献流程\n\n1. Fork本项目\n2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)\n3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)\n4. 推送到分支 (`git push origin feature/AmazingFeature`)\n5. 开启Pull Request\n\n## 📄 许可证\n\n本项目采用 MIT License 开源协议。\n\n## 👨‍💻 作者\n\n开发团队\n\n## 🙏 致谢\n\n- Material Design Icons - 提供图标库\n- Chrome Extension API - 提供扩展开发框架\n\n---\n\n**版本**: 1.0.2  \n**最后更新**: 2024\n\n如有问题或建议，欢迎通过Issue反馈！\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaichangya%2Fdev-tools-chrome","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaichangya%2Fdev-tools-chrome","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaichangya%2Fdev-tools-chrome/lists"}