小技巧 | Get 到一個 Web 自動化方案，絕了！

AirPython發表於2021-08-04
Web

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 」獲取完整原始碼

如果你覺得文章還不錯，請大家 點贊、分享、留言 下，因為這將是我持續輸出更多優質文章的最強動力！

相關文章