StackPrism / 栈棱镜 —— 网页技术栈识别浏览器扩展

从页面运行时、DOM、资源 URL、响应头、动态加载和源码版权注释六个维度系统地收集线索，把站点所使用的前后端栈清晰地拆解、分类并呈现。StackPrism 作为一个基于 Manifest V3 的网页技术栈识别扩展，覆盖 Chrome、Edge 与 Firefox 三大主流浏览器，旨在帮助用户快速理解一个网站背后的技术栈结构，以及它们在前端与后端的组合方式。以下是一份详细介绍，涵盖功能、工作原理、安装方法及参与共建的路径。

在本文中，您将了解 StackPrism 如何打破“只看 HTML 资源 URL”的局限，提供多通道并行的线索收集与结果聚合，以及如何通过规则驱动的数据化识别实现高效、可扩展的栈识别能力。

简介

StackPrism 的核心愿景，是把网页技术栈识别做成一个“数据驱动”的系统。它并不是单纯依赖 HTML 的资源链接来推断栈信息，而是通过四条并行的线索通道，综合判断并自洽地给出前后端栈的分布。

• 静态扫描：页面加载时，注入脚本会逐步扫描 DOM、全局变量、CSS 类名、CSS 变量等静态信号，提取潜在的框架、库和运行时线索。
• 响应头观察：通过 Service Worker 监听 Web 请求的响应头，捕获主文档、XHR、iframe 的响应头信息，以及 HTTP 版本等线索。
• 动态资源监听：利用 PerformanceObserver 与 MutationObserver，持续跟踪页面在交互后的新增脚本、样式、iframe、动态加载的资源等。
• JS 版权注释扫描：后台异步请求并分析主 bundle 开头的版权注释，识别打包进 index/main/vendor 等 chunk 的第三方依赖与来源。

把这四条通道的结果合并、去重后，StackPrism 会按 50+ 个类目进行分组展示，并对伪造响应头、自指检测、模糊误报等场景进行主动收敛，提升识别的准确性与可解释性。

功能特性

StackPrism 的主要特性可以归纳为以下几大要点，帮助你系统地理解它的工作方式与应用场景。

• MV3 服务工作者架构：没有持续驻留的后台进程，事件驱动、内存占用低，适合现代浏览器扩展架构的高效运行。
• “规则即数据”的设计：超过 50 种 JSON 规则文件集中维护在公开的规则目录中，构建阶段预编译 hint prefilter 与 keyword 合并正则，运行时只在命中候选时执行深度匹配，提升性能与可维护性。
• 统一的识别维度覆盖：前端、后端、内容、第三方、营销、安全等六大维度覆盖，确保对一个站点的前后端栈、所用 CDN、主题模板、SaaS、监控、分析工具等有全面的线索分析。
• 多通道并行识别与去重：静态、响应头、动态、版权注释四条通道并行工作，结果合并后去重，减少冗余并在出现冲突时给出清晰的优先级与解释。
• 伪造响应头与自指抑制：对多样化的伪造场景进行降级处理，同时为用户呈现警示，帮助判断线索的可信度。
• 动态监控与离线汇总：页面活动中积累的新线索，重新打开弹出面板可看到合并后的最新结果，提升用户的交互体验。
• 跨浏览器一致性：面向 Chrome、Edge、Firefox 的实现，提供一致的识别体验与输出。

在识别结果方面，StackPrism 以结构化的类别和可点击的细节呈现，让用户在浏览站点时就能快速定位所用的前端框架、后端语言、Web 服务器、CDN、主题模板以及第三方服务等信息。

识别覆盖的维度与示例

• 前端维度：前端框架、UI 框架、前端库、构建与运行时等。
• 服务端维度：Web 服务器、后端框架、CDN 与托管、开发语言等。
• 内容维度：网站程序、主题模板、CMS、电商平台、RSS 等。
• 第三方维度：SaaS、探针监控、AI 大模型、第三方登录、支付等。
• 营销维度：广告、营销、统计、分析、标签管理等。
• 安全维度：HTTPS、HTTP/2、HTTP/3、CSP、Cookie 同意等安全相关标识。

通过对这些维度的组合分析，StackPrism 能给出一个站点“栈组合”的清晰画像，帮助开发者、研究人员甚至企业评估技术栈的演进、依赖关系与潜在风险。

技术架构与实现要点

StackPrism 使用 Manifest V3 的服务工作者模式来实现事件驱动的检测流程，降低了后台驻留成本，同时通过规则驱动的架构实现高度的可维护性。主要技术要点包括：

