从0到1开发浏览器扩展：番茄小说下载器的技术实践

JOEH60
5 阅读4分钟

引言

在日常阅读中，我们经常会遇到喜欢的小说想要下载保存的需求。本文将分享如何使用Vue 3 + Vite开发一款功能完整的浏览器扩展——番茄小说下载器，包含验证码解锁、下载限额管理、历史记录等核心功能。

项目概述

功能特性

  • 📚 支持通过书籍ID快速下载小说章节
  • ⚠️ 分级下载限额（默认1本/天，解锁后5本/天）
  • 🔐 验证码解锁机制（有效期7天）
  • 📝 内置下载历史记录
  • 🎨 简洁美观的UI设计
  • 🚀 高效的批量下载算法

技术栈

  • 前端框架：Vue 3 + Composition API
  • UI库：Element Plus
  • 构建工具：Vite
  • 数据存储：localStorage
  • 网络请求：Fetch API
  • 扩展类型：Chrome Extension (Manifest V3)

核心功能实现

1. 扩展基础架构

使用Vite构建Chrome扩展需要特殊配置，主要包括：

// package.json
{
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "rimraf dist && vite build"
  }
}

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>番茄小说下载器</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

2. 下载限额系统设计

实现了分级下载限额机制，通过localStorage持久化存储：

// 配置常量
const DEFAULT_DAILY_LIMIT = 1
const UNLOCKED_DAILY_LIMIT = 5
const STORAGE_KEY = 'fanqie_daily_limit'
const UNLOCK_STATUS_KEY = 'fanqie_unlock_status'

// 检查解锁状态
const checkUnlockStatus = () => {
  const unlockData = JSON.parse(localStorage.getItem(UNLOCK_STATUS_KEY) || '{}')
  if (unlockData.unlocked && unlockData.expiry) {
    const now = new Date().getTime()
    const expiry = new Date(unlockData.expiry).getTime()
    if (now < expiry) {
      isUnlocked.value = true
    } else {
      resetUnlockStatus()
    }
  }
}

// 检查下载限额
const checkQuota = () => {
  const todayStr = new Date().toLocaleDateString()
  const record = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}')
  
  if (record.date !== todayStr) {
    todayCount.value = 0
    localStorage.setItem(STORAGE_KEY, JSON.stringify({ date: todayStr, count: 0 }))
    return true
  }
  
  const currentLimit = isUnlocked.value ? UNLOCKED_DAILY_LIMIT : DEFAULT_DAILY_LIMIT
  return record.count < currentLimit
}

3. 验证码解锁机制

实现了基于前端验证码库的解锁功能，具有7天有效期：

// 验证码验证
const verifyCode = () => {
  if (!form.verificationCode) {
    return ElMessage.warning('请输入验证码')
  }
  
  const code = form.verificationCode.trim().toUpperCase()
  
  if (VERIFICATION_CODES.includes(code)) {
    const expiryDate = new Date()
    expiryDate.setDate(expiryDate.getDate() + 7) // 有效期7天
    
    localStorage.setItem(UNLOCK_STATUS_KEY, JSON.stringify({
      unlocked: true,
      expiry: expiryDate.toISOString()
    }))
    
    ElMessage.success('🎉 验证码验证成功！已解锁每日5本下载限额')
  } else {
    ElMessage.error('❌ 验证码错误，请检查后重试')
  }
}

4. 高效批量下载算法

采用批量请求+异步处理的方式，提高下载效率：

const startDownload = async () => {
  if (!checkQuota()) {
    return ElMessageBox.alert('今日下载次数已达上限')
  }
  
  downloading.value = true
  let contentBuffer = []
  let start = form.startChapter
  
  try {
    // 批量下载逻辑
    while (start <= form.endChapter) {
      const batchSize = 30
      const chapters = []
      
      for (let i = 0; i < batchSize && (start + i) <= form.endChapter; i++) {
        chapters.push(start + i)
      }
      
      const batchStr = chapters.join(',')
      const chaptersData = await fetchChapters(batchStr)
      
      if (chaptersData && chaptersData.length > 0) {
        processBatchContent(chaptersData, contentBuffer)
      }
      
      start += batchSize
      await new Promise(r => setTimeout(r, 300)) // 避免请求过快
    }
    
    // 保存文件
    if (contentBuffer.length > 0) {
      saveFile(contentBuffer)
      incrementQuota()
      ElMessage.success(`下载完成！共 ${contentBuffer.length} 章`)
    }
  } catch (e) {
    ElMessage.error('下载出错: ' + e.message)
  } finally {
    downloading.value = false
  }
}

开发过程中的问题与解决方案

1. 扩展打包体积优化

问题：构建后的扩展体积较大，影响加载速度

解决方案：

  • 配置Vite的代码分割
  • 使用Tree Shaking移除未使用的代码
  • 优化依赖引入，只导入必要的组件
  • 压缩静态资源

2. 跨域请求处理

问题：扩展需要访问外部API，遇到跨域限制

解决方案：

  • 在manifest.json中配置host_permissions
  • 使用Chrome扩展的background script代理请求
  • 配置正确的CORS头

3. 版本号规范问题

问题：Edge扩展商店对版本号格式有严格要求（非零整数不能以0开头）

解决方案：

  • 采用年份.月份.日期.版本号格式，如26.1.16.1
  • 避免使用0开头的月份和日期数字
  • 构建脚本中自动生成符合规范的版本号

项目构建与部署

1. 自动化构建流程

配置了完整的自动化构建脚本：

"scripts": {
  "build": "rimraf dist && vite build && node scripts/zip-build.js"
}

2. 扩展打包与发布

  • 构建生成dist目录
  • 自动压缩为zip文件
  • 提交到Chrome Web Store和Microsoft Edge Add-ons
  • 完善的发布说明和截图

总结与展望

通过开发番茄小说下载器，我们掌握了：

  1. Chrome扩展开发的完整流程
  2. Vue 3 Composition API的实战应用
  3. 前端状态管理与持久化
  4. 异步编程与性能优化
  5. 扩展商店发布规范

未来可以考虑的功能扩展：

  • 📱 支持移动端适配
  • 🔄 自动更新小说章节
  • 📊 统计分析功能
  • 🔒 更安全的验证码机制
  • 🌐 支持更多小说平台

应用商店扩展直链地址

Edge扩展直链

写在最后

开发Chrome扩展是一个很好的学习机会，它涉及到前端开发、浏览器API、网络请求等多个方面。希望本文的实践经验能对你有所帮助，欢迎在评论区交流讨论！

关键词：Chrome扩展开发、Vue 3、Vite、番茄小说下载器、验证码解锁、下载限额管理、浏览器插件开发

阅读建议：适合有一定前端基础，想要学习Chrome扩展开发的开发者阅读。文中包含了完整的代码示例和技术实现思路，可以作为实际开发的参考。

avatar
文章
阅读
粉丝