腾讯云智能体开发平台 + DeepSeek：打造懒人专属的谷歌浏览器翻译插件

curl -X POST https://api.tencentcloud.com/translate \
-H "Content-Type: application/json" \
-H "Authorization: YOUR_AUTH_TOKEN" \
-d '{"text": "Hello, world!", "sourceLang": "en", "targetLang": "zh"}'

curl https://api.lkeap.cloud.tencent.com/v1/chat/completions \
-H "Content-Type: application/json" \
-H "Authorization: Bearer sk-个人访问令牌API Key" \
-d '{
  "model": "deepseek-r1",
  "messages": [
        {
            "role": "user",
            "content": "你是一位精通多语言的翻译大师，能够准确地将用户输入的内容进行高质量翻译。中译英，英译中。"
        },
        {
            "role": "user",
            "content": "我是Bob"
        }
    ],
  "stream": false
}'

# 目的
用户需求是基于网页选中的英文内容翻译成中文，中文内容翻译成英文

# 用户故事
用户在网页上选中一段文字，点击浮动按钮，可以生成翻译后的文字，在侧边栏展示

# 翻译使用的AI接口
## 腾讯云API
curl https://api.lkeap.cloud.tencent.com/v1/chat/completions \
-H "Content-Type: application/json" \
-H "Authorization: Bearer sk-个人访问令牌API Key" \
-d '{
  "model": "deepseek-r1",
  "messages": [
    {
      "role": "system",
      "content": "你是一位精通多语言的翻译大师，能够准确地将用户输入的内容进行高质量翻译。中译英，英译中。"
    },
    {
      "role": "user",
      "content": "我是Bob"
    }
  ],
  "stream": true
}'



## 请求参数说明
1. messages下面的第二个content：网页选中内容

## 返回数据
data: {"id":"32e0957e199c329fc20522f15b5d2592","object":"chat.completion.chunk","created":1740319168,"model":"deepseek-r1","choices":[{"index":0,"delta":{"role":"assistant","reasoning_content":"\n好的"}}],"usage":{"prompt_tokens":37,"completion_tokens":1,"total_tokens":38}}

data: {"id":"32e0957e199c329fc20522f15b5d2592","object":"chat.completion.chunk","created":1740319168,"model":"deepseek-r1","choices":[{"index":0,"delta":{"role":"assistant","reasoning_content":"，"}}],"usage":{"prompt_tokens":3…d2592","object":"chat.completion.chunk","created":1740319168,"model":"deepseek-r1","choices":[{"index":0,"delta":{"role":"assistant","reasoning_content":"发"}}],"usage":{"prompt_tokens":37,"completion_tokens":4,"total_tokens":41}}

data: {"id":"32e0957e199c329fc20522f15b5d2592","object":"chat.completion.chunk","created":1740319168,"model":"deepseek-r1","choices":[{"index":0,"delta":{"role":"assistant","reasoning_content":"来"}}],"usage":{"prompt_tokens":37,"completion_tokens":5,"total_tokens":42}}

## 返回参数说明
1. reasoning_content为返回内容，提取全部并合并为一句话

# 注意
1. 注意使用manifest v3版本开发
2. 注意中文编码问题

# 任务
根据 用户故事 和提供的 生成思维导图接口，以及相关注意点，请优化当前谷歌插件

#translate-btn {
  position: absolute;
  z-index: 10000;
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  background: #4285f4;
  color: white;
  cursor: pointer;
}

#translate-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100vh;
  background: white;
  box-shadow: -2px 0 5px rgba(0,0,0,0.1);
  z-index: 10000;
  display: flex;
  flex-direction: column;
}

#translate-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  font-size: 20px;
  cursor: pointer;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

#translate-close-btn:hover {
  background: #f0f0f0;
}

#translate-content {
  padding: 20px;
  overflow-y: auto;
  flex-grow: 1;
}

.translation-result {
  margin: 10px 0;
}

.translation-result h3 {
  margin: 10px 0 5px;
  color: #333;
  font-size: 14px;
}

.translation-result p {
  margin: 0;
  line-height: 1.4;
}

.error {
  color: red;
} 

// 监听来自 content script 的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === 'translate') {
    // 处理翻译请求
    handleTranslation(request.text)
      .then(result => {
        sendResponse(result);
      })
      .catch(error => {
        sendResponse({ success: false, error: error.message });
      });
    return true; // 保持消息通道开启以进行异步响应
  }
});

