COSCUP 2024

簡單用 Chrome Extension 接 Gemini API (下 Prompt) 就能實作文章摘要工具參加 Google 百萬美金挑戰賽
2024-08-04, 10:00–10:30 (Asia/Taipei), RB102

大綱

<ul>
    <li><strong>架構</strong></li>
    <ul>
        <li>extension call gemini api (prompt) with webpage content show on popup.html</li>
    </ul>
    <li><strong>Chrome Extension 介紹</strong></li>
    <ul>
        <li>Chrome Extension 範例</li>
    </ul>
    <li><strong>Gemini 介紹</strong></li>
    <ul>
        <li>API</li>
        <ul>
            <li>用 Chrome Extension 呼叫範例</li>
        </ul>
        <li>附帶一提:未來 chrome 會內建 gemini nano</li>
        <ul>
            <li>操作用 Chrome Extension 呼叫範例</li>
        </ul>
    </ul>
    <li><strong>實作</strong></li>
    <ul>
        <li>加 prompt 完成 網頁文字內容總結 extension</li>
    </ul>
    <li><strong>Q&A</strong></li>
</ul>
<h2>詳細內容</h2>
<h3>架構</h3>
<p>描述如何透過 Chrome Extension 呼叫 Gemini API,將網頁內容顯示在 popup.html 中。</p>
<h3>Chrome Extension 介紹</h3>
<p>簡介什麼是 Chrome Extension 及其功能。</p>
<p>提供一個 Chrome Extension 的範例,展示其基本功能和操作。</p>
<h3>Gemini 介紹</h3>
<p>概述 Gemini API 及其用途。</p>
<p>提供用 Chrome Extension 呼叫 Gemini API 的範例,展示如何進行 API 請求和接收回應。</p>
<p>提及未來 Chrome 將內建 Gemini Nano,這將使操作更加方便。</p>
<p>展示如何使用 Chrome Extension 呼叫 Gemini Nano,強調其簡易性和高效性。</p>
<h3>實作</h3>
<p>演示如何透過加 prompt 完成網頁文字內容總結的 Chrome Extension。</p>
<p>詳細步驟包括:</p>
<ul>
    <li>建立 Chrome Extension 專案。</li>
    <li>設定 manifest.json 文件。</li>
    <li>實現 popup.html 和 popup.js,處理用戶輸入和 API 呼叫。</li>
    <li>渲染 API 回應結果,展示總結內容。</li>
</ul>
<h3>Q&A</h3>
<p>解答聽眾的問題,針對實作細節、技術難點以及參賽相關事項提供解釋。</p>

https://wolkesau.medium.com/%E7%B0%A1%E5%96%AE%E7%94%A8-chrome-extension-%E6%8E%A5-gemini-api-%E4%B8%8B-prompt-%E5%B0%B1%E8%83%BD%E5%AF%A6%E4%BD%9C%E6%96%87%E7%AB%A0%E6%91%98%E8%A6%81%E5%B7%A5%E5%85%B7%E5%8F%83%E5%8A%A0-google-%E7%99%BE%E8%90%AC%E7%BE%8E%E9%87%91%E6%8C%91%E6%88%B0%E8%B3%BD-ac2adda60c6f