Claude in Chrome 新手入门指南：从零搭建你的第一个AI助手扩展

1次阅读

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

自然语言理解与生成：支持多轮对话和长文本处理
任务自动化：可解析网页内容并执行总结 / 翻译等操作
知识整合：基于大模型实现复杂问题的推理回答

消息处理：
传统插件：单向事件驱动（如点击触发）
AI 扩展：需要持续双向通信（用户输入→API 响应）
数据存储：
传统插件：主要使用 chrome.storage.local
AI 扩展：需额外管理对话历史等 上下文数据

创建项目目录结构：

claude-extension/
├── manifest.json  # 扩展声明文件
├── background.js  # 后台服务
├── popup/
│   ├── index.html # 弹出窗口
│   └── main.js    # 前端逻辑
└── icons/         # 扩展图标

{
  "manifest_version": 3,
  "name": "Claude 助手",
  "version": "1.0",
  "permissions": [
    "storage",
    "identity"  // 用于 OAuth 认证
  ],
  "background": {"service_worker": "background.js"},
  "action": {"default_popup": "popup/index.html"}
}

// background.js
const ENCRYPTION_KEY = crypto.randomUUID(); // 运行时生成

/**
 * 安全存储 API 密钥
 * @param {string} key - Claude API 密钥
 */
async function storeApiKey(key) {
  const encrypted = await crypto.subtle.encrypt({ name: "AES-GCM"},
    await crypto.subtle.importKey(
      "raw", 
      new TextEncoder().encode(ENCRYPTION_KEY),
      {name: "AES-GCM"},
      false,
      ["encrypt", "decrypt"]
    ),
    new TextEncoder().encode(key)
  );
  await chrome.storage.session.set({apiKey: encrypted});
}

// popup/main.js
/**
 * 调用 Claude API
 * @param {string} prompt - 用户输入
 * @param {number} retries - 剩余重试次数
 */
async function callClaudeAPI(prompt, retries = 3) {
  try {
    const response = await fetch('https://api.anthropic.com/v1/complete', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-API-Key': await getDecryptedKey()},
      body: JSON.stringify({prompt: `\n\nHuman: ${prompt}\n\nAssistant:`,
        max_tokens: 1024
      })
    });

    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return await response.json();} catch (error) {console.debug(`API 调用失败: ${error.message}`);
    if (retries > 0) {await new Promise(resolve => setTimeout(resolve, 1000));
      return callClaudeAPI(prompt, retries - 1);
    }
    throw error;
  }
}

// background.js
const RATE_LIMIT = {
  maxRequests: 5,
  perSeconds: 60,
  requests: []};

function checkRateLimit() {const now = Date.now();
  RATE_LIMIT.requests = RATE_LIMIT.requests.filter(timestamp => now - timestamp < RATE_LIMIT.perSeconds * 1000);
  return RATE_LIMIT.requests.length < RATE_LIMIT.maxRequests;
}

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {if (request.type === 'apiCall') {if (!checkRateLimit()) {sendResponse({ error: 'Rate limit exceeded'});
      return;
    }
    RATE_LIMIT.requests.push(Date.now());
    // 处理 API 调用...
  }
});

// 使用 IndexedDB 存储对话历史
const dbPromise = indexedDB.open('ClaudeCache', 1);

dbPromise.onupgradeneeded = (event) => {
  const db = event.target.result;
  db.createObjectStore('conversations', { keyPath: 'sessionId'});
};

/**
 * 缓存对话片段
 * @param {string} sessionId - 会话 ID
 * @param {Array} messages - 消息历史
 */
async function cacheConversation(sessionId, messages) {
  const db = await dbPromise;
  const tx = db.transaction('conversations', 'readwrite');
  tx.objectStore('conversations').put({sessionId, messages});
};

// 每个域名独立存储数据
chrome.cookies.getAll({domain: location.hostname}, (cookies) => {const storageKey = `claude_data_${location.hostname.replace(/\./g, '_')}`;
  chrome.storage.local.set({[storageKey]: {cookies} });
});

上下文记忆：使用 IndexedDB 存储多轮对话历史
网页内容分析：通过 content scripts 抓取页面文本
多模态支持：集成图片识别 API 实现视觉问答

// 在 manifest.json 中添加
"background": {
  "service_worker": "background.js",
  "type": "module"  // 支持 ES6 模块
}

// 调试输出示例
console.debug('API 响应时间:', performance.now() - startTime);