我写了个自认为非常牛逼的浏览器插件: StackPrism / 栈棱镜

StackPrism(以下简称 栈棱镜)是一款基于 Manifest V3 的网页技术栈识别扩展,支持 Chrome / Edge / Firefox。

不同于市面上多数只看 HTML 资源 URL 的同类工具,栈棱镜把检测拆成 4 个独立通道并行收集线索:

• 静态扫描:页面加载时由注入脚本扫 DOM、全局变量、CSS 类名、CSS 变量、<meta>


• 响应头观察:Service Worker 监听 webRequest.onHeadersReceived,捕获主文档/XHR/iframe 的响应头与 HTTP 版本


• 动态资源监听:content script 用 PerformanceObserver + MutationObserver 累积页面交互后新加载的脚本/样式/iframe/feed


• JS 版权注释扫描:后台异步抓主 bundle 的开头版权注释,识别打包进 index/main/vendor chunk 的第三方依赖

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

技术特性

• MV3 service worker 架构:无后台常驻进程,事件驱动,内存占用低


• 规则即数据:50+ 个 JSON 规则文件(public/rules/)集中维护,构建期预编译 hint prefilter 与 keyword 合并正则,运行时只跑命中候选

识别覆盖

安装

从源码加载(开发模式):

git clone https://github.com/setube/stackprism.git

cd stackprism

bun install

bun run build            # Chrome / Edge

bun run build:firefox    # Firefox

Chrome / Edge:

1. 打开 chrome://extensions 或 edge://extensions


2. 右上角开启「开发者模式」


3. 点「加载已解压的扩展程序」,选 dist/ 目录


4. 访问任意网页,扩展图标显示识别数量

Firefox:

1. 打开 about:debugging#/runtime/this-firefox


2. 点「临时载入附加组件」,选 dist-firefox/manifest.json


3. 或者运行 bun run build:firefox 后在 release/ 目录获取 .xpi 文件双击安装

开发

bun run dev          # 开发模式 + HMR

bun run typecheck    # vue-tsc 类型检查

bun run lint         # ESLint

bun run build        # 生产构建(含规则预编译)

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

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

规则维护

栈棱镜的规则系统是数据驱动的——绝大多数检测改规则 JSON 即可,无需碰代码。

• 加载清单: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 集中维护技术名 → 官网/仓库 URL 的映射,识别结果可点击跳转


• 构建期 prefilter:vite.config.ts 的 precompileRulesPlugin 在 closeBundle 阶段为每条 leaf rule 注入 __hints(最长 literal 段去重排序取前 3)和 __keywordCombined(keyword 合并正则),运行时 rule-matcher.ts 优先用它们做候选过滤

新规则的字段:

{

  "name": "技术名称",

  "category": "前端框架", // 50+ 类目之一

  "patterns": ["正则或关键词"],

  "matchType": "regex", // 或 "keyword"

  "matchIn": ["html", "resources", "url", "headers", "dynamic"],

  "confidence": "高", // 高 / 中 / 低

  "kind": "类型说明",

  "selectors": ["CSS 选择器"],

  "globals": ["window 全局变量名"],

  "classPrefixes": ["类名前缀"]

}

规则质量约束

• 优先用高特征信号:响应头、专属资源 URL、<meta name="generator">、window.<global>、独家 CSS 选择器、JS 版权注释、官方 SDK 包名


• 避免短或过宽的 keyword(spring / phoenix / column / container 这些会命中竞品讨论、Bootstrap 与 Tailwind 通用类)


• 优先限定 matchIn,优先 resources / url / headers 而不是裸 html,减少正文误报

注意事项

• 后端识别不保证完整:很多站点隐藏 Server / X-Powered-By 等响应头,后端结果会以"线索 + 置信度"形式展示


• 伪造响应头:扩展会主动识别 ≥4 种主体身份字段同时存在的伪造场景,将相关类目降级为低置信度并附警示。但单个伪造头无法识别,建议结合其他线索判断


• 首次安装请刷新目标页:让 service worker 捕获主文档响应头


• 源代码搜索是 DOM 快照:基于当前页面的 outerHTML,不等同于服务器最初返回的原始 HTML


• Chrome 系统页 / 商店页 / 内置页通常不允许注入检测脚本


• 动态监控异步累积:content script 在后台累计交互后新加载的资源,重新打开 popup 可看到合并结果

参与共建

栈棱镜目前内置 50+ 类目下 2000+ 条识别规则,但前端生态变化快,新框架、新 SaaS、新规则误报都欢迎参与:

• Bug / 误识 / 漏识反馈:Issues — popup 上直接点「识别不准确」按钮会自动填好议题模板


• 规则贡献:扩展设置页点「提交规则贡献」,或直接 PR 到 public/rules/


• 讨论与提案:Discussions

提交代码前请跑 bun run typecheck && bun run lint && bun run build 三个检查全过。