JavaScript基于ChatGPT API实现划词翻译浏览器脚本

介绍

这篇攻略将带你了解如何使用 JavaScript 和 ChatGPT API 来创建一个划词翻译的浏览器脚本。它将帮助你在阅读中轻松地查看单词的翻译，同时也有助于学习语言和词汇。

步骤1：获取ChatGPT API访问密钥

首先，你需要在 ChatGPT API 上注册一个账户并获取访问密钥。你可以在官方网站（huggingface.co）上注册一个账户，并创建一个 ChatGPT 项目。在您的 ChatGPT 项目界面中，你可以找到访问密钥。请确保保管好你的访问密钥，这是连接 ChatGPT API 的关键。

步骤2：获取并解析文本

接下来，我们需要获取并解析需要翻译的文本。在浏览器脚本中，我们可以使用Window.getSelection().toString() 方法来获取所选文本。

var selected_text = window.getSelection().toString();

步骤3：向ChatGPT API发送请求

使用获取的访问密钥和所选文本，我们可以向 ChatGPT API 发送请求并获取翻译结果。我们可以使用 async 和 await 关键字来处理异步请求，并使用 Axios 库发送 HTTP 请求。请注意，在使用 ChatGPT API 的过程中，需要注意将请求数据与 JSON 格式进行编码。

以下是一个发送请求并解析响应的示例代码：

const axios = require('axios');

async function translateText(selected_text) {
  const url = 'https://api-inference.huggingface.co/models/xxx/xxx'; //替换为你自己的模型API地址
  const headers = {
    'Authorization': 'Bearer xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', // 替换为你自己的访问密钥
    'Content-Type': 'application/json'
  };
  const data = {
    'inputs': selected_text
  }

  try {
    const response = await axios.post(url, data, {headers: headers});
    return response.data[0];
  } catch (error) {
    console.error(error);
  }
}

步骤4：在网页上显示译文

最后一步，我们需要将翻译结果显示在用户的浏览器中。这可以通过创建一个包含翻译结果的 div 元素，并将其插入到所选文本的位置上来完成。在这里，我们可以使用 JavaScript 的 DOM API 来操作HTML文档。

var translated_text = await translateText(selected_text);

var translation_element = document.createElement('div');
translation_element.innerText = translated_text;
translation_element.className = 'translation';

var selection_range = window.getSelection().getRangeAt(0); 

selection_range.deleteContents();
selection_range.insertNode(translation_element);

示例1：完整的划词翻译脚本

下面是一个完整的划词翻译脚本示例。你可以将其复制并粘贴到浏览器控制台中运行，或将其保存为一个浏览器脚本，并将其添加到你的浏览器中。

const axios = require('axios');

async function translateText(selected_text) {
  const url = 'https://api-inference.huggingface.co/models/xxx/xxx'; //替换为你自己的模型API地址
  const headers = {
    'Authorization': 'Bearer xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', // 替换为你自己的访问密钥
    'Content-Type': 'application/json'
  };
  const data = {
    'inputs': selected_text
  }

  try {
    const response = await axios.post(url, data, {headers: headers});
    return response.data[0];
  } catch (error) {
    console.error(error);
  }
}

function addTranslation() {
  var selected_text = window.getSelection().toString();

  if (selected_text === "") {
    return;
  }

  var translation_element = document.createElement('div');
  translation_element.className = 'translation';

  translateText(selected_text).then(function(response) {
      translation_element.innerText = response;

      var selection_range = window.getSelection().getRangeAt(0);
      selection_range.deleteContents();
      selection_range.insertNode(translation_element);
  });
}

document.addEventListener("mouseup", addTranslation);

示例2：使用Firefox插件快速将脚本加载到浏览器中

如果你经常需要使用划词翻译来学习语言，那么将划词翻译脚本保存为浏览器插件是一个不错的选择。使用 Firefox 的 WebExtensions API，你可以轻松创建一个浏览器插件，并将划词翻译脚本加载到浏览器中。

在此处，我们将展示如何使用 WebExtensions API 创建一个 Firefox 插件，并将划词翻译脚本加载到浏览器中：

1. 创建一个新的目录，并在目录中添加 manifest.json 文件。

   ```json
   {
   "manifest_version": 2,

   "name": "划词翻译",
   "version": "1.0",
   "author": "Your Name",
   "description": "使用ChatGPT API实现划词翻译功能",
   "homepage_url": "https://github.com/YourName/translate-with-gpt",
   "icons": {
   "48": "icon.png"
   },

   "permissions": [
   "activeTab",
   ""
   ],

   "browser_action": {
   "default_icon": {
   "48": "icon.png"
   },
   "default_title": "划词翻译"
   },

   "content_scripts": [{
   "matches": [""],
   "js": ["content-script.js"]
   }]
   }
   ```

   在 manifest.json 文件中，我们定义了插件的名称、版本、作者信息，以及浏览器操作按钮的图标和文本。我们还指示 Firefox 向所有网站发送请求，并将 content-script.js 文件注入到页面中。

2. 在同一目录下创建 content-script.js 文件，并添加划词翻译的代码。

   ```javascript
   const axios = require('axios');

   async function translateText(selected_text) {
   const url = 'https://api-inference.huggingface.co/models/xxx/xxx'; //替换为你自己的模型API地址
   const headers = {
   'Authorization': 'Bearer xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', // 替换为你自己的访问密钥
   'Content-Type': 'application/json'
   };
   const data = {
   'inputs': selected_text
   }

   try {
   const response = await axios.post(url, data, {headers: headers});
   return response.data[0];
   } catch (error) {
   console.error(error);
   }
   }

   function addTranslation() {
   var selected_text = window.getSelection().toString();

   if (selected_text === "") {
   return;
   }

   var translation_element = document.createElement('div');
   translation_element.className = 'translation';

   translateText(selected_text).then(function(response) {
   translation_element.innerText = response;

     var selection_range = window.getSelection().getRangeAt(0);
     selection_range.deleteContents();
     selection_range.insertNode(translation_element);
   

   });
   }

   document.addEventListener("mouseup", addTranslation);
   ```

   这个文件与之前的示例类似，但是它没有使用控制台，而是将翻译结果直接注入到了页面中。

3. 将两个文件保存在同一目录中(如 translate-with-gpt)。

4. 在 Firefox 中，点击菜单中的“附加组件”选项。然后，点击“设置” -> “扩展” -> “安装附加组件” -> 并选择 translate-with-gpt 目录。

5. 启动插件。在浏览网页时，单击浏览器操作按钮并选择所需的文本，即可看到翻译结果。

这便是如何使用 ChatGPT API 和 JavaScript 创建一个划词翻译的浏览器脚本，并将其封装为浏览器插件的完整攻略。