• 规则驱动的数据驱动设计：规则以 JSON 的形式集中管理在 public/rules/ 之下，构建阶段将 prefilter 与 keyword 合并正则嵌入 leaf 规则中，运行时优先使用这些候选信号进行快速命中，减少了对页面的逐字逐句扫描成本。
• 多通道并行执行：静态扫描、响应头观察、动态资源监听、JS 版权注释扫描同时进行，结果在最终输出时进行合并、去重与冲突处理。
• 构建与开发友好性：规则的扩展、新特征的加入均通过数据变更完成，无需重新修改代码，降低维护成本。
• 安全与信任的处理：对伪造场景进行降级处理并给出警示，帮助用户进行更可靠的判定；同时提供线索置信度的表示，避免误判的影响。

开发者友好地设计了“新增规则”流程：通过在 public/rules/ 下添加新的规则 JSON 文件即可扩展识别能力。这种数据驱动的方式，使得社区参与与规则迭代变得更高效。

安装与运行

StackPrism 的安装路径清晰明了，支持从源码加载（开发模式）以及打包后的发布版本在三大浏览器中使用。

• 从源码加载（开发模式）

• 拷贝仓库、安装依赖并构建

• 典型命令序列如下（示例以 pnpm 为包管理器）

  • git clone https://github.com/setube/stackprism.git
  • cd stackprism
  • pnpm install
  • pnpm run build

• Chrome / Edge 安装

1. 打开浏览器的扩展管理页面：chrome://extensions 或 edge://extensions
2. 右上角开启“开发者模式”
3. 选择“加载已解压的扩展程序”，选中 dist/ 目录
4. 访问任意网页，扩展图标应显示识别数量

• Firefox 安装

1. 打开 about:debugging#/runtime/this-firefox
2. 点击“临时载入附加组件”，选择 dist-firefox/manifest.json
3. 或运行 pnpm run build:firefox，将 release/ 目录中的 .xpi 文件直接安装

• Firefox 的打包与发布

• 通过 pnpm run build:firefox 生成可用的 .xpi 文件，放在 release/ 目录，以便分发与安装。

• 规则与构建

• 生产构建包含规则预编译步骤，使运行时更快速地进行候选过滤。

• 将规则与匹配逻辑分离，提升可扩展性和稳定性。

• 开发辅助命令

• pnpm run dev：开发模式与热模块替换（HMR）

• pnpm run typecheck：进行 Vue + TypeScript 的类型检查

• pnpm run lint：执行 ESLint

• pnpm run build：生产构建，包含规则预编译

• pnpm run docs:dev：本地预览 VitePress 文档站

这些步骤和命令为开发者和贡献者提供了明确、可重复的工作流，使扩展的迭代与新特性的引入变得高效。

规则维护与数据治理

StackPrism 的规则系统强调数据驱动，核心原则是尽量减少对代码的直接修改，而通过数据规则实现检测能力的扩展。

