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

---

比较简单，大神绕过，别吐槽，欢迎交流！