【免费下载链接】ScrollToPromptNavigation minimap extension for modern AI chat interfaces, injecting responsive scrollbar indicators via Shadow DOM isolation.项目地址https://gitcode.com/gh_mirrors/sc/ScrollToPrompt点击查看免费下载ScrollToPrompt 是一款面向 ChatGPT、Claude、Gemini 等 AI 聊天界面的浏览器扩展它为长对话注入小地图式的滚动条标记让你一键跳回任意历史提问。这个项目的工程化做得相当扎实用TypeScript 严格模式兜底类型安全、用Vitest跑单元测试、再用GitHub Actions把 Lint、构建、测试串成一条自动流水线。本文带你拆解这套浏览器扩展工程化的完整思路新手也能照抄。一、先看这个扩展做什么ScrollToPrompt 的核心体验是在 AI 聊天页的滚动区域注入一条自定义滚动条每个提问prompt对应一个可视化标记对话再长上下文也只需一次点击就能找回。几个值得学习的设计点Shadow DOM 隔离整个 UI 包在独立的 Shadow DOM 里宿主网站的 CSS 完全污染不了它适配器模式每个平台ChatGPT、Claude、Gemini、Perplexity、Grok各写一个适配器类核心引擎与平台逻辑零耦合性能意识MutationObserver监听 DOM 变化后做 120ms 防抖渲染拖拽和滚动走requestAnimationFrame保证 60fps隐私优先零数据采集所有逻辑本地运行。 完整架构说明在 docs/architecture.md建议配合源码阅读。二、TypeScript 严格模式可靠性的地基很多扩展项目为了省事关闭严格检查ScrollToPrompt 则反其道而行。看 tsconfig.json 的几个关键配置配置项值作用stricttrue开启全套严格检查空值、隐式 any 统统报错target/moduleESNext使用现代语法交给 Vite 做兼容性转译noEmittruetsc 只做类型检查不产出文件构建交给 Vitepaths/* → src/*路径别名跨目录引用不用写一长串../ 这套配置的思路是tsc 负责查错Vite 负责打包各司其职。类型约束真正发挥威力的地方是 src/core/Engine.ts 中的SiteAdapter接口引擎只依赖这个接口不关心具体是哪个平台五个平台的实现src/adapters/Platforms.ts都implements SiteAdapter漏写一个方法编译器直接报错扩展 API 的类型由types/chrome提供chrome.storage、chrome.tabs等调用全程有提示。这就是严格模式的最大红利重构和加新功能时类型系统帮你兜底。三、构建工具链Vite CRXJS 一键产出扩展浏览器扩展的构建比较特殊——要处理manifest.json、content script、service worker 等多个入口。ScrollToPrompt 选择 Vite 搭配crxjs/vite-plugin来解决。vite.config.ts 非常简洁引入crx插件并传入 manifest.json 作为清单插件自动识别 content script 和 service worker 入口开发服务器固定5173端口HMR 热更新改完src/content/main.ts页面立即生效。manifest.json 是标准Manifest V3声明content script 只挂载到五个 AI 平台域名run_at设为document_idle避免抢在页面加载前执行权限只申请了storage一项保持最小权限原则。构建命令npm run build实际是tsc vite build见 package.json——先让 tsc 完成类型检查通过后再交给 Vite 产出dist目录最后到chrome://extensions里加载已解压的扩展程序即可调试。四、代码质量守门员ESLint Prettier Husky工程化不只是能跑还包括任何人提交的代码都长一个样。项目的组合拳是工具职责关键配置ESLint静态检查lint脚本带--max-warnings 0一个警告都不放过Prettier统一格式一条命令格式化src/**下的 ts/css/mdHusky lint-staged提交时自动执行git commit前只对本次改动的文件跑eslint --fixprettierlint-staged 的白名单配置在 package.jsonTS 文件走 ESLint 自动修复 PrettierCSS 和 Markdown 只走 Prettier。另外 .editorconfig 在编辑器层面统一了缩进与换行风格.gitattributes 则声明了文本/二进制文件的换行规则避免 Windows 和 Linux 协作者互相添乱。 对新手来说这套组合的价值在于风格问题在提交前就被机器消灭了代码评审可以专注逻辑本身。五、Vitest 测试 GitHub Actions质量自动流水线本地工具解决个人习惯CI 流水线解决团队底线。ScrollToPrompt 的 CI 配置在 .github/workflows/ci.yml触发条件是push 到main分支和指向main的 Pull Request在ubuntu-latest上依次执行actions/checkout— 检出代码actions/setup-node— 安装 Node.js 20并开启npm依赖缓存加速后续运行npm ci— 按package-lock.json精确安装依赖保证 CI 和本地装的是一模一样的版本npm run lint— 静态检查不过直接红灯npm run build— 类型检查 完整构建验证npm test— 启动 Vitest 的test脚本。 这条流水线的设计很典型Lint → Build → Test 三道闸口串行任何一道失败 PR 就无法合并。对贡献者而言提交前本地跑一遍npm run lint npm test就能和 CI 保持一致的结果。项目同时提供了标准化的协作资产结构化 Issue 模板.github/ISSUE_TEMPLATE/bug_report.yml、.github/ISSUE_TEMPLATE/feature_request.ymlPR 模板.github/PULL_REQUEST_TEMPLATE.md内置是否通过自查、是否更新文档等检查清单贡献规范CONTRIBUTING.md 明确要求新增代码要补测试、改动 API 要同步文档。六、新手速查本地开发一键命令把日常命令整理成一张表照着敲就能跑起来命令用途npm install安装依赖需 Node.js 18npm run dev启动 Vite 开发服务器HMR 热更新npm run build类型检查 构建产出distnpm run lintESLint 全量检查npm run formatPrettier 格式化npm test运行 Vitest 测试总结可复制的工程化清单ScrollToPrompt 用不到千行的代码量搭出了一套生产级扩展该有的完整工程体系。如果你想给自己的扩展项目补课可以直接抄这份作业✅TypeScriptstrict模式 接口约束让类型系统当第一道防线✅tsc 只做检查、Vite 负责构建工具链分工清晰✅最小权限的 Manifest V3 声明安全与体验兼顾✅ESLint 零警告 Prettier lint-staged把风格问题拦在提交前✅GitHub Actions 串行执行 Lint / Build / Test把质量底线交给自动化。想深入了解各模块的设计决策可以继续读 docs/architecture.md 与 ROADMAP.md看看这个项目下一站要支持哪些平台。赞分享【免费下载链接】ScrollToPromptNavigation minimap extension for modern AI chat interfaces, injecting responsive scrollbar indicators via Shadow DOM isolation.项目地址https://gitcode.com/gh_mirrors/sc/ScrollToPrompt点击查看免费下载相关推荐Shepherd.js工程化实践TypeScriptRollupVitestCypress的构建测试体系Shepherd.js工程化实践TypeScriptRollupVitestCypress的构建测试体系 Shepherd.js 是一款帮助用户完成产品如何构建可靠的自动化部署GitHub Actions完整解决方案如何构建可靠的自动化部署GitHub Actions完整解决方案 在当今快速迭代的开发环境中自动化部署已成为提升团队效率的关键环节。actions gh pCI/CD静态站点为什么选择whatlanggoGo语言无依赖自然语言检测库深度测评为什么选择whatlanggoGo语言无依赖自然语言检测库深度测评 whatlanggo是一款专为Go语言开发者打造的无依赖自然语言检测库能够快速准确地识别创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考