Chrome Extension实战：页面注入

最新推荐文章于 2023-09-01 21:50:07 发布

gambolday

最新推荐文章于 2023-09-01 21:50:07 发布

阅读量6.5k

点赞数 3

分类专栏：技术小白文章标签： chrome github 扩展自动登录淘宝登录

本文链接：https://blog.csdn.net/wonderdaydream/article/details/75305727

版权

技术小白专栏收录该内容

14 篇文章 0 订阅

订阅专栏

前言：通过注入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 = "username@mail.com";
    }   
    if ( username != null ) {
        window.setTimeout( inputPassword, 2000 );
    }
}
injectPage();