Claude Code实战：手把手开发微信小程序+Chrome插件

*开篇配图：Claude Code界面与微信开发者工具并排截图，展示AI辅助编码场景*

先聊聊为什么要用Claude Code搞这俩？

微信小程序和Chrome插件，一个在移动端，一个在桌面浏览器，看似八竿子打不着。但如果你做过全栈或工具类产品，你会发现它们底层逻辑有70%是相通的：都是基于JavaScript的沙箱环境，都涉及DOM操作（虽然小程序是WXML），都要处理异步请求和本地存储。

去年我做了一个“网页内容摘要助手”，先在Chrome插件里实现，后来想移植到微信小程序。手写代码的话，两套方案至少折腾两周。用Claude Code，从构思到双端上线，只用了4天。核心原则：不要让它写100%的代码，而是让它帮你生成骨架、处理样板代码、调试诡异错误。

第一步：用Claude Code搭建Chrome插件骨架

先看一个最实际的场景：我们要做一个“选中文本快速翻译”的Chrome插件。需求很简单：选中网页文字，右键或快捷键调出翻译弹窗。

为什么要用Claude Code写这部分？

因为Chrome插件的manifest.json、background.js、content_script.js之间的通信机制，新手经常搞混——runtime.sendMessage和tabs.sendMessage的区别，能让人头秃。

我的prompt是这样写的：

“作为Chrome插件开发专家，帮我创建一个“选中文本翻译”插件。要求：


manifest_v3
右键菜单触发，点击后在当前页面显示翻译弹窗
使用免费翻译API（如MyMemory）
弹窗样式简洁，支持暗色模式
代码注释完整，标注每个文件的作用


Claude直接生成了一套完整的项目结构。这里有个坑：它默认的API调用没做错误处理。所以我在生成的代码上手动加了一段：

`javascript // content.js - 注入页面的脚本 async function fetchTranslation(text, targetLang = 'zh') { try { const response = await fetch(https://api.mymemory.translated.net/get?q=${encodeURIComponent(text)}&langpair=en|${targetLang}); if (!response.ok) { throw new Error(HTTP error! status: ${response.status}); } const data = await response.json(); // MyMemory返回的数据结构有点坑，responseData是一个对象 return data.responseData.translatedText || '翻译失败，请重试'; } catch (error) { console.error('翻译API调用失败:', error); return '网络错误，请检查连接'; } }

// 监听来自background.js的消息 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { if (request.action === 'translate') { fetchTranslation(request.text).then(translation => { sendResponse({translation: translation}); }); return true; // 保持消息通道开放 } });`

这个设计真的反人类：return true这一步，官方文档文档不够清晰。如果不加这个，异步请求还没返回，消息通道就关了。我试了三次才注意到这个细节。


另一个坑：右键菜单的上下文

Chrome插件的右键菜单有个“上下文”参数，contexts: [‘selection’]表示只在选中文本时显示。Claude第一次生成的代码里没指定，导致右键永远显示菜单。修正很简单：

`javascript // background.js chrome.runtime.onInstalled.addListener(() => { chrome.contextMenus.create({ id: 'translate-selection', title: '翻译选中文本', contexts: ['selection'] // 只选中文本时显示，否则满屏菜单 }); });`


第二步：迁移到微信小程序——看似相似，实则天坑
有了Chrome插件的经验，我以为微信小程序不过是“换个UI框架，API改个名”。结果被现实狠狠打脸。
核心差异：通信机制天差地别

Chrome插件用chrome.runtime.sendMessage，微信小程序用wx.request + 全局变量 + EventChannel。Claude Code一开始生成的代码，还是按插件的思路写，导致小程序里数据传不过来。


我重新写了prompt：

`基于已有的Chrome插件翻译功能，适配成微信小程序。要求：


使用微信小程序原生框架（不是uni-app）
页面包含：输入框、翻译按钮、结果显示区域
使用wx.request调用翻译API
注意小程序网络请求必须配置白名单
处理loading状态和错误提示


生成的代码中，最核心的部分是API调用：

`javascript // pages/translate/translate.js Page({ data: { sourceText: '', translatedText: '', isLoading: false, errorMsg: '' },


// 输入框内容变化
  onInputChange(e) {
    this.setData({ sourceText: e.detail.value });
  },
