StackPrism（栈棱镜）：开源网页技术栈识别浏览器扩展

项目介绍

StackPrism（栈棱镜） 是一款基于 Manifest V3 的网页技术栈识别浏览器扩展，支持 Chrome / Edge / Firefox 三大浏览器。

它的核心能力是：访问任意网站，一眼看穿这个网站用了什么前端框架、后端技术、CDN、SaaS、分析工具和安全配置。 它不是简单的 HTML 资源 URL 匹配，而是从 6 个维度并行收集线索，合并去重后按 50+ 个类目分组展示。

项目名称”栈棱镜”的寓意：像棱镜一样，把网页背后无形的技术栈折射出来。

为什么要用 StackPrism？

市面上已经有一些同类工具（如 Wappalyzer、BuiltWith），但它们通常只做静态 HTML 资源 URL 匹配——看页面加载了哪些 JS/CSS 文件，从文件名猜出框架。这种方式漏识率高，遇到动态加载的 SPA 基本失效。

StackPrism 的差异化在于多通道并行检测：

4 路结果合并去重后，按 50+ 个类目分组展示，并对伪造响应头、自身检测、模糊误报等场景做了主动收敛。

核心功能

识别覆盖范围

规则引擎架构

StackPrism 的规则系统是数据驱动的——绝大多数检测改规则 JSON 即可，无需碰代码：

public/rules/
├── index.json              # 规则加载清单
├── page/*.json             # 页面源码、DOM、资源 URL、动态资源规则
├── headers/*.json          # 服务端响应头与 Cookie 规则
└── self-host-suppress.json # 自身站点抑制规则
public/tech-links.json      # 技术名 → 官网/仓库 URL 映射

每条规则的字段格式：

{
  "name": "技术名称",
  "category": "前端框架",      // 50+ 类目之一
  "patterns": ["正则或关键词"],
  "matchType": "regex",        // 或 "keyword"
  "matchIn": ["html", "resources", "url", "headers", "dynamic"],
  "confidence": "高",          // 高 / 中 / 低
  "kind": "类型说明",
  "selectors": ["CSS 选择器"],
  "globals": ["window 全局变量名"],
  "classPrefixes": ["类名前缀"]
}

高性能设计

• 规则即数据：50+ 个 JSON 规则文件集中维护
• 构建期预编译：vite.config.ts 的 precompileRulesPlugin 在构建时为每条规则注入 __hints（最长 literal 段去重排序取前 3）和 __keywordCombined（keyword 合并正则）
• 运行时候选过滤：rule-matcher.ts 优先用预编译的 hints 做候选过滤，只有命中候选的才进入完整匹配

对误报和干扰的主动处理

安装方式

浏览器扩展商店

从源码安装（开发模式）

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

# Chrome / Edge 构建
pnpm run build

# Firefox 构建
pnpm run build:firefox

Chrome/Edge 加载方式：

1. 打开 chrome://extensions 或 edge://extensions
2. 右上角开启「开发者模式」
3. 点「加载已解压的扩展程序」，选 dist/ 目录

Firefox 加载方式：

1. 打开 about:debugging#/runtime/this-firefox
2. 点「临时载入附加组件」，选 dist-firefox/manifest.json
3. 或运行 pnpm run build:firefox 后在 release/ 目录获取 .xpi 文件双击安装

开发与贡献

# 开发模式 + 热更新
pnpm run dev

# 类型检查
pnpm run typecheck

# ESLint
pnpm run lint

# 生产构建（含规则预编译）
pnpm run build

# Firefox 构建 + .xpi 打包
pnpm run build:firefox

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

提交代码前请确保三条检查全部通过：

pnpm run typecheck && pnpm run lint && pnpm run build

注意事项

• 后端识别不保证完整：很多站点隐藏 Server / X-Powered-By 等响应头，后端结果会以”线索 + 置信度”形式展示
• 伪造响应头：扩展会主动识别 ≥4 种主体身份字段同时存在的伪造场景
• 首次安装请刷新目标页：让 service worker 捕获主文档响应头
• 源代码搜索是 DOM 快照：基于当前页面的 outerHTML，不等同于服务器最初返回的原始 HTML
• Chrome 系统页 / 商店页 / 内置页：通常不允许注入检测脚本
• 动态监控异步累积：content script 在后台累积交互后新加载的资源，重新打开 popup 可看到合并结果

优劣势分析

适合谁用

• 安全研究人员 —— 快速了解目标站点的技术构成，为漏洞分析和渗透测试提供情报
• 前端开发者 —— 看到好网站想知道它用什么技术栈实现的
• 产品/竞品分析 —— 研究竞品用了哪些第三方服务（分析/支付/CDN 等），辅助技术选型
• CTF 选手 —— 快速识别 Web 题目使用了什么框架和中间件
• 运维/DevOps —— 检查 CDN 托管、Web 服务器版本、HTTP/2/3 支持情况

与同类工具的对比

总结

StackPrism（栈棱镜）是目前为数不多的开源、多通道、MV3 原生的网页技术栈识别扩展。它的 6 通道并行检测设计、数据驱动的规则系统、以及对误报的主动处理，让它在同类工具中走出了差异化路线。

对于安全研究人员和前端开发者来说，StackPrism 提供了一个直观的工具来揭示网站的幕后技术构成。虽然项目尚在早期（700+ Stars），但规则系统设计和三浏览器支持已经展现出了不错的潜力。如果你有发现新技术栈的需求，欢迎通过 Issue 或 PR 贡献规则。

项目地址

参考资料

• GitHub 仓库：源代码、Issues、Discussions、规则文件。→ https://github.com/setube/stackprism
• Chrome Web Store：扩展商店页面，点击即装。→ https://chromewebstore.google.com/detail/stackprism/cagpdifljieeiajlhlcboelglkalofak
• Edge Add-ons：Edge 扩展商店页面。→ https://microsoftedge.microsoft.com/addons/detail/stackprism/ojgmhlogaoiegdonnlnibeoikbleccno
• Firefox Add-ons：Firefox 扩展商店页面。→ https://addons.mozilla.org/firefox/addon/stackprism/