用 Browser Extension 打造具網頁背景感知的 AI 助理，補足 LLM 的視野盲點

現在市面上的許多 AI 工具如 ChatGPT、Dify 雖然功能強大，卻常常「看不到你正在用的系統」，造成它無法理解上下文，難以協助處理實際工作流程。例如：CRM、表單、ERP 系統等畫面資訊，AI 根本沒辦法取得。

所以常常會造成企業導入 AI 工具後，MIS 系統也要同時建立許多 API 來讓這些 AI 工具整合。
既然 Web 系統上已經有許多的資料，AI 工具有辦法直接拿這些資訊來回答使用者的問題嗎?

解決方法就是瀏覽器擴充功能（Browser Extension）
透過瀏覽器擴充功能（Browser Extension），可以利用訊息傳遞（message passing）機制，將 Web App 的背景資訊即時提供給 AI 工具，無需再額外撰寫 API。

AI 再聰明，也看不到你的畫面

當我們在企業內部導入 AI 工具（如 ChatGPT、Dify 等）時，即使它們具備強大的語言能力，也常會遇到一個關鍵問題：

AI 工具無法感知你當下操作的網頁內容。

舉例來說：

• 你正在 CRM 系統查看客戶資料，卻要自己複製貼上給 AI 幫你摘要
• 你希望 AI 協助你填表、做建議，但它不知道表單有哪些欄位
• 你打算用 Dify 寫工具來整理內部報表，但你得先建立 API 來跟它串接

這些狀況都有一個共同本質：AI 沒有「背景知識」與「畫面上下文」的來源。

很多人第一時間會想到：我是不是該寫一組 API 提供 AI 資料？

• 開發成本高，除了 API 外，還需要考量使用者驗證、資料存取 …
• 很多畫面資料可能是來自第三方、無法控制（如嵌入式報表、iframe）

這些背景資料，只有「使用者的瀏覽器」看得到。透過瀏覽器擴充功能，這些資料就能即時成為 AI 的 context 。

解法：用 browser extension 拿到你該給 AI 的 context

Chrome Extension 允許我們透過 content script 直接存取瀏覽器中的 DOM，進而：

• 取得使用者選取的文字內容
• 擷取目前頁面表格、欄位、標籤等資料
• 根據網頁結構自動推論出 context

再搭配一個 SidePanel UI，就能讓使用者直接發送 prompt，讓 LangChain agent 選用工具去「操作畫面」。這等於是：

讓 AI 有了「眼睛」（可以看見網頁）與「手」（可以操作頁面）

以往每次透過 Teams 開會後，都要人工整理會議記錄並將資料輸入到系統。有了 Browser Extension AI 助理，AI 可以自動解析 Teams 會議記事，將內容對應到系統網頁的各個欄位，實現一鍵自動填寫，我們只需要進行微調即可，如下：

使用技術：WXT + LangChain + Message

• WXT：簡化 Chrome Extension 的開發流程，不需自己組 webpack、管理 manifest

• LangChain.js：支援 function-call agent，可對接工具操作

• Message 訊息結構：透過 message，將每個功能依 message.type 去執行對應的 handler

這樣的架構，可以做到：

• 每個工具獨立維護，容易擴充

• 透過訊息傳遞由 agent 工具觸發內容腳本

• 使用者不需要額外部署 API，所有資料直接由網頁端取得

以下為整體執行流程示意圖：

上圖的 Tool Calling LLM 會判斷是否呼叫不同的 Tool 來完成使用者的問題

想知道如何把這套架構真正落地到實際專案嗎？下一篇將手把手帶你用 WXT 與 LangChain 打造一個可擴充的 AI 助理範例，親自體驗 Browser Extension + AI 的威力！

參考資源

Chrome Browser Extension
Wxt
wxtagent 程式碼