// 点击翻译按钮
  async onTranslate() {
    const text = this.data.sourceText.trim();
    if (!text) {
      wx.showToast({ title: '请输入文本', icon: 'none' });
      return;
    }
this.setData({ isLoading: true, errorMsg: '' });
try {
      const res = await new Promise((resolve, reject) => {
        wx.request({
          url: 'https://api.mymemory.translated.net/get',
          data: { q: text, langpair: 'en|zh' },
          success: resolve,
          fail: reject
        });
      });

if (res.statusCode === 200 && res.data?.responseData?.translatedText) { this.setData({ translatedText: res.data.responseData.translatedText }); } else { throw new Error('翻译服务异常'); } } catch (error) { this.setData({ errorMsg: '翻译失败，请检查网络或稍后重试' }); wx.showToast({ title: '请求失败', icon: 'error' }); } finally { this.setData({ isLoading: false }); } } });`

这里有个血泪教训：微信小程序里wx.request的success回调拿到的数据，跟浏览器fetch的response对象完全不一样。浏览器里response.json()返回的是解析后的对象，但wx.request的success参数里直接就是res.data。Claude第一次生成的代码里用了res.json()，小程序直接报错。


*中间配图：微信开发者工具调试面板，展示API请求成功和失败的对比*
第三步：性能优化——从3.2秒降到0.8秒
两个版本跑起来之后，我发现翻译速度都不理想。Chrome插件平均3.2秒，小程序更惨，有时候要4秒。用户可没耐心等。
优化策略：请求缓存 + 防抖
Claude Code能帮我们快速生成优化方案。我的prompt是：

`当前翻译功能响应慢，请优化：


添加本地缓存，相同文本不重复请求
输入时使用防抖，减少无效请求
缓存有效期设为1小时


它生成的缓存代码直接可用：

`javascript // utils/cache.js - 通用缓存工具 const CACHE_KEY = 'translation_cache'; const CACHE_EXPIRY = 3600000; // 1小时


class TranslationCache {
  static get(text) {
    try {
      const cache = wx.getStorageSync(CACHE_KEY) || {};
      const item = cache[text];
      if (item && Date.now() - item.timestamp < CACHE_EXPIRY) {
        return item.translation;
      }
      // 过期数据清理
      if (item) delete cache[text];
      wx.setStorageSync(CACHE_KEY, cache);
      return null;
    } catch (e) {
      console.warn('缓存读取失败:', e);
      return null;
    }
  }
static set(text, translation) {
    try {
      const cache = wx.getStorageSync(CACHE_KEY) || {};
      cache[text] = { translation, timestamp: Date.now() };
      wx.setStorageSync(CACHE_KEY, cache);
    } catch (e) {
      console.warn('缓存写入失败:', e);
    }
  }
}

export default TranslationCache;`


加上防抖后，输入过程中不再频繁发请求。实测效果：缓存命中时，Chrome插件从3.2秒降到0.8秒，小程序从4秒降到0.5秒。
还有个技巧：批量翻译
如果你处理的文本是段落级别的，可以让Claude Code生成一个“分段-翻译-拼接”的逻辑。对于长文本，直接调用API会被截断（免费API有字符限制）。Claude Code的方案是把文本按句号分割，分批翻译，最后合并。

`javascript // 分段翻译逻辑 - 由Claude Code生成 async function batchTranslate(longText, batchSize = 5) { const sentences = longText.split(/[。！？\n]/).filter(s => s.trim()); const results = [];


  for (let i = 0; i < sentences.length; i += batchSize) {
    const batch = sentences.slice(i, i + batchSize);
    const promises = batch.map(s => fetchTranslation(s.trim()));
    const batchResults = await Promise.all(promises);
    results.push(...batchResults);
    // 每批之间延迟200ms，避免触发API限流
    if (i + batchSize < sentences.length) {
      await new Promise(r => setTimeout(r, 200));
    }
  }

return results.join('\n'); }“

总结一下，你可以立刻用的三个点

Claude Code的正确用法：不是让它写完整项目，而是用它生成骨架、处理样板代码（manifest.json、页面生命周期）、调试API调用逻辑。复杂业务逻辑还是得自己把控。

双端开发的思维迁移：Chrome插件和小程序的底层都是JS生态，但通信机制、UI框架、API差异巨大。用Claude Code做迁移时，prompt里要明确指定“基于X平台的API风格”，否则它会混用。

性能优化别靠猜，让AI给你方案：遇到性能问题，直接告诉Claude Code“当前响应时间X秒，目标Y秒，给出优化方案”。它给出的缓存、防抖、批量请求方案，都是可以直接上生产的。

*总结前配图：最终效果预览，展示Chrome插件和小程序同时运行翻译成功的截图*

最后说一句：别把Claude Code当神仙，也别当它没用。它是个24小时在线的代码搭档，能帮你省80%的样板代码时间，但剩下的20%业务逻辑和架构设计，还是得你自己来。这个比例，我觉得挺香的。