AI自動填表，一鍵搞定！最強Browser Extension全教學

2025-05-29

前言

延續優化 SidePanel 的 UI，將其轉變為對話機器人的界面，並探索更多與 LLM 結合的可能性，我們已經在 SidePanel 中完成與 LLM 的對話功能，並且能成功取得網頁上的 BizForm 表單欄位資訊。本篇將進一步把這個能力應用到「自動填寫表單」的實戰上。你只需要輸入一個指令或貼上會議記錄，AI 就能幫你把資訊自動填入對應欄位，真正實現一鍵自動填表。
以下將以 KM 系統為例子，建立該網站的 2 項工具，一個取得表單欄位資訊，另一個則是將表單欄位資訊填入表單中。

實作

要取得網頁表單欄位的資訊及自動填入資料，要先解析網頁的 HTML，看看如何取得表單欄位資訊及透過 id 來指定它們的值。
你可以把這些 HTML 結構交給 ChatGPT，請它協助你產生對應的 JavaScript 來自動化擷取欄位資訊。這樣可以加快開發流程，先在瀏覽器 Console 測試 JS 程式碼是否正確抓到欄位，如下圖所示：

而在填入表單欄位資訊時，則需要取得表單的 id，然後透過 id 來指定它們的值。
不過在 KM 系統中，部分欄位使用了 TinyMCE 這類富文本編輯器。TinyMCE 會將原本的 textarea 元件「包裝」成一個 iframe，這時就不能單純用 id 屬性直接設定值。如下圖所示，

textarea 已經被 iframe 取代，所以我們必須改用 TinyMCE 的 setContent API 來操作內容。

建立工具

以下建立 KM 系統要使用的 2 項工具，一個取得表單欄位資訊，另一個則是將表單欄位資訊填入表單中。
在這裡主要是設定工具的描述及工具的參數類型，讓 LLM 知道這個工具是幹嘛用的，以及參數的類型(Tool Calling)。
而實際上的操作，則會傳送訊息讓 Content-Script 中的 Handler 去執行。

定義工具描述

這裡我們先定義三個工具，讓 LLM 清楚理解每種工具是幹嘛用的。

在utils/types/message.ts的MESSAGE_TOOL_TYPES加入取得欄位、設定欄位及設定 TinyMCE 欄位的描述。

export const MESSAGE_TOOL_TYPES = {
  PAGE_CONTENT: {
    name: "pageContent",
    description: "取得整個網頁的純文字內容",
  },
  BIZ_EXTRACT_FIELDS: {
    name: "bizformExtractFields",
    description:
      "擷取目前頁面中所有可輸入的欄位名稱與其值（如文字欄位、下拉選單、日期等）",
  },
  //新增以下3個工具描述
  KM_EXTRACT_FIELDS: {
    name: "kmExtractFields",
    description:
      "擷取目前頁面中所有可輸入的欄位id, 名稱與其值（如文字欄位、下拉選單、日期等）",
  },
  KM_SET_FIELDS: {
    name: "kmSetFields",
    description:
      "依合適的填寫內容（回傳欄位 id 對應內容, 例如:ctl00_cp_fieldRepeater_ctl02_date_A: 2024/05/23）來填寫網頁表單欄位",
  },
  TINYMCE_SET_VALUE: {
    name: "tinymceSetValue",
    description: "設定 TinyMCE 編輯器的內容",
  },
};

建立 KM 工具

在utils/tools目錄中新增kmTools.ts，在裡面建立LangChain的 Tool，如下，

import { tool } from "@langchain/core/tools";
import { z } from "zod";
import { sendMessage } from "../message";
import { MESSAGE_TOOL_TYPES } from "../types/message";

const noOp = z.string().optional().describe("No-op parameter.");

export const kmExtractFieldsTool = tool(
  async () => {
    const response = await sendMessage<string>({
      type: MESSAGE_TOOL_TYPES.KM_EXTRACT_FIELDS.name,
    });
    return response;
  },
  {
    name: MESSAGE_TOOL_TYPES.KM_EXTRACT_FIELDS.name,
    description: MESSAGE_TOOL_TYPES.KM_EXTRACT_FIELDS.description,
    schema: z.object({
      noOp,
    }),
  }
);

