AI 時代的外掛控制實戰：
Chrome Extension 填單助手

1. 專案定位與核心觀念

傳統的網頁自動化或表單填寫常需依賴複雜的大型 RPA 工具。但現在，透過開發一個輕量級的 Chrome 外掛，即可利用簡單的 JS DOM 操作與通訊協定，實現靈活且強大的網頁填單助手。

在進入外掛控制前，我們在課堂開頭先下載並安裝了 FALO Instagram Video Enhancer (v1.0.1) 擴充功能，體驗了外掛如何注入程式碼。接著，我們將延伸此概念：如果我們是要「控制網頁、幫忙進行 ERP 表單自動化」呢？本案將帶您透過實作，直觀理解 Chrome 外掛與網頁 DOM 的通訊控制。

外掛雙向控制核心觀念剖析

2. V1 網頁操作輔助器 (ERP 表單輔助器)

我們實作的第一個階段是 **ERP 表單輔助器**。當我們載入一個 Chrome Extension 到網頁時，外掛主要進行雙向資料控制：

• 讀取網頁 (Read DOM)
  檢測頁面上的輸入欄位與系統狀態，並讀取 DOM 節點的 value 值回傳至側邊欄中。
• 修改網頁 (Write DOM)
  在外掛側邊欄發送寫入指令，將數值填寫進對應的網頁 DOM 輸入框中，填值成功後伴隨亮黃色的填值閃爍視覺反饋。

這代表 Extension 可以完全控制網頁，但是它有一個技術特性與維護要點 (需注意事項)：外掛高度依賴網頁的 DOM 結構。只要前端代碼重構、CSS Selector 改變，外掛對應的定位邏輯就需要同步維護與更新，否則將會找不到目標元素而失效。

3. AI Agent 實戰 Prompt 指南

本實戰引導學員從最簡單的「單欄讀寫」開始，逐步擴展至「全表單批次操作與清空」，最終躍升至具備「CSV 備份與遠端遙控」的完整自動化外掛。

4. 附錄：V1 網頁外掛核心程式碼剖析

此處列出 V1 階段注入網頁的 Content Script 核心邏輯。學習者可以從代碼中看出「外掛如何透過遍歷 DOM 來理解網頁結構」：

// 遍歷 DOM，篩選頁面上所有的可輸入元素
function getFormFields() {
  return Array.from(
    document.querySelectorAll(
      'input:not([type="submit"]):not([type="hidden"]), select, textarea'
    )
  );
}

// 根據 DOM 階層與 ID/Name 屬性，計算出唯一的 CSS Selector 路徑
function getCSSSelector(el) {
  if (el.id) return `#${el.id}`;
  if (el.name) return `${el.tagName.toLowerCase()}[name="${el.name}"]`;
  
  // 向上遞歸父層
  const parent = el.parentElement;
  if (parent && parent.id) {
    return `#${parent.id} > ${el.tagName.toLowerCase()}`;
  }
  return el.tagName.toLowerCase();
}