CookieFlow
🚀 一个简洁现代的Cookie复制和管理工具（浏览器插件）
📖 开发背景
此插件为本人在百度实习时开发，为解决：前端proxy代理需要在不同的后端环境切换，而测试环境的cookie有可能是不同的且浏览器无法将其带到本地环境，遂开发此插件用于切换后端环境时一键复制cookie。
来字节后发现接手项目也存在此问题，即线上sso的登录cookie无法被浏览器带到本地环境，这会导致后端返回302，且由于跨域问题无法跳转到登录页。
🛠️ 使用技术栈
- React18: https://18.react.dev/ - 现代前端框架
- Tailwindcss: https://tailwindcss.com/ - 原子化CSS框架
- Antd: https://ant.design/ - 企业级UI设计语言
- Vite: https://vite.dev/ - 下一代前端构建工具 ps：感觉Antd对于这种微小项目来说有点厚重，原先是考虑shadcnUI的但是需要自调，为了省事直接使用的Antd。
✨ 插件功能
- ✅ 复制源地址cookies到目标地址
- ✅ 清空目标地址的cookies
- ✅ 历史记录支持且可删除
- ✅ URL合法性校验
- ✅ 消息提示弹窗
- ✅ 自动读取当前页面URL
🏗️ 项目架构
参考百度TDA平台中AI助手组件的架构设计：UI层与业务逻辑抽离，状态管理与工具函数抽离，采用高内聚低耦合、单一职责原则的分层架构。
🎨 UI层 (Popup.jsx) ← 纯视图渲染 ↓ ⚛️ Hook层 (useCookieFlow.js) ← 状态管理 + 副作用处理 ↓ 🔧 Utils层 (cookie.js, storage.js, urlValidation.js) ← 纯函数工具集
📁 代码结构
CookieFlow/ ├── 📁 assets/ │ ├── 📄 icon.svg # 插件图标 │ └── 📄 icon*.png # 不同尺寸图标 ├── 📁 src/ │ ├── 📁 components/ │ │ └── 📄 UrlInput.jsx # URL输入框组件 │ ├── 📁 hooks/ │ │ └── 📄 useCookieFlow.js # 自定义业务Hook │ ├── 📁 pages/ │ │ └── 📁 popup/ │ │ ├── 📄 index.html # 弹窗页面模板 │ │ ├── 📄 index.jsx # React应用入口 │ │ └── 📄 Popup.jsx # 主弹窗组件 │ ├── 📁 styles/ │ │ └── 📄 index.css # 全局样式 │ └── 📁 utils/ # 工具函数层 │ ├── 📄 cookie.js # Cookie操作核心逻辑 │ ├── 📄 storage.js # Chrome存储API封装 │ ├── 📄 history.js # 历史记录处理逻辑 │ ├── 📄 message.jsx # 消息提示封装 │ ├── 📄 urlValidation.js # URL校验工具 │ └── 📄 init.js # 初始化逻辑 ├── 📄 manifest.json # Chrome扩展配置 ├── 📄 package.json # 项目依赖配置 └── 📄 vite.config.js # Vite构建配置
🚀 快速开始
开发命令
npm install
npm run dev
npm run build
安装使用
- 下载dist压缩包：https://github.com/Mebius1916/CookieFlow/releases/tag/v1.0.0
- 下载并解压dist压缩包
- 在Chrome中打开扩展程序页面 (chrome://extensions/)
- 启用"开发者模式"
- 点击"加载已解压的扩展程序"，选择刚才解压的dist包
🔌 Chrome API 使用
本项目主要使用以下Chrome扩展API：
-
chrome.cookies - 管理浏览器Cookie数据
- getAll() - 获取指定URL的Cookie
- set() - 设置Cookie
- remove() - 删除Cookie
-
chrome.tabs - 获取浏览器标签页信息
- query() - 查询当前活跃标签页
-
chrome.storage.local - 本地数据存储
- get() - 读取本地存储
- set() - 保存本地存储
🔗 开源地址
GitHub: Mebius1916/CookieFlow
本项目采用开源协议，欢迎提交 PR 参与开源贡献！🎉