返回首页
本页面使用流程图展示了Copy Saver项目的技术架构，包括Chrome扩展的核心组件和网站部署流程。
项目整体架构
graph TD
subgraph "Chrome扩展"
UI["前端UI
(HTML/CSS/JavaScript)"] --> Logic["扩展逻辑
(JavaScript)"] Logic --> Storage["数据存储
(Chrome Storage API)"] Logic --> FileSystem["文件系统操作
(Chrome Downloads API)"] end subgraph "官方网站" WebUI["网站前端
(HTML/CSS/JavaScript)"] --> Deploy["自动部署
(Cloudflare Pages)"] end User["用户"] --> UI User --> WebUI
(HTML/CSS/JavaScript)"] --> Logic["扩展逻辑
(JavaScript)"] Logic --> Storage["数据存储
(Chrome Storage API)"] Logic --> FileSystem["文件系统操作
(Chrome Downloads API)"] end subgraph "官方网站" WebUI["网站前端
(HTML/CSS/JavaScript)"] --> Deploy["自动部署
(Cloudflare Pages)"] end User["用户"] --> UI User --> WebUI
Chrome扩展组件详细架构
graph TD
subgraph "用户界面层"
PopupHTML["popup.html
(HTML/CSS)"] --> PopupJS["popup.js
(交互逻辑)"] end subgraph "核心逻辑层" ContentScript["contentScript.js
(监听复制事件)"] --> BackgroundJS["background.js
(后台服务)"] PopupJS --> BackgroundJS end subgraph "数据处理层" BackgroundJS --> ChromeStorage["Chrome Storage API
(保存配置和历史记录)"] BackgroundJS --> DownloadsAPI["Chrome Downloads API
(保存文件到本地)"] end User["用户"] --> PopupHTML WebPage["网页"] --> ContentScript
(HTML/CSS)"] --> PopupJS["popup.js
(交互逻辑)"] end subgraph "核心逻辑层" ContentScript["contentScript.js
(监听复制事件)"] --> BackgroundJS["background.js
(后台服务)"] PopupJS --> BackgroundJS end subgraph "数据处理层" BackgroundJS --> ChromeStorage["Chrome Storage API
(保存配置和历史记录)"] BackgroundJS --> DownloadsAPI["Chrome Downloads API
(保存文件到本地)"] end User["用户"] --> PopupHTML WebPage["网页"] --> ContentScript
数据流向
sequenceDiagram
participant User as 用户
participant WebPage as 网页
participant ContentScript as contentScript.js
participant BackgroundJS as background.js
participant Storage as Chrome Storage
participant FileSystem as 文件系统
User->>WebPage: 复制文本(Ctrl+C)
WebPage->>ContentScript: 触发copy事件
ContentScript->>BackgroundJS: 发送复制的文本
BackgroundJS->>Storage: 保存到历史记录
BackgroundJS->>FileSystem: 保存到本地文件
网站部署流程
graph LR
subgraph "开发环境"
LocalDev["本地开发
(HTML/CSS/JS)"] --> GitRepo["Git仓库"] end subgraph "自动部署" GitRepo --> CloudflarePages["Cloudflare Pages
(静态网站托管)"] end CloudflarePages --> LiveWebsite["线上网站
(copy-pub)"]
(HTML/CSS/JS)"] --> GitRepo["Git仓库"] end subgraph "自动部署" GitRepo --> CloudflarePages["Cloudflare Pages
(静态网站托管)"] end CloudflarePages --> LiveWebsite["线上网站
(copy-pub)"]
技术栈总览
mindmap
root((Copy Saver))
Chrome扩展
前端
HTML
CSS
JavaScript
后端
Chrome API
Storage API
Downloads API
Runtime API
JavaScript
官方网站
前端
HTML
CSS
JavaScript
部署
Cloudflare Pages