const setFieldsSchema = z.record(z.string(), z.any());

export const kmSetFieldsTool = tool(
  async (fields) => {
    console.log("callReportSetFieldsTool fields", fields);
    const response = await sendMessage<string>({
      type: MESSAGE_TOOL_TYPES.KM_SET_FIELDS.name,
      payload: fields,
    });
    return response;
  },
  {
    name: MESSAGE_TOOL_TYPES.KM_SET_FIELDS.name,
    description: MESSAGE_TOOL_TYPES.KM_SET_FIELDS.description,
    schema: setFieldsSchema,
  }
);

在設定欄位的工具中，我們使用z.record(z.string(), z.any())來定義 schema，id 為字串，欄位值為 any，這樣就可以讓我們傳入任何類型的資料。

設定 KM 工具可以在那些網站使用

在utils/tools/index.ts中，在toolRules中加入kmExtractFieldsTool及kmSetFieldsTool，如下，

import { matchPattern } from "browser-extension-url-match";

import { pageContentTool } from "./pageContentTool";
import { bizformExtractFieldsTool } from "./bizformExtractFieldsTool";
import { kmExtractFieldsTool, kmSetFieldsTool } from "./kmTools";

const tools = [pageContentTool];
export { tools };

const toolRules = [
  {
    matches: ["<all_urls>"],
    tools: [pageContentTool],
  },
  {
    matches: ["https://bizform.vitalyun.com/*"],
    tools: [bizformExtractFieldsTool],
  },
  //設定 KM 系統可以用的工具
  {
    matches: ["https://gsskm.gss.com.tw/*"],
    tools: [kmExtractFieldsTool],
  },
  {
    matches: ["https://gsskm.gss.com.tw/*"],
    tools: [kmSetFieldsTool],
  },
];

export function getToolsByUrl(url: string): any[] {
  const matchedTools = new Set<any>();
  for (const rule of toolRules) {
    const matcher = matchPattern(rule.matches);
    if (matcher.valid && matcher.match(url)) {
      console.log("match", rule.matches);
      rule.tools.forEach((tool) => matchedTools.add(tool));
    }
  }
  return Array.from(matchedTools);
}

因為 KM 系統的網址是 https://gsskm.gss.com.tw/*，所以這裡我們設定 matches 的值為 https://gsskm.gss.com.tw/*。

建立工具對應的 Handler

新增 Handler

在utils/handlers目錄中新增kmHandlers.ts，在裡面實作要針對網頁的讀取檔位資訊及設定欄位值的 Handler，如下，

import {
  messageRequest,
  messageResponse,
  MESSAGE_TOOL_TYPES,
} from "../types/message";

export const kmExtractFieldsHandler = (
  message: messageRequest
): messageResponse => {
  const fields = collectFormFields();
  const jsonString = JSON.stringify(fields);
  return {
    result: jsonString,
  };
};

export interface FormFieldInfo {
  title: string;
  tag: string;
  type: string;
  name: string;
  id: string;
  value: string;
}

/**
 * 擷取網頁 tr 結構下所有 th(.attrDisplayName)+td(input/select/textarea) 欄位資訊
 */
export function collectFormFields(): FormFieldInfo[] {
  const fieldList: FormFieldInfo[] = [];
  document.querySelectorAll("tr").forEach((tr) => {
    const titleElem = tr.querySelector(".attrDisplayName");
    if (!titleElem) return;
    const title = titleElem.textContent?.trim() || "";

    // 只擷取 td 裡不是 hidden 的 input、select、textarea
    const inputs = tr.querySelectorAll(
      "td input:not([type=hidden]), td select, td textarea"
    );
    inputs.forEach((input) => {
      fieldList.push({
        title,
        tag: input.tagName.toLowerCase(),
        type: (input as HTMLInputElement).type || "", // select/textarea 沒 type 屬性
        name: input.getAttribute("name") || "",
        id: input.id || "",
        value: (input as HTMLInputElement | HTMLTextAreaElement).value || "",
      });
    });
  });
  console.log(fieldList);
  return fieldList;
}

