隨著全球化的發展，跨語言交流變得越來越普遍。無論是學習、工作還是娛樂，我們經常需要閱讀和理解不同語言的文本。為了提升用戶體驗，許多瀏覽器擴展和工具提供了劃詞翻譯功能，允許用戶選中文本后立即獲得翻譯結果。本文將介紹如何使用JavaScript和ChatGPT API實現一個簡單的劃詞翻譯瀏覽器擴展。
ChatGPT API是由Open提供的一種自然語言處理接口，可以用于生成文本、翻譯、問答等多種任務。通過調用ChatGPT API，我們可以實現高質量的文本翻譯功能。
要使用ChatGPT API，首先需要注冊Open賬戶并獲取API密鑰。API密鑰是訪問API的憑證，確保在代碼中妥善保管。
為了開發瀏覽器擴展，我們需要一個基本的開發環境?？梢允褂萌魏挝谋揪庉嬈鳎ㄈ鏥S Code）和現代瀏覽器（如Chrome或Firefox）進行開發。
首先，創建一個新的文件夾作為項目的根目錄。在根目錄下創建以下文件和文件夾：
/劃詞翻譯擴展
│
├── manifest.json
├── background.js
├── content.js
├── popup.html
├── popup.js
└── styles.css
manifest.json是瀏覽器擴展的配置文件，定義了擴展的基本信息和權限。
{
"manifest_version": 3,
"name": "劃詞翻譯",
"version": "1.0",
"description": "使用ChatGPT API實現劃詞翻譯的瀏覽器擴展",
"permissions": [
"activeTab",
"contextMenus",
"storage"
],
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
]
}
background.js是擴展的后臺腳本，負責處理全局事件和API調用。
chrome.runtime.onInstalled.addListener(() => {
chrome.contextMenus.create({
id: "translate",
title: "翻譯選中文本",
contexts: ["selection"]
});
});
chrome.contextMenus.onClicked.addListener((info, tab) => {
if (info.menuItemId === "translate") {
chrome.tabs.sendMessage(tab.id, { action: "translate", text: info.selectionText });
}
});
content.js是內容腳本，運行在網頁的上下文中，負責處理用戶選中的文本并顯示翻譯結果。
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.action === "translate") {
translateText(request.text).then(translation => {
showTranslation(translation);
});
}
});
function translateText(text) {
return fetch("https://api.openai.com/v1/chat/completions", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer YOUR_API_KEY`
},
body: JSON.stringify({
model: "gpt-3.5-turbo",
messages: [
{ role: "system", content: "你是一個翻譯助手，將用戶輸入的文本翻譯成中文。" },
{ role: "user", content: text }
]
})
})
.then(response => response.json())
.then(data => {
return data.choices[0].message.content;
});
}
function showTranslation(translation) {
const translationDiv = document.createElement("div");
translationDiv.style.position = "fixed";
translationDiv.style.bottom = "20px";
translationDiv.style.right = "20px";
translationDiv.style.backgroundColor = "white";
translationDiv.style.border = "1px solid #ccc";
translationDiv.style.padding = "10px";
translationDiv.style.zIndex = "1000";
translationDiv.innerText = translation;
document.body.appendChild(translationDiv);
setTimeout(() => {
document.body.removeChild(translationDiv);
}, 5000);
}
popup.html是擴展的彈出窗口，用戶可以通過點擊擴展圖標打開它。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>劃詞翻譯設置</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>劃詞翻譯設置</h1>
<label for="apiKey">API密鑰：</label>
<input type="text" id="apiKey" placeholder="輸入你的API密鑰">
<button id="save">保存</button>
<script src="popup.js"></script>
</body>
</html>
popup.js處理彈出窗口中的用戶交互，例如保存API密鑰。
document.getElementById("save").addEventListener("click", () => {
const apiKey = document.getElementById("apiKey").value;
chrome.storage.sync.set({ apiKey }, () => {
alert("API密鑰已保存");
});
});
chrome.storage.sync.get("apiKey", (data) => {
if (data.apiKey) {
document.getElementById("apiKey").value = data.apiKey;
}
});
styles.css用于美化彈出窗口。
body {
font-family: Arial, sans-serif;
padding: 20px;
}
h1 {
font-size: 20px;
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 10px;
}
input {
width: 100%;
padding: 8px;
margin-bottom: 20px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
chrome://extensions/。如果功能不正常，可以使用Chrome的開發者工具（F12）查看控制臺輸出，排查錯誤。
chrome://extensions/頁面，點擊“打包擴展程序”。.crx文件和.pem私鑰文件。通過本文的介紹，我們使用JavaScript和ChatGPT API實現了一個簡單的劃詞翻譯瀏覽器擴展。這個擴展可以幫助用戶快速翻譯網頁中的選中文本，提升跨語言閱讀的體驗。未來，我們可以進一步優化擴展的功能，例如支持更多語言、自定義翻譯樣式等。
以上是一個基于JavaScript和ChatGPT API實現劃詞翻譯瀏覽器擴展的詳細教程。通過這個項目，你可以學習到如何開發瀏覽器擴展、調用API、處理用戶交互等技能。希望這篇文章對你有所幫助，祝你開發順利！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
