chrome插件自动登录

kyujyu

已于 2023-11-01 11:05:00 修改

阅读量5.7k

点赞数 25

文章标签： chrome javascript

于 2021-07-22 23:49:37 首次发布

本文链接：https://blog.csdn.net/kyujyu/article/details/119010614

版权

笔记-开发-仅我可见专栏收录该内容

2 篇文章 0 订阅

订阅专栏

chrome插件开发笔记

实现功能

本文代码为开发调试demo

实现功能：点击插件按钮后，自动填充账号密码并点击登录按钮。
方式一：popup->background->content
方式二：popup->content
1. 不同按钮对应不同账号
2. 点击按钮，自动填充账号密码并点击登录按钮
3. background 和content互发消息
测试用的登录页面：B站登录页面
测试用的浏览器：
1. Chrome版本 76.0.3809.132 (正式版本) (64 位)
2. Edge 版本 92.0.902.84 (官方内部版本) (64 位)

在这里插入图片描述

工程结构

需要以下文件：

1. manifest.json

插件配置¹

2. popup.html

不同按钮对应不同账号²

<head>
    <!--中文乱码问题-->
    <meta charset="UTF-8">
    <meta name="kyujyu" content="Hege Refsnes">
</head>
<style>
    body {
        overflow: hidden;
        margin: 0px;
        padding: 0px;
        background: #00a7de;
    }

    button:first-child {
        margin-top: 0px;
    }

    button {
        cursor: pointer;
        text-align: center;
        padding: 3px 0px 3px 0px;
        font-family: sans-serif;
        font-size: 0.8em;
        width: 100px;
        color: #C8CDE1;
        background: #00a7de;
        border-radius: 4px;
        border: none;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    button:hover {
        color: white;
        background: #0381aa;
    }
</style>
<!--id:账号 value:密码-->
<button id="user0" value="test">账号0</button>
<button id="user1" value="password">user1</button>
<button id="user2" value="pwd">user2</button>
<script src="./popup.js"></script>

3. popup.js

点击按钮，将账号密码传给background处理（方式一） ³
或者直接发消息给content（方式二）

divsList = document.getElementsByTagName("button");
for (let i =0; i< divsList.length; i++){
	const username = divsList[i].id;
	const password = divsList[i].getAttribute("value");
	divsList[i].onclick = (function (i){
		return function(){
			login(username, password);
			}
		}
	)(i);
	divsList[i].title = "账号:"+username+"密码:"+password;
}

function login(usr, pwd) {
	//方式一： 直接调background中的方法
    // var bg2 = chrome.extension.getBackgroundPage();
    // bg2.bglogin(usr,pwd);//bglogin(usr,pwd)是background中的方法

    //方式二：发消息给content  popup->content
    var msg = {'usr':usr,'pwd':pwd+"frompopup.js"};
    chrome.tabs.query({active: true}, function(tabs) {
        console.log("popup->content");
        console.log("tabs",tabs)
        console.log("tabs[0].id",tabs[0].id)
        chrome.tabs.sendMessage(tabs[0].id, msg, function(response) {
            console.log(response);
        });
    });
};

4. background.js

发送消息给content,监听content的消息⁴ ⁵ ⁶

function bglogin(usr, pwd) {
    var msg = {'usr':usr,'pwd':pwd};
    //发消息
    chrome.tabs.query({active: true}, function(tabs) {
        console.log("tabs",tabs)
        console.log("tabs[0].id",tabs[0].id)
        chrome.tabs.sendMessage(tabs[0].id, msg, function(response) {
            console.log(response);
        });
    });
}


//监听消息
chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
    const res = req.info;
    console.log("received:"+res);
    sendResponse("backresponse3424324");
    return true;
})

5. content.js

发消息给background
监听消息
填充input点击登录⁷


window.inputValue = function(dom, st){
    var evt = new InputEvent("input", {
        inputType: "insertText",
        data:st,
        dataTransfer:null,
        isComposing:false
    });
    dom.value = st;
    dom.dispatchEvent(evt);
}


function autologin(user, pwd){
    var username = document.getElementById("login-username");
    username.value = user;
    window.inputValue(username, username.value);

    var password = document.getElementById("login-passwd");
    password.value = pwd;
    window.inputValue(password, password.value);

    var button = document.getElementsByClassName("btn btn-login")[0];
    button.click();
}

//监听消息   content登录
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){
    // alert("usr:"+message.usr+"pwd:"+message.pwd);
    autologin(message.usr, message.pwd);
    sendResponse("true");
    return true;
});


//-------------------------------------------------------------------------------
// console.log("this is content.js！");
// //发消息  content->background
// chrome.runtime.sendMessage({
//     info: "content->background"
// }, res => {
//     // 答复
//     alert(res);
// });
//