用ChatGPT做一個Chrome擴展 | 京東雲技術團隊詳情 - chrome,chatgpt,擴展京東雲開發者博客

用ChatGPT做了個Chrome Extension

最近科技圈兒最火的話題莫過於ChatGPT了。

最近又發佈了GPT-4，發佈會上的Demo着實吸睛。

筆記本上手畫個網頁原型，直接生成網頁。網友直呼：前端失業了！

但我覺着啊，真就外行看熱鬧，內行看笑話。雖然ChatGPT很強大，但沒有經過針對某個領域自定義化過的模型真就沒啥用。。。
就比如寫代碼這事兒，我覺着還不如GitHub的Copilot用着方便。

迴歸我們的主題，今天咱就蹭蹭熱度，用ChatGPT的API做個Chrome Extension。

説實話，開始還真沒想到能用ChatGPT做點兒啥，後來看過一些視頻，發現用它來做翻譯比較好，感覺沒有以往的翻譯軟件生硬。甚至你可以讓他模仿某位大師的風格去翻譯。驚了！

我就想，是不是可以把他和Chrome Extension組合下，來個劃詞翻譯。

開幹

我們可以用官網提供的腳手架快速起一個ChatGPT應用:

git clone https://github.com/openai/openai-quickstart-node.git

運行前你需要去openai生成一個OPENAI\_API\_KEY！

它是一個Next應用，運行起來是一個給寵物起名字的頁面，你可以輸入動物名稱，他會生成相應的名字。

我們看下源碼實現，下面這段比較關鍵：

const completion = await openai.createCompletion({
  model: "text-davinci-003",
  prompt: generatePrompt(req.body.animal),
  temperature: 0.6,
});

text-davinci-003是使用的模型，他是專門用來處理語言相關的模型：

有興趣可以看官網文檔對Text Completion的解釋。

temperature是一個0-2之間的係數，用來表示結果的貼合度，越大結果就越發散，越小就越針對你的問題。

prompt這裏比較關鍵，就是提問的藝術了。你對問題的描述越詳細，它的反饋就越貼近你想要的。
示例代碼給我們打了個樣兒：

function generatePrompt(animal) {
  const capitalizedAnimal = animal[0].toUpperCase() + animal.slice(1).toLowerCase();
  return `Suggest three names for an animal that is a superhero.

Animal: Cat
Names: Captain Sharpclaw, Agent Fluffball, The Incredible Feline
Animal: Dog
Names: Ruff the Protector, Wonder Canine, Sir Barks-a-Lot
Animal: ${capitalizedAnimal}
Names:`;
}

我們要做的是劃詞翻譯，這裏我們改一下：

function generatePrompt(text) {
 return `Please translate the following text into chinese: 
 Text: ${text}
 Result:`;
}

運行試下，還不錯。

到這裏其實我們相當於把劃詞翻譯的API做完了。然後就是找地方部署下，部署Next應用當然用Vercel，自家的東西。

👻 部署好了：

接下來我們再做個Chrome擴展就行了

Chrome Extension

這裏向大家推薦一個vite插件：@crxjs/vite-plugin
用它可以使用vite的特性來開發Chrome Extension，包括hmr啥的都有，也可以支持React。想想早年開發Chrome擴展那叫一個苦。

這裏我們做的是劃詞翻譯，所以需要在網頁中注入腳本，就要用到content-script。
另外，我們也要用到background service worker來接收網頁端發來的劃中詞，再跳用我們的上面搭好的API來獲得翻譯結果。

content-script.js
這部分比較簡單，就是獲取用户劃詞，然後調用Chrome的api發送給background.js

chrome.runtime.sendMessage({ text }, function (response: any) {});

background.js

background裏面通過chrome.runtime.onMessage監聽網頁端發來的詞語，然後調用我們的ChatGPT API來獲取翻譯結果即可。

chrome.runtime.onMessage.addListener(function (
  request,
  sender,
  sendResponse
 ) {
  chrome.storage.sync.get(["text", "enable"], async function (result) {
   const response = await fetch(API, {
    method: "POST",
    headers: {
     "Content-Type": "application/json",
     withCredentials: true,
    },
    body: JSON.stringify({ animal: request.text }),
   });
  });
 });

看看效果：

這裏要注意的是，我使用的是Vercel的Serverless部署的api，由於只是Hobby賬號，所以請求有個10s限制，劃的詞太長的話，ChatGPT處理時間會超過10s，導致api報錯。

好了，收工！

作者：京東零售於弘達

來源：京東雲開發者社區轉載請註明來源

京東雲開發者博客

京東雲開發者博客

博客 / 詳情