项目地址fthux/GitZipPro。这一篇聚焦 GitZip Pro 的设置页、GitHub Token、下载历史和统计面板。前几篇主要围绕 GitHub 页面和下载流程展开。这一篇进入 GitZip Pro 中体量最大的页面设置页。设置页由三个文件组成source/options.html source/options_init.js source/options.js其中options_init.js很短只负责初始化国际化(asyncfunctioninitOptionsPage(){awaitGZP_I18N.init();GZP_I18N.applyTranslations();})();真正的设置逻辑集中在options.js。它既管理普通配置也管理 GitHub token、忽略规则、下载历史和统计面板。设置页整体结构options.js开头会取得大量 DOM 元素constthemeSelectdocument.getElementById(themeSelect);constlanguageSelectdocument.getElementById(languageSelect);constbuttonPositionSelectdocument.getElementById(buttonPositionSelect);constnamingPresetdocument.getElementById(namingPreset);constgithubTokendocument.getElementById(githubToken);consthistoryContentdocument.getElementById(history-content);conststatsOverviewGriddocument.getElementById(stats-overview-grid);这些变量说明设置页不是单一表单而是多个功能页的组合。页面菜单切换由activateMenu(target)控制。点击左侧菜单时它会切换.menu-item的 active 状态同时展示对应.page。页面也支持 hash 路由例如#general、#token、#history。整体结构可以这样理解options.htmlgeneral主题/语言/按钮download命名/通知/忽略规则tokenGitHub token / OAuthhistory下载历史stats下载统计chrome.storage.localchrome.storage.local是设置页和其他模块之间的共享层。content.js、downloader.js、background.js都会读取其中一部分配置。基础设置主题、语言和按钮位置设置页使用constants.js中的 keyconstCglobalThis.GZP_CONSTANTS;constSTORAGEC.STORAGE_KEYS;constDEFAULTSC.DEFAULTS;主题切换由applyTheme(theme)处理functionapplyTheme(theme){if(themesystem){document.documentElement.removeAttribute(data-theme);}else{document.documentElement.setAttribute(data-theme,theme);}}当用户修改主题时代码会立即应用到当前 options 页面并写入 storagechrome.storage.local.set({[STORAGE.THEME]:theme});语言切换则会调用GZP_I18N.setLocale()并触发页面文案刷新。因为 background 也监听了语言 storage 变化所以右键菜单文案也能跟着更新。按钮位置、文件大小显示、双击选择等配置也是同样模式读取默认值用户修改后写入 storagecontent script 后续读取并应用。下载命名与通知设置下载相关设置包括NAMING_PRESETNAMING_CUSTOMNOTIFY_SHOWNOTIFY_SOUNDNOTIFY_OPEN这些配置最终会被downloader.js的getSettings()读取。也就是说options 页面本身不参与下载但它决定下载器如何命名 zip、是否播放提示音、下载完成后是否通知或打开下载项。命名规则的变量在下载器中被替换{owner} {repo} {branch} {path} {date} {datetime} {ts}设置页负责让用户选择或填写模板下载器负责在实际下载时用仓库信息替换这些变量。忽略规则设置options.js中定义了IGNORE_PRESETS和PRESET_COMBOS。它们对应常见忽略场景例如版本控制目录、依赖目录、构建产物、日志文件等。用户选中的预设保存在letactiveLabelsnewSet();用户自定义规则保存在letcustomRules[];当规则变化时saveIgnoreSettings()会把它们写入STORAGE.IGNORE_LABELSSTORAGE.IGNORE_CUSTOM_VARS下载器后续读取这两个 key调用compileIgnoreRules()和isIgnored()来过滤文件。这形成了一个跨模块链路options.js选择忽略规则chrome.storage.localdownloader.jsgetSettings()compileIgnoreRules()collectFiles() 中过滤文件GitHub Token 设置GitZip Pro 支持匿名模式和自定义 token 模式。相关 storage key 包括constTOKEN_STORAGE_KEYSTORAGE.GITHUB_TOKEN;constTOKEN_MODE_KEYSTORAGE.TOKEN_ACCESS_MODE;constTOKEN_SCOPE_KEYSTORAGE.TOKEN_SCOPE;设置页中用户可以手动输入 token也可以走 OAuth 流程。OAuth 相关函数包括generateCodeVerifier() generateCodeChallenge() getOAuthRedirectUrl() launchIdentityWebAuthFlow() launchPopupOAuthFlow() startGitHubOAuth(scope)其中generateCodeChallenge()使用crypto.subtle.digest(SHA-256, data)生成 PKCE challenge。这说明 OAuth 流程不是简单跳转而是带了 PKCE 校验。token 保存后downloader.js和content.js都会读取它downloader.js用 token 请求文件和目录内容。content.js的文件大小展示也会用 token 请求 GitHub API。设置页还提供checkRateLimit()用于查看当前 API rate limit 状态。这部分通过GITHUB_RATE_LIMIT接口判断 token 是否生效。下载历史下载历史的 key 是constHISTORY_STORAGE_KEYSTORAGE.DOWNLOAD_HISTORY;历史记录主要由 background 在下载完成后写入。options 页面负责读取、展示、删除和清空。相关函数包括loadHistory() saveHistory() renderHistory() deleteSelectedRecords() clearAllHistory() initHistoryPage()每条历史记录中包含下载时间、仓库、分支、路径、下载文件名、文件列表、文件数量、被忽略数量等信息。buildHistoryTargetUrl(record)可以根据记录还原 GitHub 目标链接让用户从历史记录回到对应仓库位置。当 background 保存历史后会发送GZP_DOWNLOAD_COMPLETE消息。如果 options 页面打开就可以实时更新如果没打开下次进入页面时也会从 storage 读到。下载统计统计面板建立在历史记录之上。核心函数是aggregateStats(records) filterHistoryRecords(records) renderStats()filterHistoryRecords()根据时间范围、类型、仓库、分支、关键词等条件过滤记录。aggregateStats()再计算总下载次数、文件数、被忽略数量、总大小、仓库维度和分支维度。最后renderStats()把结果渲染成 KPI 卡片和表格。这部分没有重新请求网络而是完全基于本地历史记录计算。DOWNLOAD_HISTORYloadHistory()filterHistoryRecords()aggregateStats()renderStats()KPI / 仓库表格 / 分支表格首次欢迎弹窗background.js首次安装时会写入gitzip-pro-show-welcome:trueoptions 页面启动时执行checkAndShowWelcomeModal()。如果检测到首次使用标记页面会切换到 token 页面并显示欢迎弹窗。这样首次用户会被引导到最重要的配置区域。本篇小结options.js是 GitZip Pro 的配置和数据展示中心。它不直接参与页面注入也不直接下载文件但它决定了其他模块的运行方式options.js 写入 storage - content.js 读取 UI 设置 - downloader.js 读取下载设置和 token - background.js 写入历史 - options.js 再读取历史并渲染统计下一篇是系列最后一篇收束到popup.js、i18n.js和build.js看 GitZip Pro 如何处理轻量入口、国际化系统以及 Chrome / Firefox / Edge 多渠道构建。完整项目在 fthux/GitZipPro。如果你正在做浏览器扩展的设置页或下载历史功能可以 Star 后对照源码继续研究。如果你也好奇这个 Pro 版为什么会做起来可以接着看这篇项目缘起用了 GitZip 这么多年我动手做了一个「Pro」版。