• 规则清单与加载
• public/rules/index.json：列出要加载的所有规则文件
• 页面规则
• public/rules/page/*.json：处理页面源码、DOM、资源 URL、动态资源等前端相关信号
• 响应头规则
• public/rules/headers/*.json：处理服务端响应头、Cookie 等相关信号
• 自指抑制
• public/rules/self-host-suppress.json：某些站点的同名识别可被跳过，以避免误报
• 技术链接映射
• public/tech-links.json：集中维护技术名到官网/仓库的映射，识别结果可点击跳转
• 构建阶段 prefilter
• vite.config.ts 中的 closeBundle 阶段注入 __hints 与 __keywordCombined，用于优化运行时候选筛选
• 新规则的字段结构示例
• name、category、patterns、matchType、matchIn、confidence、kind、selectors、globals、classPrefixes 等字段，辅助描述规则的语义和匹配范围

规则质量与约束包括以下要点

• 优先使用高特征信号，例如响应头、专属资源 URL、window 变量、独家 CSS 选择器、JS 版权注释、官方 SDK 包名
• 避免过于笼统的关键词，避免对通用词（如 spring、phoenix、container）产生大量误报
• 优先限定 matchIn 的范围（resources、url、headers），减少对 html 内容的直接拷贝式匹配
• 对误报与特征冲突进行降级处理，并提供清晰的置信度提示

以上设计确保了规则的扩展性和识别的准确性，并降低在快速变化的前端生态中的误报概率。

使用注意事项

在实际使用 StackPrism 时，有几个重要的注意点值得了解，帮助用户正确解读识别结果，以及如何结合其他线索做出判断。

• 后端识别不保证百分百完整：许多站点会隐藏或移除常见的响应头，例如 Server 与 X-Powered-By。此时结果会以“线索 + 置信度”的形式呈现，帮助用户理解信息来源与可信程度。
• 伪造响应头的识别：扩展会主动识别多种主体身份字段同时存在的伪造场景，并将相关类目降级为低置信度，并发出警示；单个伪造头难以确定，需要结合其他线索进行判断。
• 首次安装后请刷新目标页：以确保 service worker 能捕获主文档的响应头信息。
• 源代码搜索是基于 DOM 快照：输出的是当前页面的 outerHTML，而非服务器端最初返回的原始 HTML，因此可能与源网页的原始结构略有差异。
• 某些系统页/商店页/内置页的检测限制：Chrome 系统页、浏览器商店页等常规系统页通常不允许注入检测脚本，因此可能不会在这些页面上产生识别结果。
• 动态监控是累积式的：资源的动态加载需要多次交互，才会出现新的线索；重新打开弹出面板即可看到合并后的结果。

这些注意事项有助于用户在使用时理解结果的可信度、局限性，以及如何结合其他信息做出更可靠的判断。

参与共建

StackPrism 当前内置了 50+ 类目、2000+ 条识别规则，但前端生态变化迅速，新的框架、SaaS、规则及潜在误报都需要社区的参与来提升准确性与覆盖面。

• 反馈与修正
• 发现 Bug、误识、漏识时，可以在 Issues 提交问题。弹出面板中“识别不准确”按钮会自动填充议题模板，方便快速提交。
• 规则贡献
• 在扩展设置页选择“提交规则贡献”，或直接向 public/rules/ 提交 PR。通过数据的增量更新来扩展识别能力。
• 讨论与提案
• 可以参与 Discussions 提交流程，贡献新的想法、改进方案和使用场景。提交代码前请确保通过类型检查、lint 与构建，确保代码质量。

通过这样的协作机制，StackPrism 能在保持稳定性的同时，快速适应新技术栈的演进，帮助广大开发者理解网站背后的技术生态。

星标趋势

如果本项目对你有帮助，欢迎点 Star，使更多人看到并从中受益。为了直观展示关注度与发展态势，项目方提供星标历史图表，反映了社区的参与热度与项目的长期关注趋势。

• 星标历史可视化：通过 Star History 的数据展示，帮助开发者直观理解项目在不同时间点的关注度变化。

开源协议

本项目基于 CC BY-NC-SA 4.0 协议授权，允许非商业自由使用与二次修改，但必须署名且衍生作品采用同一协议。完整法律文本可查看 LICENSE 文件。这样的许可设计，既保护了原作者的权益，又鼓励社区对扩展进行改进与再发布，以促进行业内的知识共享与创新发展。

开发与文档

• 开发文档与本地文档站可通过 docs:dev 相关命令进行本地预览，帮助新贡献者快速了解项目结构、规则格式以及开发流程。
• 详细的规则维护说明、字段说明与示例，帮助贡献者理解如何编写新的规则、如何编排规则集合、以及如何在构建阶段实现最佳实践。
• 文档站与代码倚赖都遵循一致的风格，便于跨团队协作、跨浏览器兼容以及规则的跨平台可移植性。

总结

StackPrism / 栈棱镜是一款以数据驱动、规则驱动、并行化识别为核心的网页技术栈识别扩展。通过静态扫描、响应头观察、动态资源监控与 JS 版权注释扫描四条通道的协同工作，结合 50+ 规则集的持续演进，StackPrism 能在 Chrome、Edge、Firefox 三大主流浏览器中，为用户提供对前后端栈、CDN、模板及第三方服务的清晰、可操作的识别结果。

无论你是前端研究者、开发者、还是对站点技术栈感兴趣的普通用户，StackPrism 都提供了一个可扩展、可参与的框架。通过规则的贡献、问题的反馈、以及跨浏览器的一致体验，社区可以共同推动对现代网页技术栈的理解与透明度提升。借助这个项目，你可以更直观地看见一个站点背后的技术拼图，理解它如何运作、从何而来，以及与其他服务与框架之间的相互关系。

如果你愿意参与其中，欢迎访问项目的 Issue、Discussions 与 PR 区域，提交你的意见与贡献。愿 StackPrism 成为你研究与学习网页技术栈的有力工具，并伴随你在浏览世界时更好地理解每一个站点背后的技术选择与演进。

注：本文所述内容基于项目页面提供的公开信息整理，具体实现细节以代码与文档为准。若需要进一步了解，请参考官方仓库中的 README、文档以及规则目录中的示例与注释。