ChatGPT 提問助手詳細教學

把「跟 LLM 對話」從「每次都要打整段提問」升級成「點兩下按鈕填欄位就送出」。 本教學特別詳述「快速樣板」的三種形態與參數語法。

1. 專案定位（Project Positioning）

1.1 解決什麼問題

天天用 LLM (Large Language Model; 大型語言模型) 的人都會遇到三個摩擦：

ChatGPT 提問助手把這三類痛點全部解掉：

• 提問樣板（Custom Prompt）→ 解第 1 個
• 超級樣板（Super Prompt）→ 解第 2 個（核心，本教學詳述）
• 快速回覆（Quick Reply）→ 解第 3 個

1.2 支援平台

flowchart LR
    Ext[ChatGPT 提問助手
Chrome Extension v2.0.0]
    Ext --> C1[chatgpt.com / chat.openai.com]
    Ext --> C2[gemini.google.com]
    Ext --> C3[claude.ai]
    Ext --> C4[grok.com]
    Ext --> C5[felo.ai]
    Ext --> C6[perplexity.ai]

擴充功能在這 6 個網域自動注入 sidebar、按鈕、對話框。

1.3 三類「快速樣板」一覽

2. 安裝指南

2.1 從 Chrome Web Store（推薦）

1. 開啟 Chrome Web Store 連結
2. 按「加入 Chrome」→ 同意權限（只要 storage）
3. 開啟任一支援的 LLM 網站（如 chatgpt.com）即可看到右側選單

2.2 從原始碼安裝（開發者模式）

