Chrome 扩展开发教程：从零开始构建你的第一个扩展

Chrome 扩展是一种可以定制和增强 Chrome 浏览器功能的小型软件程序。本教程将指导你从零开始开发一个 Chrome 扩展。

基础概念

扩展的组成部分

Chrome 扩展主要由以下部分组成：

manifest.json - 配置文件
Background Scripts - 后台脚本
Content Scripts - 内容脚本
Popup - 弹出页面
Options - 选项页面

创建第一个扩展

1. 创建项目结构

my-extension/
  ├── manifest.json
  ├── popup/
  │   ├── popup.html
  │   ├── popup.css
  │   └── popup.js
  ├── background/
  │   └── background.js
  ├── content/
  │   └── content.js
  └── icons/
      ├── icon16.png
      ├── icon48.png
      └── icon128.png

2. 配置 manifest.json

{
  "manifest_version": 3,
  "name": "My First Extension",
  "version": "1.0",
  "description": "这是我的第一个 Chrome 扩展",
  "permissions": ["storage", "activeTab"],
  "action": {
    "default_popup": "popup/popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "background": {
    "service_worker": "background/background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content/content.js"]
    }
  ],
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

3. 创建弹出页面

popup.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <div class="container">
    <h1>我的扩展</h1>
    <button id="actionButton">执行操作</button>
  </div>
  <script src="popup.js"></script>
</body>
</html>

popup.css:

.container {
  width: 300px;
  padding: 10px;
}

button {
  margin: 5px;
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

popup.js:

document.getElementById('actionButton').addEventListener('click', function() {
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, {action: "performAction"});
  });
});

4. 创建后台脚本

background.js:

chrome.runtime.onInstalled.addListener(function() {
  console.log('扩展已安装');
  
  // 初始化存储
  chrome.storage.sync.set({
    options: {
      enabled: true,
      theme: 'light'
    }
  });
});

// 监听来自 content script 的消息
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.type === "getData") {
      // 处理数据请求
      sendResponse({data: "这是来自后台的数据"});
    }
    return true;
  }
);

5. 创建内容脚本

content.js:

// 监听来自 popup 的消息
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.action === "performAction") {
      // 执行页面操作
      modifyPage();
    }
    return true;
  }
);

function modifyPage() {
  // 页面修改逻辑
  document.body.style.backgroundColor = '#f0f0f0';
  
  // 向后台发送消息
  chrome.runtime.sendMessage({type: "getData"}, function(response) {
    console.log('收到后台数据:', response.data);
  });
}

功能开发示例

1. 存储数据

// 保存数据
chrome.storage.sync.set({key: value}, function() {
  console.log('数据已保存');
});

// 读取数据
chrome.storage.sync.get(['key'], function(result) {
  console.log('Value currently is ' + result.key);
});

2. 操作标签页

// 创建新标签页
chrome.tabs.create({url: 'https://www.example.com'});

// 获取当前标签页
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  console.log(tabs[0]);
});

3. 添加右键菜单

chrome.runtime.onInstalled.addListener(function() {
  chrome.contextMenus.create({
    id: "sampleContextMenu",
    title: "Sample Context Menu",
    contexts: ["selection"]
  });
});

chrome.contextMenus.onClicked.addListener(function(info, tab) {
  if (info.menuItemId === "sampleContextMenu") {
    // 处理右键菜单点击
    console.log("选中的文本: " + info.selectionText);
  }
});

调试技巧

1. 安装开发版扩展

打开 Chrome 扩展管理页面 (chrome://extensions/)
开启"开发者模式"
点击"加载已解压的扩展程序"
选择扩展目录

2. 调试方法

后台脚本调试：
- 点击扩展管理页面中的"背景页"链接
弹出页面调试：
- 右键点击扩展图标
- 选择"检查弹出内容"
内容脚本调试：
- 打开开发者工具
- 在 Sources 面板中找到内容脚本

发布扩展

1. 准备发布

压缩代码
优化图标
准备截图和描述

2. 发布步骤

注册 Chrome Web Store 开发者账号
支付注册费
创建新项目
上传扩展文件
填写详细信息
提交审核

最佳实践

1. 性能优化

最小化权限请求：
- 只请求必要的权限
- 使用最小权限原则
优化资源加载：
- 压缩 JS 和 CSS
- 优化图片大小

2. 安全考虑

内容安全策略（CSP）：

{
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'"
  }
}

数据验证：

// 验证用户输入
function validateInput(input) {
  return input.replace(/[<>]/g, '');
}

3. 代码组织

模块化开发：
- 使用 ES6 模块
- 分离关注点
错误处理：

try {
  // 可能出错的代码
} catch (error) {
  console.error('错误:', error);
  // 错误处理逻辑
}

常见问题解决

1. 权限问题

检查 manifest.json 中的权限声明
确保权限与功能匹配

2. 通信问题

确保消息监听器正确设置
检查跨域通信设置

3. 更新问题

增加版本号
测试自动更新机制

总结

开发 Chrome 扩展需要注意：

理解基本组件和通信机制
遵循安全最佳实践
重视性能优化
做好错误处理
保持代码整洁

建议：

从简单功能开始
逐步添加复杂特性
重视用户反馈
定期更新维护