現在市面上的許多 AI 工具如 ChatGPT、Dify 雖然功能強大，卻常常「看不到你正在用的系統」，造成它無法理解上下文，難以協助處理實際工作流程。例如：CRM、表單、ERP 系統等畫面資訊，AI 根本沒辦法取得。
所以常常會造成企業導入 AI 工具後，MIS 系統也要同時建立許多 API 來讓這些 AI 工具整合。
既然 Web 系統上已經有許多的資料，AI 工具有辦法直接拿這些資訊來回答使用者的問題嗎?
解決方法就是瀏覽器擴充功能（Browser Extension）
透過瀏覽器擴充功能（Browser Extension），可以利用訊息傳遞（message passing）機制，將 Web App 的背景資訊即時提供給 AI 工具，無需再額外撰寫 API。
以下我們將一步步地來實作，
1.為什麼 AI 工具需要瀏覽器擴充功能來補全 Web 背景？
2.如何用 WXT 和 LangChain 快速打造具備 SidePanel 的 AI Chrome 擴充功能
3.優化 SidePanel 的 UI，將其轉變為對話機器人的界面，並探索更多與 LLM 結合的可能性
以下為實際操作畫面：
整理網頁內容，取出重點項目
查詢行事曆
貼上合約內容，讓 AI 依系統畫面欄位來提供建議的輸入值，省去使用者一面看合約檔，一面回到系統來輸入內容
以下為整體執行流程示意圖：
參考資源
Chrome Browser Extension
為什麼 AI 工具需要瀏覽器擴充功能來補全 Web 背景？
如何用 WXT 和 LangChain 快速打造具備 SidePanel 的 AI Chrome 擴充功能
優化 SidePanel 的 UI，將其轉變為對話機器人的界面，並探索更多與 LLM 結合的可能性
wxtagent 程式碼