ClipNote

ClipNote 是一個 Chrome 擴充功能，可把網頁上的選取文字快速存成筆記。儲存時可以套用多個標籤、建立新標籤，或略過標籤並自動歸類為「未分類」。筆記會保存在瀏覽器本機，也可以匯出為 Markdown，或同步到指定的 Notion 頁面或表格。

主要功能

• 透過右鍵選單儲存網頁選取文字。
• 自動記錄來源網址、網頁標題與建立時間。
• 儲存時可選擇多個既有標籤，也可立即新增標籤。
• 未選擇標籤時自動加入「未分類」。
• 可選擇啟用 Chrome Built-in AI 推薦標籤。
• 介面支援繁體中文與英文，可在 Options 設定切換。
• 在 popup 中顯示最近 20 筆筆記。
• 可搜尋摘錄內容、標題、網址與標籤。
• 長筆記預設顯示前 200 字，並可展開全文。
• 可刪除筆記、開啟原始來源網址。
• 可匯出全部筆記為 Markdown。
• 可同步單筆或全部未同步筆記到 Notion。

安裝方式

1. 開啟 Chrome。
2. 前往 chrome://extensions/。
3. 開啟右上角「開發人員模式」。
4. 點擊「載入未封裝項目」。
5. 選擇本專案資料夾。

使用方式

1. 在任意網頁選取要保存的文字。
2. 按右鍵，選擇「儲存到 ClipNote」。
3. 在標籤視窗中選擇既有標籤、新增標籤，或點擊「略過」。
4. 點擊 Chrome 工具列上的 ClipNote 圖示，即可查看、搜尋、刪除、匯出或同步筆記。

語言設定

• ClipNote 介面支援繁體中文與英文。
• 可在 chrome://extensions/ 找到 ClipNote，點擊「詳細資料」，再開啟「擴充功能選項」調整介面語言。
• 語言設定會套用到 popup、Options、標籤視窗與右鍵選單。
• Chrome Web Store/擴充功能清單顯示語言會依 Chrome 的瀏覽器語系套用 _locales。

快捷鍵

macOS：

• Control+Shift+C：開啟 ClipNote popup。
• Control+Shift+S：儲存目前分頁選取文字，並開啟標籤視窗。

Linux / Windows：

• Alt+Shift+C：開啟 ClipNote popup。
• Alt+Shift+S：儲存目前分頁選取文字，並開啟標籤視窗。

可到 chrome://extensions/shortcuts 自訂快捷鍵。若快捷鍵沒有反應，通常是目前頁面不允許擴充功能讀取內容，例如 Chrome 內建頁面或 Chrome Web Store。

AI 標籤推薦

ClipNote 可在支援 Chrome Built-in AI 的環境中產生 AI 標籤推薦。這個功能預設關閉；關閉時不會啟動 Chrome AI 模型，也不會下載模型。

• 可在設定頁開啟「Chrome Built-in AI 標籤推薦」。
• 可在設定頁修改 AI 系統 prompt 與每次請求 prompt 模板。
• 開啟後，存入摘錄並開啟標籤視窗時會自動啟動 AI 分析，也可手動按「AI 推薦」重新嘗試。
• 關閉時標籤視窗不會顯示推薦標籤區塊。
• 推薦會分成「適合的既有標籤」與「新增推薦標籤」。
• 綠色標籤代表既有標籤，藍色標籤代表新標籤建議。
• 點擊推薦標籤即可套用到目前筆記。
• 摘錄文字與頁面標題會送交 Chrome Built-in AI 在本機環境處理，用於產生推薦標籤。
• 如果模型需要下載或初始化，只有在功能已開啟後才會觸發。
• 若目前 Chrome 版本、硬體或作業系統不支援，仍可手動新增標籤。
• 可前往 chrome://on-device-internals 查看本機模型狀態。

AI 請求 prompt 模板可使用：

• ``：目前既有標籤清單。
• ``：網頁標題。
• ``：摘錄文字。

輸出仍需符合 {"existing":["tag"],"new":["tag"]}，否則推薦結果可能無法解析。

Notion 同步設定

ClipNote 支援三種 Notion 同步目標：

• 父頁子頁：在指定父頁底下建立一個子頁。
• Database 表格：填入 Notion Database ID，ClipNote 會解析可寫入的 data source。
• Data source 表格：直接填入 Notion Data Source ID。

