# devtool-extension

**Repository Path**: ecplugin/devtool-extension

## Basic Information

- **Project Name**: devtool-extension
- **Description**: ecplugin开发工具浏览器插件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-10
- **Last Updated**: 2026-02-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ECPlugin Dev Extension

Chrome 拦截与注入扩展，支持本地文件系统配置和 Git 团队协作

## 功能特点

- **网络请求监控**：实时查看所有网络请求，支持按类型过滤
- **请求拦截与修改**：拦截并修改 HTTP 请求和响应
- **拦截规则管理**：创建、编辑、删除拦截规则
- **文件注入**：注入 JS 和 CSS 文件到页面
- **配置导入导出**：支持配置文件的导入导出，方便团队协作
- **Git 集成**：配置文件可通过 Git 进行版本控制和团队共享

## 安装方法

### 开发模式安装

1. 克隆本仓库到本地
2. 打开 Chrome 浏览器，进入 `chrome://extensions/`
3. 开启右上角的「开发者模式」
4. 点击「加载已解压的扩展程序」
5. 选择本项目的根目录
6. 扩展安装成功后，在浏览器右上角会出现扩展图标

## 使用指南

### 网络请求监控

1. 打开开发者工具（F12）
2. 切换到「ECPlugin」标签页
3. 在「网络请求」标签页中，可以看到所有网络请求
4. 使用顶部的过滤器可以按资源类型筛选请求
5. 点击请求行可以查看详细信息并编辑

### 创建拦截规则

1. 在网络请求列表中选择一个请求
2. 右侧会显示编辑器面板，可修改请求和响应的详细信息
3. 修改完成后，点击「生成拦截规则」按钮
4. 规则会被添加到拦截规则列表中

### 管理拦截规则

1. 切换到「拦截规则」标签页
2. 这里显示所有已创建的拦截规则
3. 可以删除不需要的规则
4. 可以导出配置文件或导入配置文件

### 文件注入

1. 切换到「inject」标签页
2. 配置需要注入到页面的 JS 和 CSS 文件
3. 保存配置后，扩展会自动将文件注入到匹配的页面

## 配置说明

### 配置文件结构

配置文件使用 JSON 格式，结构如下：

```json
{
  "rules": [
    {
      "name": "规则名称",
      "type": "intercept",
      "priority": 1,
      "action": {
        "type": "redirect",
        "redirect": {
          "url": "拦截 URL"
        }
      },
      "condition": {
        "urlFilter": "匹配 URL",
        "resourceTypes": ["xmlhttprequest", "fetch"]
      },
      "request": {
        "url": "请求 URL",
        "method": "HTTP 方法",
        "headers": {},
        "body": "请求体"
      },
      "response": {
        "status": 200,
        "headers": {},
        "body": "响应体"
      }
    }
  ],
  "enabledConfigs": []
}
```

### Git 团队协作

1. 将配置文件添加到 Git 仓库
2. 团队成员可以通过 Git 拉取最新的配置文件
3. 使用「导入配置」功能加载配置文件
4. 团队成员可以共享和版本控制拦截规则

## 开发指南

### 项目结构

```
├── images/             # 扩展图标
│   ├── icon128.png
│   ├── icon16.png
│   └── icon48.png
├── background.js       # 后台脚本
├── content.js          # 内容脚本
├── devtools.html       # 开发者工具面板 HTML
├── devtools.js         # 开发者工具面板逻辑
├── devtools.css        # 开发者工具面板样式
├── popup.html          # 扩展弹出页面
├── popup.js            # 扩展弹出页面逻辑
├── manifest.json       # 扩展配置文件
└── README.md           # 项目说明文档
```

### 技术栈

- HTML5 + CSS3 + JavaScript
- Chrome Extensions API
- Chrome DevTools API
- File System Access API

### 开发建议

1. 扩展使用 Manifest V3 格式
2. 后台脚本使用 Service Worker
3. 网络请求拦截使用 declarativeNetRequest API
4. 配置存储使用 chrome.storage API

## 浏览器兼容性

- Chrome 90+（支持 Manifest V3）

## 许可证

ECPLUGIN License

## 贡献

欢迎提交 Issue 和 Pull Request 来改进这个项目！

## 联系方式

如果有任何问题或建议，欢迎联系我们。