小技巧 | Get 到一個 Web 自動化方案，絕了！
1. 前言
無論是 Chrome，還是 Firefox 瀏覽器，它們的強大性在很大程度上都是依賴于海量的插件，讓我們能高效辦公
那我們是否可以編寫一個插件，讓瀏覽器自動化完成一些日常工作，解放雙手呢？
答案是肯定的
本篇文章以 Chrome 插件為例，結(jié)合一個實例，聊聊 Web 端自動化的另一種方案
2. Chrome 插件
Chrome 擴展插件運行于基于 Chromium 內(nèi)核的瀏覽器
包含：Chrome 瀏覽器、Microsoft Edge、360 瀏覽器等
一個 Chrome 擴展插件有 3 類文件組成，包含：
配置文件 manifest.json
js 腳本文件
圖片、css 等資源文件
配置文件「 manifest.json 」用于配置擴展的名稱、版本號、作者、圖標 icon、彈出界面、權(quán)限、腳本路徑等信息
js 腳本文件包含 popup.js、background 和 content_scripts
其中
popup.js 用于搭配 popup.html 使用，用于點擊插件圖標的時候展示頁面及頁面邏輯控制
background 用于定義一個后臺頁面，相當(dāng)于一個常駐頁面，生命周期和瀏覽器一致
content_scripts 用于注入 JS 腳本，它不會和頁面中的腳本產(chǎn)生沖突
3. 實戰(zhàn)一下
假設(shè)我們現(xiàn)在需要完成一個插件，在首次登錄或登錄失效時，自動完成登錄操作
3-1 創(chuàng)建項目
我們創(chuàng)建一個文件夾，項目結(jié)構(gòu)目錄如下
3-2 項目配置
我們在 manifest.json 配置文件中，首先設(shè)置插件的基本信息
# mainifest.json
{
"manifest_version": 2, //配置文件版本
"name": "auto_login", //插件名稱
"version": "0.0.1", //插件版本
//下面都是選填
"description": "自動登錄", //描述信息
"author": "xag", //作者
// 插件icon
"icons": {
"84": "./image/icon.png"
}
...
然后，設(shè)置瀏覽器插件的圖標及后臺頁面
需要注意的是，后臺頁面 background 可以設(shè)置一個 HTML 頁面，也可以設(shè)置 JS 腳本列表，且只能選擇其中一種
# mainifest.json
// 瀏覽器右上角的圖標和內(nèi)容
"browser_action": {
"default_icon": "./image/icon.png",
"default_title": "自動登錄",
"default_popup": "./html/popup.html" //點擊插件圖標，彈出來的界面
},
//后臺頁面，JS/HTML只能選擇一種
"background": {
"scripts": ["./js/background.js"],
"persistent": true
},
...
接著，使用關(guān)鍵字「 content_scripts 」配置匹配規(guī)則及注入 JS 腳本
# mainifest.json
//content-scripts腳本設(shè)置
"content_scripts": [
{
// "<all_urls>" 表示匹配所有地址
"matches": ["<all_urls>"],
// 執(zhí)行JS
"js": ["./js/content.js"],
"run_at": "document_end" //配置運行時間點
},
{
"matches": ["https://****/"],
"js": ["./js/content_vx.js"],
"run_at": "document_end"
}
],
...
這里設(shè)置所有的頁面都會執(zhí)行 content.js 腳本，當(dāng)匹配到第二個頁面時，執(zhí)行 content_vx.js 腳本
需要指出的是，run_at 設(shè)置為 document_end，代表當(dāng)頁面加載完成后，才會執(zhí)行目標腳本
最后，根據(jù)業(yè)務(wù)需要，使用關(guān)鍵字「 permissions 」定義權(quán)限
PS：本例不涉及權(quán)限，可以省略設(shè)置
# manifest.json
...
//權(quán)限配置
"permissions": [
"contextMenus", // 右鍵菜單
"storage", // 本地存儲
"webRequest", // 網(wǎng)絡(luò)請求
"webRequestBlocking", // 阻塞式的網(wǎng)絡(luò)請求
"<all_urls>", // 匹配的URL
"tabs", // 標簽
"notifications" // 通知
]
}
3-3 編寫注入腳本
在 content_vx.js 文件中，根據(jù)需求操作 DOM 元素，完成自動化的操作
比如，這里獲取用戶名、密碼輸入框，模擬輸入，然后模擬點擊登錄按鈕，完成登錄的操作
需要注意的是，如果 run_at 設(shè)置為 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 插件管理界面
開啟「 開發(fā)者模式 」，然后點擊左側(cè)的「 加載已解壓的擴展程序 」加載上面創(chuàng)建的項目文件夾
開啟擴展插件，每次打開目標網(wǎng)站或退出登錄時，會發(fā)現(xiàn)網(wǎng)頁會自動完成登錄操作
4. 最后
本例僅利用 content_scripts 注入一段腳本，通過操作 DOM 元素，將一個繁瑣的登錄操作做成自動化
實際上，復(fù)雜的 Chrome 插件會涉及到 background 配置、浮框布局 JS 腳本、inject-scripts 引入腳本及他們之間的數(shù)據(jù)傳輸，這部分內(nèi)容大家可以自行擴展
我已經(jīng)將文中所有源碼上傳到后臺，關(guān)注公眾號簡說Python后回復(fù)關(guān)鍵字「 crx 」獲取完整源碼
如果你覺得文章還不錯，請大家 點贊、分享、留言 下，因為這將是我持續(xù)輸出更多優(yōu)質(zhì)文章的最強動力！
--END--
掃碼即可加我微信
老表朋友圈經(jīng)常有贈書/紅包福利活動
新玩法，以后每篇技術(shù)文章，點贊超過100+，我將在個人視頻號直播帶大家一起進行項目實戰(zhàn)復(fù)現(xiàn)，快嘎嘎點贊吧?。?！
直播將在我的視頻號：老表Max 中開展，掃上方二維碼添加我微信即可查看我的視頻號。
大家的 點贊、留言、轉(zhuǎn)發(fā)是博主的最大支持。
學(xué)習(xí)更多： 整理了我開始分享學(xué)習(xí)筆記到現(xiàn)在超過250篇優(yōu)質(zhì)文章，涵蓋數(shù)據(jù)分析、爬蟲、機器學(xué)習(xí)等方面，別再說不知道該從哪開始，實戰(zhàn)哪里找了 “點贊”就是對博主最大的支持