設定步驟：

1. 到 Notion Connections 建立 connection/integration，取得 API key，也就是 Internal Integration Token。
2. 確認 integration 具備新增內容的權限。
3. 在 Notion 開啟要存放筆記的頁面或表格，並將該頁面或表格分享給 integration。
4. 若使用父頁子頁模式，可複製父頁網址或 Page ID。
5. 若使用 Database 或 Data source 表格模式，請確認表格有以下欄位：
   • Name：標題欄位
   • Tags：多選欄位
   • Source：網址欄位
   • Created：日期欄位
6. 在 chrome://extensions/ 找到 ClipNote，點擊「詳細資料」，再開啟「擴充功能選項」。
7. 選擇同步目標，填入 Notion API key/token 與對應網址或 ID，按下「儲存」。
8. 可按「測試連線」確認 token、ID、權限與欄位設定是否正確。
9. 回到 ClipNote popup，點擊 N 可同步全部尚未同步的筆記；單筆筆記也可點「同步」。

依 Tag 分流到不同 Notion 目標

設定頁可新增「依 Tag 分流」規則。當筆記同步時，ClipNote 會依照筆記標籤順序尋找第一個符合的規則，並改用該規則指定的 Notion 目標；沒有符合規則時，使用預設同步目標。

例如：

AI -> Database A
工作 -> 父頁 B
研究 -> Data source C

筆記若同時有 AI 和 工作，會依照筆記內標籤順序選擇第一個命中的規則。

Notion ID 說明

• 設定頁可直接貼 Notion 頁面、Database 或 Data source 網址；ClipNote 會自動解析網址路徑中的 32 字元 ID。
• Notion URL 裡 ?v=... 後面的值通常是 view ID，不是 database ID。
• Database ID 通常是 URL 中 ? 前面的 32 字元 ID。
• 例如：

https://app.notion.com/p/37d1177cde0380bbac2bf810d880c82a?v=37d1177cde0380f78a73000c6f4b7051

其中：

• 37d1177cde0380bbac2bf810d880c82a 是可用的 Database ID。
• 37d1177cde0380f78a73000c6f4b7051 是 view ID，不要填進 Database ID。

若 database 嵌在一般頁面中，請在 Notion 內開啟該 database 的完整頁面，或複製 database 連結後再取出 database ID。

Notion 同步內容

• 父頁子頁模式會在標題前加入最多 3 個標籤，例如 [技術] [研究] Article Title。
• Notion 頁面內容會包含標籤、hashtag、摘錄文字、來源網址與建立時間。
• 表格模式會把標籤寫入 Tags 多選欄位，方便在 Notion 中篩選與排序。
• 長摘錄會自動分批寫入 Notion block，避免超過單次建立頁面的 children 數量限制。
• 批次同步會逐筆處理；單筆失敗不會中斷後續筆記，popup 會顯示成功、失敗與略過數量。
• 同步時遇到 Notion API 暫時性錯誤會重試，例如 429、503、504。

主要檔案

• manifest.json：Chrome 擴充功能設定。
• background.js：右鍵選單、Notion API 請求與同步流程。
• storage.js：本機資料存取、筆記格式化與共用工具。
• tag-dialog.html：儲存筆記時的標籤選擇視窗。
• popup.html：筆記列表、搜尋、刪除、匯出與同步介面。
• options.html：Notion token 與同步目標設定頁。
• i18n.js：popup、Options、標籤視窗與背景右鍵選單的介面翻譯。
• _locales/：Chrome manifest 使用的中英文語系文字。

資料與權限

• 筆記與設定使用 chrome.storage.local 保存在本機瀏覽器。
• Notion token 只會儲存在本機，並只會用於呼叫 Notion API；請建立只授權目標頁面或表格的最小權限 integration。
• Chrome Built-in AI 標籤推薦會在本機環境處理摘錄文字與頁面標題。
• 擴充功能需要 activeTab、contextMenus、storage、downloads、scripting 權限。
• Notion 同步需要存取 https://api.notion.com/*。

測試與維護

• 執行 npm test 可跑 Node 內建測試，覆蓋標籤正規化、Markdown 匯出與 Notion 長文 children 產生。
• 目前筆記仍儲存在 chrome.storage.local，適合 MVP；若資料量成長，建議遷移到 IndexedDB 並加入容量提示。