簡單用 Chrome Extension 接 Gemini API (下 Prompt) 就能實作文章摘要工具參加 Google 百萬美金挑戰賽

大綱

<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>

講者

Wolke Lin 林建宏

as a coder