第 1 章：Chrome Extension 基础入门

学习目标：

1. 了解 Chrome Extension 的基本概念和工作原理
2. 理解扩展程序的组成结构和核心文件
3. 掌握 Chrome Web Store 的发布流程

简要说明：介绍 Chrome 扩展程序的基本概念，了解扩展程序在浏览器中的运行机制，学习如何创建第一个简单的扩展程序。

第 2 章：开发环境搭建与工具

学习目标：

1. 配置 Chrome Extension 开发环境
2. 掌握开发者工具和调试技巧
3. 了解常用的开发工具和框架

知识点总结

Chrome Extension 基本概念

Chrome Extension（Chrome扩展程序）是一种小型软件程序，可以修改和增强 Google Chrome 浏览器的功能。扩展程序使用标准的 Web 技术构建：HTML、CSS 和 JavaScript。

知识点总结

开发环境组成

Chrome Extension 开发环境主要包含以下几个部分：

• 浏览器环境: Chrome 浏览器（开发版或稳定版）
• 代码编辑器: VS Code、WebStorm 等
• 版本控制: Git
• 构建工具: Webpack、Vite、Parcel（可选）
• 开发框架: React、Vue、Angular（可选）

知识点总结

Manifest 文件概述

Manifest 文件是 Chrome Extension 的配置文件，定义了扩展的元数据、权限、资源和行为。它是每个扩展程序的必需文件，位于扩展根目录。

知识点总结

Content Scripts 概述

Content Scripts 是在网页上下文中运行的 JavaScript 文件，可以读取和修改网页的 DOM。它们在隔离的环境中执行，拥有对网页 DOM 的完全访问权限，但与网页的 JavaScript 环境相互隔离。

学习目标

1. 理解Background Scripts的概念和作用机制
2. 掌握Service Worker在Chrome扩展中的应用
3. 学会事件监听和生命周期管理
4. 熟练运用后台脚本进行数据处理和API调用

5.1 Background Scripts概述

Background Scripts是Chrome扩展中的核心组件，它在浏览器后台持续运行，不依赖于特定网页或用户界面。

5.1.1 基本概念

学习目标

1. 理解Chrome扩展Popup的作用和特点
2. 掌握Popup页面的HTML、CSS、JavaScript开发
3. 学会Popup与Background Script的通信
4. 实现响应式设计和用户体验优化

6.1 Popup概述

Popup是用户点击扩展图标时显示的小窗口界面，是用户与扩展交互的主要入口。

6.1.1 Popup特点

学习目标

1. 理解Options页面的作用和特点
2. 掌握复杂设置界面的开发技巧
3. 学会数据验证和设置同步机制
4. 实现用户友好的配置体验

7.1 Options页面概述

Options页面是Chrome扩展的设置中心，提供比Popup更丰富的配置功能和更大的操作空间。

7.1.1 特点与作用

学习目标

1. 理解Chrome扩展的消息传递架构
2. 掌握不同组件间的通信方式
3. 学会处理异步消息和错误
4. 实现高效的数据传输策略

8.1 消息传递概述

Chrome扩展的消息传递机制是连接各个组件的桥梁，实现background script、content script、popup和options页面之间的通信。

8.1.1 消息传递架构

学习目标

1. 掌握Chrome扩展的各种存储机制
2. 学会设计高效的数据存储策略
3. 实现数据同步和备份功能
4. 优化存储性能和管理存储配额

9.1 存储机制概述

Chrome扩展提供了多种存储选项，每种都有其特定的用途和限制。

9.1.1 存储类型对比

9.1.2 存储容量和限制

// 存储配额信息
const StorageQuotas = {
  sync: {
    totalBytes: 102400,        // 100KB
    maxItems: 512,             // 最大项目数
    quotaBytesPerItem: 8192,   // 单项8KB
    maxWriteOperationsPerHour: 1800,
    maxWriteOperationsPerMinute: 120
  },

  local: {
    totalBytes: 5242880,       // 5MB
    maxItems: Infinity,        // 无限制
    quotaBytesPerItem: Infinity // 无限制
  },

  session: {
    totalBytes: 10485760,      // 10MB
    maxItems: Infinity,        // 无限制
    quotaBytesPerItem: Infinity // 无限制
  }
};

// 检查存储使用情况
async function checkStorageUsage() {
  const syncUsage = await chrome.storage.sync.getBytesInUse();
  const localUsage = await chrome.storage.local.getBytesInUse();

  console.log('存储使用情况:');
  console.log(`Sync: ${syncUsage}/${StorageQuotas.sync.totalBytes} bytes`);
  console.log(`Local: ${localUsage}/${StorageQuotas.local.totalBytes} bytes`);

  return {
    sync: {
      used: syncUsage,
      total: StorageQuotas.sync.totalBytes,
      percentage: (syncUsage / StorageQuotas.sync.totalBytes * 100).toFixed(2)
    },
    local: {
      used: localUsage,
      total: StorageQuotas.local.totalBytes,
      percentage: (localUsage / StorageQuotas.local.totalBytes * 100).toFixed(2)
    }
  };
}