有些情況會不斷的填同一張表單 表單上又要填好幾格重複的資料，每次重打很麻煩，先打好再複製再貼上也很麻煩 有沒有更快的方法？ 那就試試看 Google Chrome 的 擴充功能 吧 ！ 完成後的 Git…….
有些情況會不斷的填同一張表單
表單上又要填好幾格重複的資料，每次重打很麻煩，先打好再複製再貼上也很麻煩
有沒有更快的方法？
那就試試看 Google Chrome 的
擴充功能 吧 ！這邊主要是透過
Google Extensions中的 Content Scripts 功能來將你自己寫的 JavaScript 注入到所指定的頁面中，好讓你的程式碼能夠直接去觸碰該頁面的 DOM(Document Object Model)。因為是蠻單純去修改目標頁面的
<input/> 所以要寫的東西也不多，總共只有兩個檔案 manifest.json、content-script.js。前者是用來說明擴充功能的內容及結構，後者則是我們要對目標修改的程式碼。一、建立 manifest.json
相當於這個擴充功能的自我介紹，今天要用到的功能很簡單因此要填的欄位不多。
由於是使用靜態注入的方式，因此要填寫
content_scripts 這個區塊的內容，讓擴充功能能夠去比對要執行的網址與要執行的檔案。欄位 | 說明 |
manifest_version | Chrome Extensions 要使用的版本，目前是 V3 所以這欄不用管他 |
name | 這個擴充功能的名字，自己隨便取就可以了 |
version | 版本號，也是自已取 |
description | 這個擴充功能的描述 |
content_scripts | 要注入的 matches(目標匹配網址)、js(程式碼檔案) |
二、建立 content-script.js
這個檔案之後會注入到目標的網頁內，因此能夠存取到該網頁的 HTML 元素等。
我們就是要用這個特性去找出要填的輸入欄位，並將我們預設好的字填進去！
大概是像這樣
三、從目標網站找到要填的欄位
就拿一個會頻繁輸入資料的
來做範例
這邊有好幾個欄位需要填，像是姓名、身分證、電話、地址、信箱等等。
我們使用
F12 開啟開發者工具，並選擇左上角的「箭頭」就可以對網頁的欄位做點選。點選後會出現這個輸入框的 HTML 語法，我們只要從裡面找到 id 這個欄位就可以了。
像這邊我們找到填入姓名的欄位的 ID 是
Name，後面底下幾個欄位也找到後我們就可以開始寫要注入的程式碼。由於懶得一行一行複製來改下面用迴圈來跑比較方便。所以上面先宣告一個
columns 的陣列將找到的 ID 放進去。底下在宣告一個 data 的物件來放我們要填入的值，切記欄位名稱要跟你找到的 ID 一樣。四、上傳寫好的擴充功能
在瀏覽器的網址列輸入
chrome://extensions/ 就能開啟擴充功能的頁面之後在最右邊找到「開發人員模式」並將其打開，此時就會多出一行操作列。
接著點選左側的「載入未封裝項目」，並上傳上面建立的這兩個檔案就完成啦
注意： 必須以目錄（也就是資料夾）的形式上傳
> 本文由简悦 SimpRead 转码