浏览器插件设计提示词
约 1158 字大约 4 分钟
2026-01-07
“读取一下这个需求文档，给我实现一个浏览器插件”
需求文档：
小红书Cookie获取器功能需求文档
项目概述
小红书Cookie获取器是一个Chrome浏览器扩展程序，旨在帮助用户快速获取并复制小红书网站的Cookie信息。该扩展采用现代化的Apple风格UI设计，支持亮色/暗色主题切换，具有可拖拽功能，为用户提供简洁、美观且实用的工具。
核心功能需求
1. Cookie获取与展示
- 自动检测并获取小红书域名（xiaohongshu.com）下的所有Cookie信息
- 将获取的Cookie格式化为标准字符串格式（name=value; name=value）
- 在扩展弹出窗口和网页内嵌悬浮窗中同时展示Cookie信息
- 显示获取的Cookie数量和状态信息
2. 用户交互功能
- 提供一键复制功能，将Cookie信息复制到剪贴板
- 复制操作后显示成功状态反馈
- 支持通过扩展图标点击打开弹出窗口
- 在小红书网站页面自动显示悬浮窗
3. 界面定制功能
- 支持亮色/暗色主题切换，适应不同使用环境
- 悬浮窗支持拖拽定位，带有磁吸效果
- 悬浮窗可关闭/显示切换
- 响应式设计，适应不同屏幕尺寸
技术实现细节
1. 扩展架构
- manifest.json: 扩展配置文件，定义权限、资源和行为
- background.js: 后台服务脚本，处理Cookie获取逻辑
- popup.html/js: 扩展弹出窗口界面和交互逻辑
- content.js/css: 网页内容脚本，实现悬浮窗功能
- images/: 扩展图标资源
2. 权限需求
cookies: 读取浏览器Cookie数据activeTab: 访问当前活动标签页scripting: 执行内容脚本sidePanel: 支持侧边栏功能- 主机权限:
*://*.xiaohongshu.com/*
3. 数据流程
- 用户访问小红书网站时，content.js自动注入并创建悬浮窗
- 用户点击扩展图标时，popup.js加载并显示弹出窗口
- 获取Cookie请求从popup.js或content.js发送到background.js
- background.js使用chrome.cookies API获取Cookie数据
- 获取的数据返回给请求源，并在界面上展示
- 用户点击复制按钮时，将数据复制到剪贴板
4. 界面实现
- 使用现代CSS特性（如backdrop-filter）实现毛玻璃效果
- 采用Flex布局实现响应式设计
- 使用CSS变量实现主题切换
- 添加平滑过渡动画提升用户体验
- 实现拖拽功能，带有边缘磁吸效果
用户体验设计
1. 视觉设计
- 采用Apple风格设计语言，简洁现代
- 主色调使用小红书品牌色（#ff2442）
- 圆角设计和阴影效果增强立体感
- 毛玻璃效果提升视觉质感
- 动画过渡效果增强交互体验
2. 交互设计
- 一键复制功能，减少操作步骤
- 状态反馈清晰，操作结果直观
- 可拖拽定位，用户可自定义位置
- 主题切换适应不同使用环境和个人偏好
- 悬浮窗可关闭，不干扰正常浏览
3. 可访问性
- 颜色对比度符合WCAG标准，确保文本可读性
- 状态信息清晰展示，避免用户困惑
- 按钮尺寸合理，易于点击
- 支持键盘操作
安全与隐私
1. 数据处理原则
- 所有数据处理完全在用户浏览器本地进行
- 不向任何外部服务器发送数据
- 不存储任何用户数据
- 仅在用户访问小红书网站时激活
2. 权限最小化
- 仅请求必要的浏览器权限
- 仅访问小红书域名下的Cookie
- 不读取或修改其他网站数据
安装与分发
1. 安装方式
- Chrome网上应用店发布（如已上架）
- 开发者模式本地安装（适用于开发和测试）
2. 兼容性
- 支持Chrome浏览器最新版本
- 支持基于Chromium的浏览器（如Edge、Brave等）
- 适配不同操作系统（Windows、macOS、Linux）
3. 更新维护
- 版本号清晰标识（当前版本：1.0）
- 支持通过Chrome商店自动更新
许可与归属
1. 开源协议
- 采用自定义非商业开源协议
- 允许非商业目的使用、复制、修改和分发
- 禁止商业用途，除非获得明确书面许可
2. 版权信息
- 版权所有 © 2025 AI产品银海
- 保留所有权利