1. 前言
大家好，我是安果！
無論是 Chrome，還是 Firefox 瀏覽器，它們的強大性在很大程度上都是依賴於海量的插件，讓我們能高效辦公
那我們是否可以編寫一個插件，讓瀏覽器自動化完成一些日常工作，解放雙手呢？
答案是肯定的
本篇文章以 Chrome 插件爲例，結合一個實例，聊聊 Web 端自動化的另一種方案
2. Chrome 插件
Chrome 擴展插件運行於基於 Chromium 內核的瀏覽器
包含：Chrome 瀏覽器、Microsoft Edge、360 瀏覽器等
一個 Chrome 擴展插件有 3 類文件組成，包含：
-
配置文件 manifest.json
-
js 腳本文件
-
圖片、css 等資源文件
配置文件「 manifest.json 」用於配置擴展的名稱、版本號、作者、圖標 icon、彈出界面、權限、腳本路徑等信息
js 腳本文件包含 popup.js、background 和 content_scripts
其中
-
popup.js 用於搭配 popup.html 使用，用於點擊插件圖標的時候展示頁面及頁面邏輯控制
-
background 用於定義一個後臺頁面，相當於一個常駐頁面，生命週期和瀏覽器一致
-
content_scripts 用於注入 JS 腳本，它不會和頁面中的腳本產生衝突
3. 實戰一下
假設我們現在需要完成一個插件，在首次登錄或登錄失效時，自動完成登錄操作
3-1 創建項目
我們創建一個文件夾，項目結構目錄如下
3-2 項目配置
我們在 manifest.json 配置文件中，首先設置插件的基本信息
# mainifest.json
{
"manifest_version": 2, //配置文件版本
"name": "auto_login", //插件名稱
"version": "0.0.1", //插件版本
//下面都是選填
"description": "自動登錄", //描述信息
"author": "xag", //作者
// 插件icon
"icons": {
"84": "./image/icon.png"
}
...
然後，設置瀏覽器插件的圖標及後臺頁面
需要注意的是，後臺頁面 background 可以設置一個 HTML 頁面，也可以設置 JS 腳本列表，且只能選擇其中一種
# mainifest.json
// 瀏覽器右上角的圖標和內容
"browser_action": {
"default_icon": "./image/icon.png",
"default_title": "自動登錄",
"default_popup": "./html/popup.html" //點擊插件圖標，彈出來的界面
},
//後臺頁面，JS/HTML只能選擇一種
"background": {
"scripts": ["./js/background.js"],
"persistent": true
},
...
接着，使用關鍵字「 content_scripts 」配置匹配規則及注入 JS 腳本
# mainifest.json
//content-scripts腳本設置
"content_scripts": [
{
// "<all_urls>" 表示匹配所有地址
"matches": ["<all_urls>"],
// 執行JS
"js": ["./js/content.js"],
"run_at": "document_end" //配置運行時間點
},
{
"matches": ["https://****/"],
"js": ["./js/content_vx.js"],
"run_at": "document_end"
}
],
...
這裏設置所有的頁面都會執行 content.js 腳本，當匹配到第二個頁面時，執行 content_vx.js 腳本
需要指出的是，run_at 設置爲 document_end，代表當頁面加載完成後，纔會執行目標腳本
最後，根據業務需要，使用關鍵字「 permissions 」定義權限
PS：本例不涉及權限，可以省略設置
# manifest.json
...
//權限配置
"permissions": [
"contextMenus", // 右鍵菜單
"storage", // 本地存儲
"webRequest", // 網絡請求
"webRequestBlocking", // 阻塞式的網絡請求
"<all_urls>", // 匹配的URL
"tabs", // 標籤
"notifications" // 通知
]
}
3-3 編寫注入腳本
在 content_vx.js 文件中，根據需求操作 DOM 元素，完成自動化的操作
比如，這裏獲取用戶名、密碼輸入框，模擬輸入，然後模擬點擊登錄按鈕，完成登錄的操作
需要注意的是，如果 run_at 設置爲 document_start，這裏需要做延遲加載
# content_vx.js
//輸入
function input(inputElement, content) {
let evt = document.createEvent('HTMLEvents');
evt.initEvent('input', true, true);
inputElement.value = content;
inputElement.dispatchEvent(evt)
}
//模擬輸入和提交表單
//用戶名
const username_element = document.getElementById("ContentHtml_txtUserName");
//密碼
const password_element = document.getElementById("txtPassword");
//按鈕
const btn_element = document.getElementById("ContentHtml_btnLogin");
//輸入後，點擊確認
input(username_element, "**");
input(password_element, "**");
//登錄
btn_element.click();
3-4 測試使用
在定義好插件 icon 圖標及 popup 頁面後，我們可以進入到 Chrome 插件管理界面
開啓「 開發者模式 」，然後點擊左側的「 加載已解壓的擴展程序 」加載上面創建的項目文件夾
開啓擴展插件，每次打開目標網站或退出登錄時，會發現網頁會自動完成登錄操作
4. 最後
本例僅利用 content_scripts 注入一段腳本，通過操作 DOM 元素，將一個繁瑣的登錄操作做成自動化
實際上，複雜的 Chrome 插件會涉及到 background 配置、浮框佈局 JS 腳本、inject-scripts 引入腳本及他們之間的數據傳輸，這部分內容大家可以自行擴展
我已經將文中所有源碼上傳到後臺，關注公衆號「 AirPython 」後回覆關鍵字「 crx 」獲取完整源碼
如果你覺得文章還不錯，請大家 點贊、分享、留言 下，因爲這將是我持續輸出更多優質文章的最強動力！