Chrome扩展开发：pop传递参数给当前页面，实现多账号快捷登录

彩色代码

已于 2023-05-08 19:08:02 修改

阅读量731

点赞数

文章标签： chrome javascript 前端

于 2023-05-08 19:01:24 首次发布

本文链接：https://blog.csdn.net/weixin_43955067/article/details/130565053

版权

该文章介绍了如何开发一个Chrome扩展，通过popup页面与content-script交互，实现在网页上的多账号快捷登录功能。用户在popup中选择或输入账号，点击登录后，信息被传递到content-script，然后存入localStorage，实现账号的快速切换和登录。

摘要由CSDN通过智能技术生成

功能描述

通过浏览器插件，实现账号的快速登录，切换账号

功能展示

在这里插入图片描述

基本概念

popup

在这里插入图片描述

content-script

注入到网页中的 javascript 脚本就是 content-script

manifest.json

扩展配置清单，必须

拓展程序目录结构

在这里插入图片描述

代码

mainifest.json

{
  "name": "用户登录",
  "manifest_version":2,
  "version":"1.0",
  "description":"实现多账号切换，快速登录",
  "browser_action":{
    "default_popup":"popup.html"
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": [ "js/jquery.min.js", "js/content-script.js" ]
    }
  ]
}

popup.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf8">
  <script src="js/jquery.min.js"></script>
  <script src="js/popup.js"></script>
</head>
<body style="width: 300px">
<h1>账号登录：</h1>

<p id='flag'></p>
<input id='pop_uid' value="" >

<select id='selectUser'>
  <option value="">选择用户</option>
  <option value="11923999">用户1</option>
  <option value="123">用户2</option>
</select>
<button id='login'>登录</button>
</body>
</html>

popup.js

$(function () {
    $("#login").click(function () {

        var pop_uid = $("#pop_uid").val()

        // chrome.tabs.query可以通过回调函数获得当前活跃tab
        chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
            // 取出当前标签页的 tag_id, 发送一个消息出去, 同时带上回调函数
            chrome.tabs.sendMessage(tabs[0].id, { action: "login",token:"这里是传入的token" }, function (response) {
                // 回调函数，把传回的信息渲染在popup.html上
                $("#flag").text(response)
            });
        });
    });
    $("#selectUser").change(function () {

        var selectText = $(this).children('option:selected').val();
        $("#pop_uid").val(selectText)
    });

});

content-script.js


var storage=window.localStorage;

console.log('保存成功');

chrome.extension.onMessage.addListener(
    function (request, sender, sendResponse) {
        console.log(request)
        if (request.action === "login") {
            var token = request.token
            //写入token
            storage["token"]=token;

            console.log(token)
            if (token.length > 0) {
                // 如果获取的值不为空则返回数据到 popup.js
                sendResponse(token);
            } else {
                sendResponse("no data found!");
            }
        }
    }
);