Claude Code Chrome 新手入门指南：从环境搭建到第一个扩展开发

共计 1973 个字符，预计需要花费 5 分钟才能阅读完成。

背景介绍

Chrome 扩展就像给浏览器安装的小程序，可以增强浏览器的功能。比如广告拦截、密码管理、翻译工具等常见功能都是通过扩展实现的。Claude Code 作为 AI 辅助编程工具，在扩展开发中特别适合用来：

• 快速生成基础代码框架
• 解释复杂 API 的用法
• 调试时代码错误分析
• 自动生成代码注释

环境准备

开发 Chrome 扩展其实只需要很简单的工具：

1. Chrome 浏览器 ：建议使用最新稳定版
2. 代码编辑器 ：VS Code（推荐）或 WebStorm
3. 调试工具 ：Chrome 自带的开发者工具
4. 示例代码 ：本文提供的天气查询扩展示例

核心概念

manifest.json – 扩展的身份证

这个文件是每个扩展都必须有的，就像产品的说明书。最基本的配置包括：

{
  "manifest_version": 3,
  "name": "我的天气扩展",
  "version": "1.0",
  "description": "简单的天气查询工具"
}

内容脚本 vs 后台脚本

• 内容脚本 ：直接注入到网页中，可以操作 DOM
• 后台脚本 ：在浏览器后台运行，处理长时间任务

实战：天气查询扩展

1. 创建项目结构

weather-extension/
├── manifest.json
├── popup.html
├── popup.js
├── background.js
└── icons/
    └── icon.png

2. 配置 manifest.json

{
  "manifest_version": 3,
  "name": "天气助手",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icons/icon.png"
  },
  "permissions": ["geolocation"],
  "background": {"service_worker": "background.js"}
}

3. 编写内容脚本

在 popup.js 中添加天气查询逻辑：

// 获取用户位置并显示天气
document.getElementById('getWeather').addEventListener('click', async () => {
  try {const position = await new Promise((resolve, reject) => {navigator.geolocation.getCurrentPosition(resolve, reject);
    });

    const weather = await fetchWeather(position.coords);
    document.getElementById('weatherResult').textContent = 
      ` 当前温度: ${weather.temp}°C, ${weather.desc}`;
  } catch (error) {console.error('获取天气失败:', error);
  }
});

async function fetchWeather(coords) {
  const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${coords.latitude}&lon=${coords.longitude}&units=metric&appid=YOUR_API_KEY`
  );
  return await response.json();}

调试技巧

Chrome 提供了专门的扩展调试工具：

1. 打开 chrome://extensions/
2. 启用 ” 开发者模式 ”
3. 点击 ” 加载已解压的扩展程序 ” 选择你的项目文件夹
4. 右键扩展图标选择 ” 检查 ” 即可调试弹出窗口

常见问题解决

• 权限问题 ：记得在 manifest.json 中声明所有需要的权限
• 跨域请求 ：使用官方推荐的代理模式或声明 host 权限
• 脚本不执行 ：检查 manifest 版本是否正确 (v2 和 v3 差异很大)
• 存储数据 ：使用 chrome.storage API 而不是 localStorage

性能优化建议

1. 尽量使用事件驱动而不是轮询
2. 合理使用 service worker 生命周期
3. 避免在内容脚本中加载大型库
4. 使用消息传递代替直接函数调用

学习资源推荐

• 官方文档：developer.chrome.com/docs/extensions
• 示例仓库：github.com/GoogleChrome/chrome-extensions-samples
• 调试指南：developer.chrome.com/docs/extensions/mv3/tut_debugging

开发 Chrome 扩展最有趣的地方在于可以立即看到自己的作品在浏览器中运行。从简单的天气查询开始，慢慢尝试开发更复杂的功能，你会发现浏览器扩展开发既实用又有趣。遇到问题时，多查阅官方文档和社区讨论，很快你就能开发出属于自己的实用扩展了。