AI 再聰明，也看不到你的畫面
當我們在企業內部導入 AI 工具（如 ChatGPT、Dify 等）時，即使它們具備強大的語言能力，也常會遇到一個關鍵問題：
AI 無法理解你當下正在操作的頁面。
舉例來說：
- 你正在 CRM 系統查看客戶資料，卻要自己複製貼上給 AI 幫你摘要
- 你希望 AI 協助你填表、做建議，但它不知道表單有哪些欄位
- 你打算用 Dify 寫工具來整理內部報表，但你得先建立 API 來跟它串接
這些狀況都有一個共同本質：AI 沒有「背景知識」與「畫面上下文」的來源。
為什麼 API 無法解這個問題？
很多人第一時間會想到：我是不是該寫一組 API 提供 AI 資料？但這其實治標不治本。
- 開發成本高，除了 API 外，還需要考量使用者驗證、資料存取 …
- 很多畫面資料可能是來自第三方、無法控制（如嵌入式報表、iframe）
- 使用者行為（滑鼠選取、視窗狀態）根本不是後端可以感知的
這些背景資料，只有「使用者的瀏覽器」看得到。
解法：用 browser extension 拿到你該給 AI 的 context
Chrome Extension 允許我們透過 content script 直接存取瀏覽器中的 DOM，進而：
- 取得使用者選取的文字內容
- 擷取目前頁面表格、欄位、標籤等資料
- 根據網頁結構自動推論出 context
再搭配一個 SidePanel UI，就能讓使用者直接發送 prompt，讓 LangChain agent 選用工具去「操作畫面」。這等於是：
讓 AI 有了「眼睛」（可以看見網頁）與「手」（可以操作頁面）
技術選型：WXT + LangChain + Message
WXT：簡化 Chrome Extension 的開發流程，不需自己組 webpack、管理 manifest
LangChain.js：支援 function-call agent，可對接工具操作
Message 訊息結構：透過 message，將每個功能依 message.type 去執行對應的 handler
這樣的架構，可以做到：
每個工具獨立維護，容易擴充
透過訊息傳遞由 agent 工具觸發內容腳本
使用者不需要額外部署 API，所有資料直接由網頁端取得
下一步：SidePanel + Agent 初探
在下一篇文章中，我們將開始實作一個基本的 SidePanel：
使用者按下 button
LangChain agent 執行工具（如：取得網頁內容）
將答案 Alert 出來
這會是我們無縫整合 AI 與 Web App 的第一步。
參考資源
Chrome Browser Extension
Wxt
用 Browser Extension 打造具網頁背景感知的 AI 助理，補足 LLM 的視野盲點
如何用 WXT 和 LangChain 快速打造具備 SidePanel 的 AI Chrome 擴充功能
優化 SidePanel 的 UI，將其轉變為對話機器人的界面，並探索更多與 LLM 結合的可能性
wxtagent程式碼