# tech-lens

**Repository Path**: Agions/tech-lens

## Basic Information

- **Project Name**: tech-lens
- **Description**: TechLens（技术透镜）是一款专业的 Chrome 浏览器扩展程序，用于快速检测和分析网页所使用的技术栈。通过一次点击，即可识别 40+ 种主流技术，包括前端框架、后端技术、构建工具、CDN、分析工具和安全配置等。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-17
- **Last Updated**: 2026-05-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Chrome-extension, web-development, JavaScript

## README

<div align="center">

# 🔍 TechLens（技术透镜）

[![Version](https://img.shields.io/badge/version-2.0.0-blue?style=flat-square)](https://gitee.com/Agions/tech-lens/releases)
[![Manifest](https://img.shields.io/badge/Manifest-V3-brightgreen?style=flat-square)](https://developer.chrome.com/docs/extensions/mv3/)
[![JavaScript](https://img.shields.io/badge/JavaScript-ES2022-yellow?style=flat-square&logo=javascript)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
[![Vite](https://img.shields.io/badge/Vite-5.x-646CFF?style=flat-square&logo=vite)](https://vitejs.dev/)
[![ESLint](https://img.shields.io/badge/ESLint-Passed-4B32C3?style=flat-square&logo=eslint)](https://eslint.org/)
[![Prettier](https://img.shields.io/badge/Prettier-Formatted-F7B93E?style=flat-square&logo=prettier)](https://prettier.io/)
[![License](https://img.shields.io/badge/License-MIT-green?style=flat-square)](https://opensource.org/licenses/MIT)
[![Chrome](https://img.shields.io/badge/Chrome-100+-4285F4?style=flat-square&logo=google-chrome)](https://www.google.com/chrome/)

**专业网页技术栈检测 Chrome 扩展程序。**

*一键识别任何网页使用的框架、库、工具和技术栈。*

[功能特性](#-功能特性) • [安装指南](#-安装指南) • [架构说明](#-架构说明) • [开发指南](#-开发指南) • [文档链接](#-文档链接)

</div>

---

## 项目简介

TechLens（技术透镜）是一款专业的 Chrome 浏览器扩展程序，用于快速检测和分析网页所使用的技术栈。通过一次点击，即可识别 40+ 种主流技术，包括前端框架、后端技术、构建工具、CDN、分析工具和安全配置等。

## ✨ 功能特性

- **🚀 即时检测** — 一键识别 40+ 种技术
- **📦 全面覆盖** — 框架、库、构建工具、CDN、分析工具、安全配置
- **🔌 插件架构** — 无需修改核心代码即可添加自定义检测器
- **📊 检测历史** — 自动保存结果，支持搜索、排序和导出（JSON/CSV）
- **🔒 安全分析** — HTTPS、CSP、HSTS、X-Frame-Options 检查
- **🌙 深色模式** — 根据系统偏好自动切换主题
- **⚡ 性能优先** — 异步检测、超时控制、结果缓存
- **🎯 最小权限** — 仅需 `activeTab`、`scripting` 和 `storage`

## 📦 安装指南

### 环境要求

- [Node.js](https://nodejs.org/) >= 18.0.0
- [Google Chrome](https://www.google.com/chrome/) 100+

### 安装步骤

```bash
# 克隆仓库
git clone git@gitee.com:Agions/tech-lens.git
cd tech-lens

# 安装依赖
npm install

# 构建生产版本
npm run build
```

### 在 Chrome 中加载

1. 打开 Chrome 浏览器，访问 `chrome://extensions/`
2. 开启**开发者模式**（右上角开关）
3. 点击**加载已解压的扩展程序**
4. 选择本项目的 `dist/` 文件夹

## 🏗️ 架构说明

```
tech-lens/
├── src/
│   ├── manifest/              # 扩展配置
│   │   ├── manifest.json      # MV3 清单文件
│   │   └── permissions.json   # 权限定义
│   ├── background/            # Service Worker 后台脚本
│   │   ├── index.js           # 入口文件
│   │   ├── message-handler.js # 消息路由
│   │   ├── storage-manager.js # 存储管理
│   │   └── task-scheduler.js  # 异步任务管理
│   ├── content/               # 内容脚本
│   │   ├── index.js           # 内容脚本入口
│   │   ├── detector-manager.js# 检测器编排
│   │   ├── detectors/         # 8 大检测器类别
│   │   │   ├── base-detector.js
│   │   │   ├── html-detector.js
│   │   │   ├── css-detector.js
│   │   │   ├── js-detector.js
│   │   │   ├── framework-detector.js
│   │   │   ├── backend-detector.js
│   │   │   ├── cdn-detector.js
│   │   │   ├── analytics-detector.js
│   │   │   └── security-detector.js
│   │   └── inject/
│   │       └── runtime-scanner.js
│   ├── popup/                 # 弹出窗口 UI
│   │   ├── index.html
│   │   ├── index.js
│   │   ├── index.css
│   │   └── components/        # UI 组件
│   ├── pages/                 # 独立页面
│   │   ├── tech-details/      # 技术详情页
│   │   ├── settings/          # 扩展设置页
│   │   └── history/           # 检测历史页
│   ├── shared/                # 共享代码
│   │   ├── constants/         # 检测规则、消息类型
│   │   ├── utils/             # 纯工具函数
│   │   └── types/             # JSDoc 类型定义
│   └── assets/
│       ├── icons/             # 扩展图标
│       └── styles/            # 全局样式
├── scripts/                   # 构建脚本
├── tests/                     # 单元测试
├── docs/                      # 文档
├── vite.config.js             # Vite 配置
├── .eslintrc.cjs              # ESLint 配置
└── .prettierrc                # Prettier 配置
```

## 🔧 开发指南

### 可用脚本

| 脚本 | 说明 |
|--------|------|
| `npm run dev` | 开发模式，文件监听自动构建 |
| `npm run build` | 生产构建，输出到 `dist/` |
| `npm run lint` | 运行 ESLint 代码检查 |
| `npm run format` | 使用 Prettier 格式化代码 |
| `npm run test` | 运行测试并生成覆盖率报告 |

### 检测规则

所有检测规则在 `src/shared/constants/detection-rules.js` 中配置。每条规则遵循以下结构：

```javascript
{
  id: 'react',
  name: 'React',
  icon: 'react',
  website: 'https://react.dev',
  confidence: 95,
  rules: [
    { type: 'global', key: 'React' },
    { type: 'dom', selector: '[data-reactroot]' },
    { type: 'source', pattern: /react/i }
  ]
}
```

### 添加自定义检测器

1. 创建继承 `BaseDetector` 的新检测器：

```javascript
import { BaseDetector } from './base-detector.js';

export class MyDetector extends BaseDetector {
  constructor() {
    super();
    this.id = 'my-tech';
    this.name = 'My Technology';
    this.priority = 15;
  }

  async detect(window, document) {
    // 自定义检测逻辑
    return this._buildResult('1.0.0', 90);
  }
}
```

2. 在 `src/content/index.js` 中注册

## 📚 文档链接

- [架构说明](docs/ARCHITECTURE.md) — 系统设计和数据流
- [开发指南](docs/DEVELOPMENT.md) — 环境搭建、工作流和调试
- [API 参考](docs/API.md) — 消息类型、存储 API、检测器接口

## 🛡️ 权限说明

| 权限 | 用途 | 是否必需 |
|------------|------|----------|
| `activeTab` | 用户点击扩展时访问当前标签页 | ✅ |
| `scripting` | 在网页上执行检测脚本 | ✅ |
| `storage` | 本地保存偏好设置和缓存结果 | ✅ |

## 🤝 贡献指南

1. Fork 本仓库
2. 创建功能分支 (`git checkout -b feature/amazing-feature`)
3. 提交更改 (`git commit -m 'feat: add amazing feature'`)
4. 推送到分支 (`git push origin feature/amazing-feature`)
5. 创建 Pull Request

## 📄 许可证

本项目基于 MIT 许可证开源 — 详见 [LICENSE](LICENSE) 文件。

---

<div align="center">

**使用 [Vite](https://vitejs.dev/) 和 [Chrome Extensions API](https://developer.chrome.com/docs/extensions/) 精心打造 ❤️**

[![Gitee](https://img.shields.io/badge/Gitee-Repository-red?style=flat-square&logo=gitee)](https://gitee.com/Agions/tech-lens)

</div>