downloadchart

v1.0.7

Published

3 months ago

## 项目简介

Downloads

0High
0Medium
0Low

xxjiang

Chrome自动下载助手插件

项目简介

这是一个Chrome浏览器扩展程序，名为"Auto Download Assistant"（自动下载助手），主要功能是自动检测网页中的下载按钮，触发下载后自动解析Excel文件内容或上传文件到阿里云OSS。

核心功能

🎯 主要功能

智能下载检测：自动识别网页中的下载按钮和链接
一键触发下载：通过插件popup界面一键启动自动下载
Excel文件解析：自动解析下载的Excel文件并提取数据
OSS云存储：支持将文件上传到阿里云OSS
跨iframe支持：能够处理iframe中的下载按钮
智能对话框处理：自动处理下载确认对话框

🏗️ 技术架构

Manifest V3：使用最新的Chrome扩展标准
Service Worker：后台处理下载事件和文件操作
Content Script：注入网页进行DOM操作
Popup界面：提供用户交互界面
消息通信：完整的扩展内部通信机制

项目结构

downloadChart/
├── manifest.json           # Chrome扩展配置文件
├── background.js           # Service Worker后台脚本
├── content.js             # 内容脚本（注入网页）
├── inject.js              # 深度注入脚本
├── popup.html             # 弹出窗口HTML
├── popup.js               # 弹出窗口脚本
├── crypto-utils.js        # OSS签名和加密工具
├── icons/                 # 插件图标文件
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
├── test/                  # 测试文件和演示页面
├── extension-dist/        # 构建输出目录
├── package.json           # Node.js项目配置
├── build.js              # 构建脚本
└── dev-guide.md          # 开发调试指南

安装和使用

环境要求

Node.js 14+
Chrome浏览器
支持ES6模块的现代浏览器

安装依赖

cd downloadChart
npm install

开发模式运行

1. 直接使用源码（推荐）

# 在Chrome中直接加载项目根目录
npm run dev

步骤：

打开Chrome浏览器
访问 chrome://extensions/
开启右上角的"开发者模式"
点击"加载已解压的扩展程序"
选择项目根目录（不是extension-dist）

2. 使用构建版本

# 构建项目
npm run build

# 然后在Chrome中加载extension-dist目录

使用方法

访问任何包含下载按钮的网页
点击Chrome工具栏中的插件图标
在弹出窗口中点击"开始自动下载"
插件会自动：
- 检测并点击下载按钮
- 监听下载完成事件
- 解析Excel文件内容
- 显示操作结果

开发调试指南

🔧 实时调试技巧

Service Worker调试

// 在background.js中添加调试代码
console.log('🔧 [Background]:', data);
debugger; // 设置断点

在Chrome扩展管理页面点击"service worker"链接
在DevTools中查看日志和设置断点

Content Script调试

// 在content.js中添加调试代码
console.log('📄 [Content]:', message);

在目标网页按F12打开DevTools
在Console中查看输出
Sources标签页中找到content.js设置断点

Popup调试

// 在popup.js中添加调试代码
console.log('🖱️ [Popup]:', event);

右键点击插件图标 → "检查弹出内容"
在弹出的DevTools中调试

消息通信调试

// 添加调试信息到消息
chrome.runtime.sendMessage({
    action: 'test',
    debug: {
        timestamp: Date.now(),
        sender: 'popup'
    }
}, response => {
    console.log('📨 收到响应:', response);
});

⚡ 热重载开发

方法1：手动重载（推荐）

修改代码后，在chrome://extensions/页面点击插件的刷新按钮
快捷键：在扩展卡片上按Ctrl+R（Windows）或Cmd+R（Mac）

方法2：自动构建监听

# 开启文件监听模式（会自动重新构建）
npm run watch

# 修改源码后会自动构建到extension-dist
# 仍需要在Chrome中手动重载扩展

🐛 常见问题排除

1. Service Worker不生效

现象：修改background.js后不生效
解决：

在扩展管理页面点击"重新加载"
检查是否有语法错误（查看"错误"按钮）
确保ES模块语法正确

2. Content Script注入失败

现象：网页中看不到Content Script效果
解决：

检查manifest.json中的matches配置
刷新目标网页
查看Console是否有权限错误

3. 跨域问题

现象：Cannot access iframe or cross-origin
解决：

