Chrome Extension實戰：頁面注入

前言：通過注入GitHub的登錄頁，來實現自動登錄。

一、背景

前段時間學習頁面JS替換時寫的一些測試代碼，比較基礎的知識，適合頁面注入入門。

二、原理

content_scripts： 可以將指定inject.js注入到特定（matches）的頁面，inject.js運行在宿主頁面，可以訪問宿主頁面的DOM樹，所以我們就能夠通過inject.js來操作宿主頁面。

更詳細的說明可以參考google文檔content_scripts

三、詳細步驟

1. 配置manifest.json

    "content_scripts": [
        {
            "matches": [ "*://github.com/login*" ],
            "js": [ "js/inject.js" ],
            "run_at": "document_end",
            "all_frames": true
        }
    ],

注意

• matches字段：表示只對*://github.com/login登錄頁面生效，只有打開GitHub的登錄頁面時纔會把inject.js注入到頁面中。
• run_at字段：document_end 頁面加載完後注入 | document_start頁面加載開始時注入 | document_idle遊覽器會在start|end之間選擇一個不繁忙的時間注入。

• all_frames：是否注入所有iframes。（有些document中還包含iframes，爲true也會向其注入）。

  2. inject.js

function inputPassword() {
    var passwd = document.getElementById("password");
    if ( passwd != null ) {
        passwd.value = "password";
    }   
    var login = document.forms[0];
    if ( login != null ) {
        login.submit();
    }
}
function injectPage() { 
    var username = document.getElementById("login_field");
    if ( username != null ) {
        username.value = "[email protected]";
    }   
    if ( username != null ) {
        window.setTimeout( inputPassword, 2000 );
    }
}
injectPage();

注意：

• getElementById獲取的元素，最好判斷是否爲空；
• 小技巧：用戶名和密碼之間最後加一個windows.setTimeout來延遲執行；

四、結尾

這些測試用例同樣適用淘寶、京東等的登錄。（不能直接用）

---

實例源碼下載鏈接傳送門：下載源碼

---

WEB頁面JS替換，可以參考這篇文章：替換頁面JS

---

比較簡單，大神繞過，別吐槽，歡迎交流！