flowchart TD
    A[git clone repo] --> B[chrome://extensions/]
    B --> C[開啟「開發人員模式」
右上角開關]
    C --> D[「載入未封裝項目」]
    D --> E[選 repo 根目錄]
    E --> F[擴充功能啟用]
    F --> G[到任一支援平台
重整頁面即可用]

1git clone https://github.com/JiaHongL/Chat-GPT-Custom-Prompt-Extension.git
2# 然後到 chrome://extensions/ 載入此資料夾

2.3 權限說明（很少，安全感佳）

1"permissions": ["storage"]

只用了 storage API（讀寫使用者設定）— 不請求 tabs、cookies、host permissions 之外的權限。host_permissions 限定在 6 個明確的 LLM 網域內。

3. 核心架構解析

3.1 v2.0.0 重構後的模組結構

flowchart TB
    subgraph "進入點"
        ML[manifest.json
content_scripts: js/loader.js]
        LD[js/loader.js
動態載入 ES Modules]
    end
    
    subgraph "核心層 - js/core/"
        ST[state.js
全域狀態]
        SG[storage.js
localStorage + chrome.storage 雙寫]
        I18[i18n.js
多國語系]
    end
    
    subgraph "資料層 - js/data/"
        DP[default_prompts.js
100 組提問樣板預設]
        DS[default_super_prompts.js
100 組超級樣板預設]
        DQ[default_quick_replies.js
100 組快速回覆預設]
    end
    
    subgraph "平台層 - js/platforms/"
        PF[factory.js
偵測網域 → 取對應 Adapter]
        PA[base.js
抽象 Adapter]
        P1[chatgpt.js / claude.js / gemini.js
grok.js / felo.js / perplexity.js]
    end
    
    subgraph "UI 層 - js/ui/"
        UM[menu.js sidebar 右側選單]
        UD[dialogs/
question_dialog 等對話框]
        US[styles.js
所有 CSS 字串]
    end
    
    subgraph "功能層 - js/features/"
        SH[shortcuts.js 快捷鍵]
        CD[chat_downloader.js 對話下載]
        AR[ads_rotator.js]
    end
    
    ML --> LD
    LD --> ST
    LD --> SG
    SG --> DP
    SG --> DS
    SG --> DQ
    LD --> PF
    PF --> P1
    P1 -.繼承.-> PA
    LD --> UM
    UM --> UD
    LD --> SH

3.2 啟動流程（v2.0.0）

sequenceDiagram
    participant Browser
    participant Loader as loader.js
    participant Content as content.js
    participant Storage as storage.js
    participant UI as menu.js + dialogs
    
    Browser->>Loader: 載入頁面、觸發 content_scripts
    Loader->>Content: import('js/content.js') (ES Module)
    Content->>Storage: 讀取 STORAGE_KEYS.PROMPT / QUICK_REPLY / SUPER_PROMPT
    Storage-->>Content: 還沒設過 → 用 default_*.js
    Content->>UI: 注入右側 sidebar + 快捷鍵 listener
    UI-->>Browser: 使用者看到選單、可開始使用

3.3 儲存策略

為什麼這樣設計？ ChatGPT 的網域 localStorage 速度快、其他平台跨網域無法共享 localStorage，所以統一退到 chrome.storage.local。雙寫保證設定不會因為網域切換遺失。

3.4 Storage Keys（全部存在這裡）

1STORAGE_KEYS = {
2  PROMPT:                'Custom.Settings.Prompt',           // 100 組提問樣板
3  QUICK_REPLY:           'Custom.Settings.QuickReply',       // 100 組快速回覆
4  SUPER_PROMPT:          'Custom.Settings.SuperPrompt',      // 100 組超級樣板
5  SUPER_PROMPT_CATEGORY: 'Custom.Settings.SuperPromptCategoryList',
6  MENU_HIDDEN:           'Custom.Settings.Menu.Hidden',
7  GEMINI_SUPPORT:        'Custom.EnableGeminiSupport',
8  THEME:                 'theme',
9}

4. ⭐ 快速樣板使用全攻略（核心章節）

本章節是本教學最重要的部分。三類「快速樣板」依複雜度由低到高介紹。

4.1 第一類：提問樣板（Custom Prompt）— 純文字模板

定位：100 組「整段文字」的提問模板，沒有變數欄位。

使用流程：

flowchart LR
    A[在 LLM 網站開啟對話] --> B[按下主鍵 + 1~5
或點右側選單對應按鈕]
    B --> C[彈出提問視窗
已填入該樣板文字]
    C --> D[直接 Enter 送出
或修改後送出]

範例：

• 樣板：「請解釋以下英文單字的意思、詞性、例句：」
• 使用：按主鍵+1 → 對話框跳出已填好上述句子 → 在後面接「chat、apple、cat、dog」→ Enter

怎麼客製化：

1. 右側選單點「設定」→「提問樣板設定」
2. 100 組可逐一編輯：標題 / 內容 / 是否顯示在選單
3. 按 主鍵 + 上排數字鍵 1–5 快速開啟對應的前 5 組（最常用的）
4. 6–100 組可隱藏，按需要從選單點

進階技巧：

• 同一個樣板可以做「多輸入」— 一次問多個（範例：英文單字解釋一次餵 4 個字）
• 提問視窗高度可拖拉、字體放大版（v0.9.x+）

4.2 第二類：⭐ 超級樣板（Super Prompt）— 動態欄位模板

這是本擴充最強大、最值得學的功能。

定位：在樣板文字裡用 {{ }} 標出「會變動的欄位」，使用時擴充功能會自動產生對應的輸入元件，填完欄位後組合成完整 prompt 送出。

4.2.1 五種欄位語法（背下來受用無窮）

1語法 1：{{}}                                              → 一個空白輸入框
2語法 2：{{ 欄位名稱 }}                                    → 一個帶標籤的輸入框
3語法 3：{{ 欄位名稱 || 預設值 }}                          → 帶預設值的輸入框
4語法 4：{{ 欄位名稱 || 選項1, 選項2, 選項3 || s }}        → 下拉選單（s = select）
5語法 5：{{ 欄位名稱 || 選項A, 選項B || c || 選項A }}     → 多選 checkbox（c = checkbox）
6語法 6：{{ 欄位名稱 || 選項A, 選項B || r || 選項A }}     → 單選 radio

欄位語法分解圖：

flowchart LR
    A["{{ }}"] -->|"3 個區段（用 ||  分隔）"| B["區段1：欄位名稱
（顯示給使用者看）"]
    B --> C["區段2：選項清單
（逗號分隔）"]
    C --> D["區段3：類型代碼
s/c/r 或省略"]
    D --> E["區段4：預設值
（可選）"]

4.2.2 完整範例：英文翻譯超級樣板

樣板原始字串：

1請幫我把以下文字從 {{ 來源語言 || 中文, 英文, 日文, 韓文 || s || 中文 }} 翻譯成 {{ 目標語言 || 英文, 中文, 日文, 韓文 || s || 英文 }}。
2
3語氣：{{ 語氣 || 正式, 中性, 口語 || r || 中性 }}
4
5需要強調的點（可複選）：{{ 強調 || 簡潔, 精確術語, 文化在地化, 押韻 || c || 精確術語 }}
6
7原文：
8{{ 原文 }}

使用者按下「翻譯」按鈕後看到的對話框（mermaid 示意）：

flowchart TB
    D[超級樣板對話框]
    D --> F1[來源語言：▼ 中文
下拉選單]
    D --> F2[目標語言：▼ 英文
下拉選單]
    D --> F3["語氣：◯正式  ◉中性  ◯口語
radio"]
    D --> F4["強調：☐簡潔  ☑精確術語  ☐文化在地化  ☐押韻
checkbox"]
    D --> F5[原文：______________
多行輸入框]
    F5 --> S[送出 → 組合成完整 prompt]

4.2.3 多欄位同名 → 重複展開

重要技巧：同一個欄位名稱出現多次，只會產生一個輸入元件，但組出來的 prompt 會在每個出現位置都填入相同值。

範例樣板：

1我要寫一封給 {{ 對象 }} 的信，主題是 {{ 主題 }}。
2
3請用 {{ 對象 }} 容易接受的語氣，把 {{ 主題 }} 講清楚，並包含 3 個對 {{ 對象 }} 有用的具體例子。

只會問使用者「對象 / 主題」兩個欄位，但 prompt 內 {{ 對象 }} 三次都會被替換。

4.2.4 進階組合範例：程式碼解讀超級樣板

 1請用 {{ 經驗等級 || 新手, 中階, 資深 || s || 中階 }} 工程師能理解的程度，
 2解讀以下 {{ 語言 || JavaScript, Python, Go, Rust, Java, C++ || s || JavaScript }} 程式碼。
 3
 4請包含（可複選）：
 5{{ 包含項 || 用途說明, 逐行註解, 關鍵概念展開, 效能分析, 重構建議, 等價寫法 || c || 用途說明, 逐行註解 }}
 6
 7額外要求：{{ 額外要求 || }}
 8
 9程式碼：
10\`\`\`{{ 語言 }}
11{{ 程式碼 }}
12\`\`\`

→ 開啟時會問 5 個欄位、根據選擇組成完整 prompt 一次送出。

4.2.5 超級樣板的「分類」功能

100 組樣板太多滑不完？v1.x 之後加了分類功能：

• STORAGE_KEYS.SUPER_PROMPT_CATEGORY 存「分類清單」
• 每個樣板可指派 1 個分類（如：翻譯 / 寫作 / 程式 / 學習 / GPTs 產生）
• 選單上方有分類 dropdown，過濾顯示

4.3 第三類：快速回覆（Quick Reply）— 對話中的一鍵按鈕

定位：對話進行中最常用的單句追問，一鍵送出。

使用情境：LLM 剛回答完，你想追問——

預設快捷鍵：Y U I O P（鍵盤上方一橫排，無 modifier，直接打字）

怎麼客製化：

1. 設定 → 快速回覆設定
2. 100 組可編輯：按鈕文字 / 對應的訊息內容 / 是否顯示 / 快捷鍵字母
3. 對話中：按按鈕 = 直接送出該句訊息

和超級樣板的差別：

• 超級樣板：開新對話前用，給 LLM 結構化的開場 prompt
• 快速回覆：對話中用，給 LLM 短追問

4.4 三類樣板的整合工作流

flowchart TD
    A[開新對話 / 進已有對話]
    A --> B{今天要做什麼?}
    
    B -->|有固定句構, 無變數| C1[用 Custom Prompt
主鍵 + 1~5]
    B -->|有結構但需填多個欄位| C2[⭐ 用 Super Prompt
右側選單點按鈕]
    B -->|對話進行中追問| C3[用 Quick Reply
Y U I O P 鍵]
    
    C1 --> D[填內文 → Enter 送出]
    C2 --> E[填欄位對話框 → 預覽 → 送出]
    C3 --> F[一鍵送出]
    
    D --> G[LLM 回覆]
    E --> G
    G --> C3

典型 power-user 工作流：

1. 早晨開會前：用「會議筆記整理」超級樣板（欄位：與會者、議題、時長）→ LLM 給結構化筆記表
2. 寫程式遇到問題：用「程式碼解讀」超級樣板（欄位：語言、經驗等級、包含項）→ LLM 給對應深度的解釋
3. 看 LLM 回答：用快速回覆「U（更細節）」「O（條列式）」「Y（其他範例）」追問
4. 要存檔：用對話下載功能（chat_downloader.js）匯出 markdown

5. 應用場景

5.1 場景 A：跨平台 prompt 一致性

你今天用 ChatGPT、明天用 Claude，樣板都同步（透過匯出 → 匯入）。不用為每個平台重學一套 prompt 庫。

5.2 場景 B：團隊 prompt 共用

把自己的超級樣板匯出成 JSON → 給同事 → 同事匯入。整個團隊用同一套 prompt 規範（適合 PM 寫需求 / 工程師 review code / 設計師寫文案）。

5.3 場景 C：教學 / 訓練

把「教學助理」「翻譯助理」「文法檢查」等樣板做成 super prompt，教使用者填欄位即可。降低 LLM 入門門檻。

5.4 場景 D：與本知識專案整合

把本專案的工作流（paper-search 查詢 / meeting-intel 整理 / gh-tutorial-qd 教學產出）所需的 prompt 變成超級樣板：

→ 在 Discord 講對話前先用超級樣板把結構填好，貼回 Discord。

6. 資安掃描報告

掃描日期：2026-05-22

6.1 風險摘要

6.2 進 production 必做 checklist

• 安裝前確認 Chrome Web Store 上的 ID 與本 repo 對應（防仿冒）
• 不要把含 API key / 公司機密的內容存進樣板（chrome.storage 未加密）
• 同步多機時用「匯出 JSON → 安全管道傳輸 → 匯入」，不要靠 Chrome Sync 自動同步（可能進 Google 帳號）
• 開源 fork 時遵守 GPL-3.0 條款

6.3 結論

🟢 低風險（個人 / 團隊內部使用）— 程式碼乾淨、權限最小化、無外部 API 呼叫。主要要注意 chrome.storage 未加密 + GPL-3.0 fork 條款兩點。

7. FAQ

Q1：v2.0.0 重構後 v1.x 的舊設定還能用嗎？ A1：可以。儲存格式（STORAGE_KEYS 對應的物件結構）沒變，純內部模組拆分。直接升級即可。

Q2：可以加自己的 LLM 平台支援嗎（例如自家 LLM）？ A2：要 fork repo 加 js/platforms/<your-platform>.js（繼承 base.js 的 Adapter），並在 manifest.json 的 content_scripts.matches 加你的網域。本擴充用 Platform Pattern，新增 platform 大概 30–50 行程式。

Q3：超級樣板可以做巢狀（樣板裡套樣板）嗎？ A3：不行，目前 {{ }} 不支援巢狀展開。但可以「執行樣板 A → 用結果填樣板 B」這種兩步驟人工接力。

Q4：100 組樣板不夠用怎辦？ A4：v2.0 後可以分類管理（SUPER_PROMPT_CATEGORY），把不同領域的樣板分到不同分類。實務上一般人用不超過 30 組就夠了。

Q5：跟 ChatGPT 內建的「自訂 GPT」差在哪？ A5：自訂 GPT 是「LLM 端」的個性化（換 system prompt / 加 tools / 加知識庫）；本擴充是「使用者端」的輸入加速（不改 LLM、只是替你打字）。可以同時用。

Q6：可以匯入 prompt packs 嗎？ A6：可以。v1.6.2 加了 prompt packs 連結（去 README 找）。匯入 JSON 即可。

Q7：未來會支援更多 LLM 嗎？ A7：作者持續加（已從 ChatGPT 擴到 6 平台）。提 issue 或 PR 加你想要的平台 adapter。但作者明確移除 DeepSeek（v1.6.1），具體原因 issue 沒寫。

8. 進階技巧

8.1 把超級樣板當「mini form」用

如果你常用 LLM 做「結構化資料填表 + 生成」（如客戶資料 → 推薦信、規格 → 程式骨架），把所有欄位放進一個超級樣板，使用者填一次表單就出結果。

8.2 用 Quick Reply 控對話節奏

把對話中常出現的「精煉」「擴展」「改寫」「翻譯」設成 quick reply，按字母鍵就送，比打字快 10 倍。

8.3 結合「對話下載」做知識儲存

features/chat_downloader.js 可匯出對話為 markdown。配合本知識專案：

flowchart LR
    A[超級樣板填欄位] --> B[LLM 生成]
    B --> C[chat_downloader 匯出 .md]
    C --> D[ai-save → inbox/]
    D --> E[paper-qa-lite / graphify 索引]

8.4 設定備份策略

匯出 → 存 git private repo / 雲端硬碟。三類分開匯出方便部分還原：

• 提問樣板（純文字）
• 超級樣板（含參數結構）
• 快速回覆（短句）

9. 整合進其他工作流

9.1 對應到本知識專案的 Layer

9.2 對應到 Claude Code / Cursor 工作流

如果你已經習慣 Claude Code 的 skill，這個 extension 是「在瀏覽器跟 LLM 對話」場景的補位 — 兩邊樣板可以對應翻譯。

10. 重點摘要 Checklist

• 是 Chrome 瀏覽器擴充功能，跨 6 個 LLM 平台
• 三類樣板：提問樣板（純文字）/ ⭐ 超級樣板（動態欄位）/ 快速回覆（單句）
• 超級樣板用 {{ }} 語法，支援 input / dropdown / radio / checkbox 4 種元件
• 100 組 × 3 類 = 300 組 slot 可自由客製
• 設定可匯入匯出（單獨匯出三類其一 或 全部）
• 權限最小化（只要 storage）、無外部 API 呼叫
• v2.0.0 已重構為原生 ES Modules，無 framework dependency
• GPL-3.0 開源
• 與本知識專案整合：把 paper-search / meeting-intel 等場景的 prompt 變超級樣板加速

11. 進一步閱讀

Generated by: AI-knowledge_template gh-tutorial-qd workflow · 2026-05-22