检查host_permissions配置
使用消息传递代替直接DOM访问
确保iframe同源或有适当权限

4. 权限错误

现象：Missing permissions
解决：

在manifest.json中添加所需权限
重新加载扩展
检查权限是否正确声明

构建和打包

开发构建

# 一次性构建
npm run build

# 监听模式构建（文件变化时自动重建）
npm run watch

生产打包流程

1. 准备发布

# 清理和重新构建
rm -rf extension-dist
npm run build

# 检查构建结果
ls -la extension-dist/

2. 测试构建版本

# 在Chrome中加载extension-dist目录进行测试
# 确保所有功能正常工作

3. 创建发布包

# 压缩为zip文件（用于Chrome Web Store发布）
cd extension-dist
zip -r ../chrome-extension-v1.0.zip .
cd ..

4. 版本管理

// 在manifest.json中更新版本号
{
  "version": "1.1",
  // ...
}

构建脚本说明

build.js 脚本功能：

复制所有必要的源文件到extension-dist目录
保持文件结构和权限
支持监听模式，文件变化时自动重建
提供清晰的构建状态反馈

// 构建配置
const filesToCopy = [
    'manifest.json',
    'background.js',
    'content.js',
    'inject.js',
    'popup.html',
    'popup.js',
    'crypto-utils.js'
];

const dirsToCopy = [
    'icons',
    'test'
];

技术特性

核心技术栈

Chrome Extensions API：完整的浏览器扩展功能
ExcelJS：Excel文件解析库
Web Crypto API：浏览器原生加密功能
ES6 Modules：现代JavaScript模块系统
Async/Await：异步编程模式

权限说明

{
  "permissions": [
    "downloads",      // 下载管理
    "downloads.open", // 打开下载文件
    "activeTab",      // 活动标签页访问
    "storage",        // 本地存储
    "scripting",      // 脚本注入
    "notifications",  // 系统通知
    "tabs",          // 标签页管理
    "management"     // 扩展管理
  ],
  "host_permissions": [
    "*://*/*"         // 所有网站访问权限
  ]
}

安全特性

最小权限原则：只请求必要的权限
本地文件处理：Excel解析在本地进行
HTTPS传输：OSS上传使用安全连接
签名验证：OSS上传使用HMAC-SHA1签名

配置说明

OSS配置

// 在background.js中配置OSS信息
const OSS_CONFIG = {
    region: 'oss-cn-shenzhen',
    accessKeyId: 'your-access-key-id',
    accessKeySecret: 'your-access-key-secret',
    bucket: 'your-bucket-name',
    secure: true,
    dir: 'downloadsTemp/'
};

注意：生产环境中应该将敏感信息移到配置文件或环境变量中。

下载按钮识别配置

插件会自动识别以下类型的下载按钮：

包含"下载"、"导出"、"download"、"export"文本的按钮
<a>标签的download属性
常见的下载图标和样式
iframe中的下载元素

扩展功能

已实现功能

✅ 智能下载按钮检测
✅ Excel文件自动解析
✅ OSS文件上传
✅ 跨iframe操作支持
✅ 下载对话框自动处理
✅ 用户友好的popup界面
✅ 完整的错误处理机制

可扩展功能

🔄 支持更多文件格式（PDF、Word、CSV等）
🔄 添加更多云存储服务（AWS S3、Google Cloud等）
🔄 增强下载按钮识别算法
🔄 支持批量下载处理
🔄 添加下载历史记录
🔄 支持自定义规则配置

贡献指南

开发环境设置

Fork项目到你的GitHub账户
克隆项目到本地
安装依赖：npm install
创建feature分支：git checkout -b feature/your-feature
进行开发和测试
提交更改：git commit -m "Add your feature"
推送分支：git push origin feature/your-feature
创建Pull Request

代码规范

使用ES6+语法
遵循现有的代码风格
添加适当的注释和文档
确保所有功能都有适当的错误处理

测试指南

在多个网站上测试下载功能
验证Excel解析的准确性
测试跨iframe场景
确保在不同Chrome版本中正常工作

许可证

ISC License

联系方式

项目仓库：https://git.vankeservice.com/uno/front/downloadchart.git
问题反馈：请在项目中创建Issue

更新日志

v1.0.0

初始版本发布
实现基本的自动下载功能
支持Excel文件解析
集成阿里云OSS上传功能
添加跨iframe支持