export const kmSetFieldsHandler = (
  message: messageRequest
): messageResponse => {
  let result = "表單填寫完成, 請檢查網頁內容。";
  try {
    let payload = message.payload;
    if (typeof payload === "string") {
      try {
        payload = JSON.parse(payload);
      } catch (e) {
        return { result: "fields 內容不是正確的 JSON 格式。" };
      }
    }

    if (!payload || typeof payload !== "object") {
      return { result: "fields 格式錯誤。" };
    }

    const fields = payload as Record<string, string>;
    console.log("Setting fields:", fields);
    Object.entries(fields).forEach(([id, val]) => {
      const elem = document.getElementById(id);
      if (!elem) return;
      if (elem instanceof HTMLInputElement) {
        if (elem.type === "checkbox" || elem.type === "radio") {
          elem.checked = Boolean(val);
        } else {
          elem.value = val ?? "";
        }
      } else if (elem instanceof HTMLSelectElement) {
        elem.value = val ?? "";
      } else if (elem instanceof HTMLTextAreaElement) {
        elem.value = val ?? "";
        elem.dispatchEvent(new Event("input", { bubbles: true }));
        try {
          window.postMessage(
            {
              type: MESSAGE_TOOL_TYPES.TINYMCE_SET_VALUE.name,
              id: id,
              value: val ?? "",
            },
            "*"
          );
        } catch (e) {
          console.error("Error setting textarea value:", e);
        }
      }
    });
  } catch (e) {
    result = "表單填寫失敗: " + (e as Error).message;
  }

  return {
    result,
  };
};

針對頁面 DOM 的操作，您可以依實際需求調整，這裡只是提供一個基本的範例。
因為 KM 系統有使用 TinyMCE 編輯器，所以還需要額外處理 textarea 的值設定，這裡使用 window.postMessage 來觸發設定 TinyMCE TinyMCE 編輯器方法。

設定訊息對應的 Handler

在utils/handlers/index.ts中，新增對應的 Handler，

import {
  messageRequest,
  messageResponse,
  MESSAGE_TOOL_TYPES,
} from "../types/message";
import { pageContentHandler } from "./pageContentHandler";
import { bizformExtractFieldsHandler } from "./bizformExtractFieldsHandler";
import { kmExtractFieldsHandler, kmSetFieldsHandler } from "./kmHandlers";

export const handlers: Record<
  string,
  (message: messageRequest) => messageResponse
> = {
  [MESSAGE_TOOL_TYPES.PAGE_CONTENT.name]: pageContentHandler,
  [MESSAGE_TOOL_TYPES.BIZ_EXTRACT_FIELDS.name]: bizformExtractFieldsHandler,
  //新增這 2 個 Handlers
  [MESSAGE_TOOL_TYPES.KM_EXTRACT_FIELDS.name]: kmExtractFieldsHandler,
  [MESSAGE_TOOL_TYPES.KM_SET_FIELDS.name]: kmSetFieldsHandler,
};

新增 TinyMCE 的設定

新增設定 TinyMCE 編輯器的 Function

在entrypoints目錄中新增tinymcetools.ts，
要設定 TinyMCE 編輯器的值，要使用到window.tinyMCE，預設的 Content-Script 是與網頁是隔離開來的，無法存取到 window。
所以要將這個檔案透過injectScript的方式加到網頁之中，而 Content-Script 的 Handler 則透過 window.postMessage 來觸發設定 TinyMCE 編輯器的值，如下window.addEventListener的部份。

import { MESSAGE_TOOL_TYPES } from "../utils/types/message";
export default defineUnlistedScript(() => {
  const win = window as any;

  function setTinyMCEValue(id: string, value: string) {
    if (!win.tinyMCE) {
      console.warn("tinyMCE not found on window.");
      return;
    }
    const editor = win.tinyMCE.get(id);
    if (editor) {
      editor.setContent(value);
      editor.save();
    } else {
      console.warn(`TinyMCE editor with id ${id} not found.`);
    }
  }

  window.addEventListener("message", (event) => {
    if (
      event.data &&
      event.data.type === MESSAGE_TOOL_TYPES.TINYMCE_SET_VALUE.name &&
      typeof event.data.id === "string" &&
      typeof event.data.value === "string"
    ) {
      console.log("Setting TinyMCE value:", event.data.id, event.data.value);
      setTinyMCEValue(event.data.id, event.data.value);
    }
  });
});

設定 injectScript 的檔案

