5-3 Chrome Extension 呼叫 Gemini API

16th鐵人賽

Wolke

2024-09-03 07:32:02

1341 瀏覽

分享至

5-3 Chrome Extension 呼叫 Gemini API

跟前一章一樣直接將呼叫 Gemini API 的 code 給 LLM

因為 Chrome extension 其實很活，所以規格必須清楚，如果不是很清楚 Chrome extension 的撰寫方式，可以先請 LLMs 給一些教學，例如

逐步教我寫 Chrome extension

Prompt

以下改寫成用 chrome extension 呼叫
- 程式碼保持簡單
popup.html 
- input : text
- button : call api
- response div
background.js
- call api
curl \
  -H 'Content-Type: application/json' \
  -d '{"contents":[{"parts":[{"text":"Explain how AI works"}]}]}' \
  -X POST 'https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash-latest:generateContent?key=YOUR_API_KEY'

直接提示整個程式檔案的結構以及功能是因為我熟悉這個過程。然而，對於不熟悉 Chrome 擴展的人來說，更合適的方法是先建立基本的檔案結構，確保它能正常運作，然後再逐步添加功能。

不過，逐步添加功能確實需要一些技巧不然很多時候會是一場災難

回應

以下是如何將您的需求改寫成使用 Chrome 擴展呼叫 API 的程式碼：

1. popup.html

<!DOCTYPE html>
<html>
<head>
    <title>Call API</title>
    <script src="popup.js"></script>
</head>
<body>
    <input type="text" id="inputText" placeholder="Enter text here">
    <button id="callApiButton">Call API</button>
    <div id="responseDiv"></div>
</body>
</html>

2. popup.js

document.getElementById('callApiButton').addEventListener('click', function() {
  const inputText = document.getElementById('inputText').value;
  chrome.runtime.sendMessage({ action: 'callApi', text: inputText }, function(response) {
    document.getElementById('response').innerText = response;
  });
});

3. background.js

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'callApi') {
    const apiKey = 'YOUR_API_KEY';  // 將 YOUR_API_KEY 替換為你的 API 金鑰
    const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash-latest:generateContent?key=${apiKey}`;
    const requestData = {
      contents: [
        {
          parts: [
            { text: message.text }
          ]
        }
      ]
    };

    fetch(apiUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(requestData)
    })
    .then(response => response.json())
    .then(data => {
      const responseText = data.candidates[0].content.parts[0].text;
      sendResponse(responseText);
    })
    .catch(error => {
      console.error('Error:', error);
      sendResponse('Error: ' + error);
    });

    return true;  // 保持通道打開以便發送非同步回應
  }
});

4. manifest.json

{
  "manifest_version": 3, 
  "name": "API Caller",
  "version": "1.0",
  "description": "A simple Chrome extension to call an API",
  "permissions": ["activeTab", "background"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  }
}

這裡實作時有踩到一個小雷就是 chrome extesion 不同版本程式邏輯有些不同而你可以想像 LLM 平台在訓練的時候應該是不管什麼版本通通丟進去就會造成他寫出來的 code，可能只適用於某些版本就變成你要一個一個去試才知道是不是正常

簡單步驟說明：

popup.html - 建立一個簡單的 HTML 界面，包括輸入框、按鈕和顯示回應的區域。
popup.js - 設置按鈕點擊事件，將輸入的文本傳遞給 background.js。
background.js - 接收消息，向 API 發送請求，並將回應發送回 popup.js。
manifest.json - 設定 Chrome 擴展的基本配置。

將這些文件放入您的 Chrome 擴展資料夾中，並在 Chrome 擴展管理頁面中載入未封裝的擴展即可使用。記得將 YOUR_API_KEY 替換為您自己的 API 金鑰。

Icon

因為 Chrome Extension 需要 icon ，也可以直接請 LLMs 產生

產生icon

Untitled

Prompt

如果是 ChatGPT 付費帳號可以直接請他用程式的方式轉檔

用 code interpreter 將 icon 存成 
"default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }

已經將圖示存成不同大小並放在 images 資料夾中。以下是圖示的文件路徑：

16x16: icon16.png
48x48: icon48.png
128x128: icon128.png

您可以下載並將這些圖示文件用於您的 Chrome 擴展中。

關於我

我是 Wolke。我是一名專業程式開發者，專長是開發 AI 和程式解決方案。

我投入了不少時間在專業發展上。我是多本書的作者，其中包括《LINE聊天機器人+AI+雲端+開源+程式：輕鬆入門到完整學習》和《ChatGPT來襲，未來人人都需具備的運算思維！應用詠唱工程來釋放程式生產力—程式學習/開發篇》。也有出版線上課程，我熱衷於分享我的經驗和技術，幫助其他開發者更好地利用 AI 工具。

也在許多知名大學、論壇、社團擔任講者，如果貴方有需要也歡迎與我聯繫。
2023年講座紀錄

最後這篇文章若有切合你的需求，敬請訂閱按讚分享