# chrome_dev

**Repository Path**: wangding1044/chrome_dev

## Basic Information

- **Project Name**: chrome_dev
- **Description**: 浏览器插件
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-07
- **Last Updated**: 2026-07-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MV AI Chrome 扩展

一个使用 Vue3 + JavaScript + Vite 开发的Chrome扩展，提供两用物项风险专家分析功能。

## ✨ 重构亮点

本项目已从 Webpack 重构为 Vite，具有以下优势：
- 🚀 **更快的构建速度** - Vite 的热模块替换 (HMR) 和原生 ES 模块支持
- 📦 **更简洁的配置** - 大幅简化了构建配置文件
- 🗂️ **更清晰的项目结构** - 删除了无用的组件和代码
- 🎯 **专注核心功能** - 专注于两用物项分析功能

## 🛠️ 技术栈

- **Vue 3** - 响应式前端框架
- **Element Plus** - UI 组件库
- **Vite** - 现代化构建工具
- **JavaScript** - 主要编程语言
- **Chrome Extension API** - 浏览器扩展接口

## 📁 项目结构

```
mv-ai-chrome/
├── dist/
│   └── smart-ai-hub/     # 构建输出目录
├── public/               # 静态资源
│   ├── icons/            # 扩展图标
│   ├── manifest.json     # 生产环境配置
│   ├── popup.html        # 弹出页面HTML
│   ├── sidebar.html      # 侧边栏HTML
│   ├── modal.html        # 弹框HTML
│   └── index.css         # 全局样式
├── src/                  # 源代码
│   ├── components/       # Vue组件
│   │   ├── Popup.vue     # 弹出页面组件
│   │   ├── Sidebar.vue   # 侧边栏组件
│   │   ├── Modal.vue     # 弹框组件
│   │   └── DualUseChat.vue # 两用物项聊天组件
│   ├── api/              # API 接口
│   │   ├── chat.js       # 聊天接口
│   │   └── applications.js # 应用列表接口
│   ├── utils/            # 工具函数
│   │   ├── config.js     # 环境配置
│   │   └── request.js    # 请求封装
│   ├── assets/           # 资源文件
│   ├── background.js     # 背景脚本
│   ├── content.js        # 内容脚本
│   ├── responseCapture.js # 响应捕获脚本
│   ├── popup.js          # 弹出页面入口
│   ├── sidebar.js        # 侧边栏入口
│   └── modal.js          # 弹框入口
├── manifest.dev.json     # 开发环境配置
├── vite.config.js        # Vite配置文件
├── package.json          # 项目依赖
└── README.md             # 项目说明
```

## 🚀 快速开始

### 前提条件

- Node.js (>=16.0.0)
- npm 或 yarn

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
# 开发模式构建（使用开发环境配置）
npm run build:dev

# 或者使用监听模式（推荐开发时使用）
npm run dev
```

### 生产构建

```bash
# 生产环境构建
npm run build
```

### 打包产物

- `npm run build` 会生成：
  - `dist/smart-ai-hub/`
- `npm run build:dev` 会生成：
  - `dist/smart-ai-hub/`
- 每次 `npm run build` / `npm run build:dev` 都会先清空整个 `dist/`
- 同版本重复构建时，会重新生成新的目录，不会混入旧包内容

### 清理构建文件

```bash
npm run clean
```

## 📦 构建结果

生产构建完成后，产物目录为 `dist/smart-ai-hub/`。

```
dist/smart-ai-hub/
├── assets/               # 静态资源（CSS、JS、图片等）
├── icons/               # 扩展图标
├── images/              # 图片资源
├── popup.html           # 弹出页面
├── sidebar.html         # 侧边栏页面
├── modal.html           # 弹框页面
├── background.js        # 背景脚本
├── content.js           # 内容脚本
├── responseCapture.js   # 响应捕获脚本
├── manifest.json        # 扩展配置文件
└── index.css           # 全局样式
```

## 🔧 Chrome 扩展安装

1. 打开 Chrome 浏览器
2. 进入 `chrome://extensions/`
3. 开启"开发者模式"
4. 点击"加载已解压的扩展程序"
5. 选择生产构建生成的 `dist/smart-ai-hub/` 目录

## ✨ 主要功能

- **两用物项分析** - 智能分析页面中的商品信息，评估两用物项风险
- **浮动侧边栏** - 便捷的侧边栏界面，支持拖拽和折叠
- **应用集成** - 支持外部应用链接集成
- **实时聊天** - 支持流式响应的AI对话功能

## 🔄 重构改进

### 删除的无用代码
- ❌ 删除了 `TravelInspectionChat.vue` 组件
- ❌ 删除了 `CargoInspectionChat.vue` 组件  
- ❌ 删除了 `ContentArea.vue` 组件
- ❌ 删除了 `App.vue` 组件
- ❌ 删除了 `streamParser.js` 工具文件
- ❌ 删除了 `hot-reload.js` 热重载脚本
- ❌ 删除了 Webpack 相关配置文件

### 简化的功能
- 🎯 专注于两用物项分析核心功能
- 📝 简化了消息处理逻辑
- 🗂️ 优化了组件结构和依赖关系

### Vite 配置优化
- ⚡ 使用 Vite 的原生 ES 模块和 HMR
- 📦 优化了资源打包和路径处理
- 🔧 自动复制静态资源和manifest文件
- 🎨 正确处理CSS和JS资源路径

## 🐛 问题排查

### 常见问题

1. **构建失败** - 确保 Node.js 版本 >= 16
2. **扩展加载失败** - 检查 manifest.json 文件是否正确
3. **样式问题** - 确认 CSS 文件路径是否正确

### 开发建议

- 使用 `npm run dev` 进行开发，支持文件监听
- 修改代码后重新构建并刷新扩展
- 使用浏览器开发者工具调试

## 📄 许可证

本项目遵循 MIT 许可证。

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！