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

前言

大家好，我是安果！

無論是 Chrome，還是 Firefox 瀏覽器，它們的強大性在很大程度上都是依賴於海量的插件，讓我們能高效辦公

那我們是否可以編寫一個插件，讓瀏覽器自動化完成一些日常工作，解放雙手呢？

答案是肯定的

本篇文章以 Chrome 插件爲例，結合一個實例，聊聊 Web 端自動化的另一種方案

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 插件管理界面

開啓「開發者模式」，然後點擊左側的「加載已解壓的擴展程序」加載上面創建的項目文件夾

開啓擴展插件，每次打開目標網站或退出登錄時，會發現網頁會自動完成登錄操作

最後

本例僅利用 content_scripts 注入一段腳本，通過操作 DOM 元素，將一個繁瑣的登錄操作做成自動化

實際上，複雜的 Chrome 插件會涉及到 background 配置、浮框佈局 JS 腳本、inject-scripts 引入腳本及他們之間的數據傳輸，這部分內容大家可以自行擴展

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/zcV6SqrolNRDYfwrH7tgCg

3. 實戰一下

猜你喜歡