injectScript 會將 JS 直接插入網頁作用域，突破 Content-Script 和網頁 window 的隔離。
在entrypoints/content.ts中使用injectScript來將tinymcetools.js加入到網頁中，如下，

import { messageRequest, messageResponse } from "../utils/types/message";
import { handlers } from "@/utils/handlers";

export default defineContentScript({
  matches: ["<all_urls>"],
  async main() {
    await injectScript("/tinymcetools.js", {
      keepInDom: true,
    });
    chrome.runtime.onMessage.addListener(
      (
        message: messageRequest,
        sender,
        sendResponse: (response: messageResponse) => void
      ) => {
        const handler = handlers[message.type];
        if (handler) {
          sendResponse(handler(message));
        } else {
          console.error("Unknown message type:", message.type);
          sendResponse({ error: "Unknown message type" });
        }
        return true;
      }
    );
  },
});

設定 web_accessible_resources

這步驟是讓 Chrome Extension 可以將指定的 JS 檔案注入到目標網頁，才能讓 content script 跟網頁本體溝通。
在 wxt.config.ts中，設定 web_accessible_resources，讓 Content-Script 可以將 tinymcetools.js 加到網頁中

import { defineConfig } from "wxt";

// See https://wxt.dev/api/config.html
export default defineConfig({
  modules: ["@wxt-dev/module-react"],
  manifest: ({ browser, manifestVersion, mode, command }) => {
    return {
      name: "WXT + Agent",
      description: "WXT + Agent",
      version: "1.0.0",
      action: {},
      permissions: ["tabs", "storage"],
      host_permissions: ["<all_urls>"],
      web_accessible_resources: [
        {
          resources: ["/tinymcetools.js"],
          matches: ["<all_urls>"],
        },
      ],
    };
  },
});

經過上述的步驟，我們已經完成了對 KM 系統的填表功能，接下來執行npm run dev，把 Extension 安裝到 Chrome 中，
進入到 KM 系統，點選 Extension 的 Icon，再開啟到填表畫面，然後在 SidePanel 中輸入需要 LLM 幫我們做的事，在後面貼上 Teams 的開會記事內容，

請根據下方會議記錄內容，依網頁表單欄位逐步執行以下流程，請每一步明確說明理由：

1. **取得網頁所有表單欄位**（透過 tool calling 取得欄位 title, id…）。
2. **依據每個表單欄位，從會議記錄中找出最適合填入的內容，並說明推理過程**。
   - 若找不到合適內容，請註明原因並留空。
3. **產生 tool calling 指令，將判斷後的內容寫入對應的網頁表單欄位。**

會議記錄如下：
[...記事內容...]

然後按下送出，就可以看到 LLM 幫我們填寫好了表單。如下圖:

註: 如果您的 Chrome 升級到了 V.137 ，它不再支援 --load-extension 參數，所以要手動安裝 Extension(開啟開發人員模式，載入未封裝項目，選擇 chrome-mv3-dev 目錄)
註: 如果出現取不到網頁資訊表示 Content-Script 沒有順利載入到網頁中，請重新整理網頁，然後再試一次。

結論

從這次的實作可以看到，只要建立好對應的 Tools 和 Handlers，就能快速擴充 AI 助理的新能力，不論是自動填表還是擷取網頁資料都變得簡單高效。
這種「工具驅動 + LLM 協作」的模式，不僅大幅減少了重複性工作，更讓我們能把時間投入到真正有價值的決策和創造力發揮上。
未來，你也可以依照實際需求，彈性擴充更多自動化功能，讓瀏覽器成為最聰明的工作助手！

參考資源

用 Browser Extension 打造具網頁背景感知的 AI 助理，補足 LLM 的視野盲點
 為什麼 AI 工具需要瀏覽器擴充功能來補全 Web 背景？
如何用 WXT 和 LangChain 快速打造具備 SidePanel 的 AI Chrome 擴充功能
 wxtagent 程式碼
 優化 SidePanel 的 UI，將其轉變為對話機器人的界面，並探索更多與 LLM 結合的可能性

jsonContent: meta: false pages: false posts: title: true date: true path: true text: false raw: false content: false slug: false updated: false comments: false link: false permalink: false excerpt: false categories: false tags: true

前言

實作