学习目标：
简要说明：介绍 Chrome 扩展程序的基本概念，了解扩展程序在浏览器中的运行机制，学习如何创建第一个简单的扩展程序。
学习目标：
学习目标
Chrome Extension（Chrome扩展程序）是一种小型软件程序，可以修改和增强 Google Chrome 浏览器的功能。扩展程序使用标准的 Web 技术构建：HTML、CSS 和 JavaScript。
学习目标
Chrome Extension 开发环境主要包含以下几个部分：
学习目标
Manifest 文件是 Chrome Extension 的配置文件，定义了扩展的元数据、权限、资源和行为。它是每个扩展程序的必需文件，位于扩展根目录。
学习目标
Content Scripts 是在网页上下文中运行的 JavaScript 文件，可以读取和修改网页的 DOM。它们在隔离的环境中执行，拥有对网页 DOM 的完全访问权限，但与网页的 JavaScript 环境相互隔离。
Background Scripts是Chrome扩展中的核心组件，它在浏览器后台持续运行，不依赖于特定网页或用户界面。
核心特点
Popup是用户点击扩展图标时显示的小窗口界面，是用户与扩展交互的主要入口。
核心特性
Options页面是Chrome扩展的设置中心，提供比Popup更丰富的配置功能和更大的操作空间。
核心特点
Chrome扩展的消息传递机制是连接各个组件的桥梁，实现background script、content script、popup和options页面之间的通信。
通信特点
Chrome扩展提供了多种存储选项，每种都有其特定的用途和限制。
// 存储配额信息
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)
}
};
}