不用安裝擴充擴件，使用 ChatGPT 翻譯文章的瀏覽器書籤按鈕 (bookmarklet)

雖然有許多使用 ChatGPT 翻譯的擴充套件，但是使用 ChatGPT 翻譯，會需要支付 API 費用。以下說明不用安裝擴充擴件，使用 ChatGPT 翻譯文章的瀏覽器書籤按鈕 (bookmarklet) 的方法。

問題說明：

擴充套件提供 ChatGPT 翻譯功能，會需要支付 OpenAI API 費用。

如果安裝擴充套件時，沒有詢問你的 API Key，代表是擴充套件的開發者付費。後者的話，我不太能理解開發者願意自掏腰包，讓使用者免費使用擴充套件。所以我傾向使用自己的瀏覽器書籤按鈕或者是自己的 API Key。

解決方式：

解決方法1：需要先安裝「ChatGPT 萬能工具箱」擴充套件，不需要輸入 API key

參考 Will 在介紹好用工具：ChatGPT 萬能工具箱 (Chrome/Edge 擴充套件) 文章，詳細的連結格式說明，結合瀏覽器書籤按鈕 (bookmarklet)，讓你瀏覽網頁時，滑鼠選取要翻譯的段落、再點選書籤按鈕，就可以將英文文章當作提示文字 (prompt)。

1. Chrome 或 Edge 瀏覽器先安裝「ChatGPT 萬能工具箱」，有支援「自動從 URL 填入提示」才能使用以下瀏覽器書籤按鈕的語法。

2. 回到瀏覽器「我的最愛」（其他瀏覽器則稱「書籤列」），新增一個書籤。我自己習慣複製貼上書籤列的舊書籤，再修改。

(1) 選取「我的最愛」舊書籤上，點選滑鼠右鍵，按選單的「複製」

(2) 在「我的最愛」上空白處，點選滑鼠右鍵，按「貼上」

3. 修改「我的最愛」的名稱與 URL (網址)

(1) 「我的最愛」名稱，可改成自己要的名稱，例如「ChatGPT 翻譯」。

(2) 「我的最愛」的 URL (網址)：

輸入以下 Javascript 語法

javascript:let inquiry = "";const selectedText = window.getSelection ? window.getSelection() : document.getSelection ? document.getSelection() : document.selection.createRange().text;if (selectedText !== "") { inquiry = encodeURIComponent( selectedText.toString().replace(/"/g, "").replace(/\|/g, "\\|") );} else { const userInput = prompt("輸入要翻譯的文字："); if (userInput) { inquiry = encodeURIComponent( userInput.replace(/"/g, "").replace(/\|/g, "\\|") ); }}if (inquiry) { const translationUrl = `https://chat.openai.com/chat/#autoSubmit=0&prompt=請幫我用臺灣常用的繁體中文翻譯文章，文章內容用三個 \%60 符號間隔：${encodeURI('\n')}\%60\%60\%60${encodeURI('\n')}${inquiry}${encodeURI('\n')}\%60\%60\%60%60; window.open(translationUrl.replace(/ /g, "+"));}

解決方法2：不需要先安裝「ChatGPT 萬能工具箱」擴充套件，但需要輸入 API key

第二種按鈕 Javascript 語法，需要輸入 API key，好處是支援 Edge 、Chrome 與 Firefox 多種瀏覽器 (修改自 jackdoe 的 chatgpt summarize bookmarklet)

javascript:(function(api_key) { var selection = window.getSelection().toString(); if (selection.length == 0) return; var xhr = new XMLHttpRequest(); xhr.open("POST", "https://api.openai.com/v1/chat/completions"); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.setRequestHeader('Authorization', 'Bearer ' + api_key); window.scrollTo({top: 0}); window.document.body.innerHTML = 'asking...'; window.document.body.style.backgroundColor = "white"; window.document.body.style.color = "black"; window.document.body.style.fontFamily = 'monospace'; window.document.body.style.fontSize = "16px"; window.document.body.style.margin = "auto"; window.document.body.style.padding = "1rem"; window.document.body.style.maxWidth = "60rem"; xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { var response = JSON.parse(xhr.responseText); var summary = response.choices[0].message.content; window.document.body.innerHTML = summary } else { try { var e = JSON.parse(xhr.responseText); window.document.body.innerHTML = e.error.message } catch(e) { window.document.body.innerHTML = 'error asking.. check the console'; console.log(xhr) } } } }; var data = JSON.stringify({ "model": "gpt-3.5-turbo", "messages": [ {"role": "system", "content": "請幫我翻譯以下文章，並且使用臺灣常用的繁體中文："}, {"role": "user", "content": selection} ] }); xhr.send(data);})("要記得輸入你的 API key")

Javascript 語法中有段網址「https://chat.openai.com/chat/#autoSubmit=0&prompt=請幫我翻譯以下文章，並且使用臺灣常用的繁體中文：」