// 处理翻译请求的函数
async function handleTranslation(text) {
  try {
    const response = await fetch('https://api.lkeap.cloud.tencent.com/v1/chat/completions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer sk-hZsNO8sajITBlRzgA9d0iKjC3Mu4ez2WSfoBvYBPPthUbc0l'
      },
      body: JSON.stringify({
        model: "deepseek-r1",
        messages: [
          {
            role: "system",
            content: "你是一位精通多语言的翻译大师，能够准确地将用户输入的内容进行高质量翻译。中译英，英译中。"
          },
          {
            role: "user",
            content: text
          }
        ],
        stream: false
      })
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();
    
    if (!data.choices || !data.choices[0] || !data.choices[0].message) {
      throw new Error('Invalid response format');
    }

    return {
      success: true,
      translation: data.choices[0].message.content
    };
  } catch (error) {
    console.error('Translation error:', error);
    return {
      success: false,
      error: '翻译请求失败: ' + error.message
    };
  }
} 

// 创建浮动按钮和侧边栏
const floatingButton = document.createElement('button');
floatingButton.id = 'translate-btn';
floatingButton.textContent = '翻译';
floatingButton.style.display = 'none';

const sidebar = document.createElement('div');
sidebar.id = 'translate-sidebar';
sidebar.style.display = 'none';

// 添加关闭按钮
const closeButton = document.createElement('button');
closeButton.id = 'translate-close-btn';
closeButton.innerHTML = '×';
sidebar.appendChild(closeButton);

// 添加内容容器
const contentContainer = document.createElement('div');
contentContainer.id = 'translate-content';
sidebar.appendChild(contentContainer);

document.body.appendChild(floatingButton);
document.body.appendChild(sidebar);

// 监听关闭按钮点击事件
closeButton.addEventListener('click', () => {
  sidebar.style.display = 'none';
});

// 监听文本选择事件
document.addEventListener('mouseup', (e) => {
  const selectedText = window.getSelection().toString().trim();
  
  if (selectedText) {
    // 显示浮动按钮在选中文本附近
    const selection = window.getSelection();
    const range = selection.getRangeAt(0);
    const rect = range.getBoundingClientRect();
    
    floatingButton.style.display = 'block';
    floatingButton.style.top = `${window.scrollY + rect.bottom + 10}px`;
    floatingButton.style.left = `${window.scrollX + rect.left}px`;
  } else {
    floatingButton.style.display = 'none';
  }
});

// 点击翻译按钮
floatingButton.addEventListener('click', async () => {
  const selectedText = window.getSelection().toString().trim();
  
  if (!selectedText) {
    return;
  }

  try {
    sidebar.style.display = 'block';
    contentContainer.innerHTML = '<p>正在翻译中...</p>';

    // 通过 background script 发送翻译请求
    const response = await chrome.runtime.sendMessage({
      type: 'translate',
      text: selectedText
    });

    if (response.success) {
      contentContainer.innerHTML = `
        <div class="translation-result">
          <h3>原文:</h3>
          <p>${selectedText}</p>
          <h3>译文:</h3>
          <p>${response.translation}</p>
        </div>
      `;
    } else {
      throw new Error(response.error || '翻译失败');
    }
  } catch (error) {
    console.error('翻译出错:', error);
    contentContainer.innerHTML = `<p class="error">翻译失败: ${error.message}</p>`;
  }
}); 

{
  "manifest_version": 3,
  "name": "智能翻译助手",
  "version": "1.0",
  "description": "选中文本即时翻译(中英互译)",
  "permissions": [
    "activeTab",
    "scripting",
    "storage",
    "tabs"
  ],
  "host_permissions": [
    "https://api.lkeap.cloud.tencent.com/*"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "background": {
    "service_worker": "background.js",
    "type": "module"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "css": ["styles/content.css"],
      "js": ["content.js"]
    }
  ]
} 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>智能翻译助手</title>
  <style>
    body {
      width: 300px;
      padding: 10px;
      font-family: Arial, sans-serif;
    }
    
    .title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 10px;
      color: #333;
    }
    
    .description {
      font-size: 14px;
      color: #666;
      line-height: 1.4;
    }
    
    .instructions {
      margin-top: 10px;
      padding: 10px;
      background: #f5f5f5;
      border-radius: 4px;
    }
    
    .instructions li {
      margin: 5px 0;
      font-size: 13px;
    }
  </style>
</head>
<body>
  <div class="title">智能翻译助手</div>
  <div class="description">
    选中网页文本即可快速翻译，支持中英互译。
  </div>
  <div class="instructions">
    使用说明：
    <ol>
      <li>在网页上选中需要翻译的文本</li>
      <li>点击出现的"翻译"按钮</li>
      <li>翻译结果将在右侧边栏显示</li>
    </ol>
  </div>
</body>
</html>