关于chrome-extension:用Chrome插件改进开发体验

43次阅读

共计 3408 个字符，预计需要花费 9 分钟才能阅读完成。

因为公司的局部老我的项目（数量还挺多）前端是用 hybird 形式和 app 混合开发，前端的登录态是靠app 关上时在 url 拼接一个 token，开发环境调试时候用 charles 抓包，将页面 url 取出来(url 外面带有 token)，这样就能开发时在本地模仿用户登录状态
问题：因为开发环境账号服务不是很稳固，并且常常用的一些测试账号又有好多人在用，这样就导致一个问题：token总是频繁生效
以前 token 生效时，就再用 app 从新登录或换账号登录，而后持续用 charles 抓出新的 token，这个过程不仅浪费时间而且还挺烦人

想到开发一个 Chrome 插件，在插件里输出手机号和明码而后主动将获取到的token 拼进开发环境拜访的 url 里
成果如下：点开 Chrome 插件，输出手机号、明码，点击确定会将取得的 token 拼进以后页面 url 里，如果以后 url 里已存在 token（即过期 token）则将其替换掉

次要通过这篇文章学习的【干货】Chrome 插件 (扩大) 开发全攻略、官网
Chrome 插件能够实现十分弱小的性能如咱们罕用的 redux-devtool、vue-devtool、掘金插件
根底概念在这里就不赘述了，下面的那篇教程应该能解决大多数问题，如果解决不了那就看官网文档

我的 Chrome 插件 `mock_token` 的实现

我这里次要用到了 browserAction 的展示模式即上图所示
开发步骤：

必备一个 manifest.json 文件重点两个配置：content_script/browser_action

    "name": "Mock_Token",
    "version": "2.1",
    "description": "一个获取用户 token 的插件",
    "manifest_version": 2, // 此处必须是 2
    // 间接注入以后页面的 js
    "content_scripts": [
        {"matches": ["http://localhost/*"],
            // 间接注入页面
            "js": ["content.js"],
            "run_at": "document_start"
        }
    ],
    // 浏览器状态栏的展现
    "browser_action": {
        // 插件图标
        "default_icon": "32.png",
        // 插件题目
        "default_title": "获取 token-Chrome 插件",
        // 插件的展示页面即一个 HTML 文件
        "default_popup": "./popup.html"
    },
    // 插件所须要的权限
    "permissions": ["storage", "webRequest", "tabs", "http://*/*", "https://*/*"],
    // csp 安全策略设置，否则在 HTML 外链引入 jQuery 的时候会报 csp 平安谬误
    "content_security_policy": "script-src'self'https://cdn.bootcdn.net; object-src'self'"

popup.html即点击浏览器状态栏弹出的模态框

<!DOCTYPE html>
<html lang="en">
<!-- head 省略 -->
<head></head>
<!-- 款式省略 -->
<style></style>
<body>
    <input id="phone" type="text" placeholder="请输出手机号" maxlength="11">
    <input id="pwd" type="text" placeholder="请输出明码" maxlength="6">
    <button id="btn"> 确定 </button>
</body>
<!-- 引入外链 js 库必须要在 manifest.json 外面配置 CSP 安全策略 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<!-- 此文件不可写内联 script 标签，必须用引入形式 -->
<script src="./popup.js"></script>
</html>

popup.js 即模态框内容的交互逻辑

 const phone = document.querySelector("#phone");
 const pwd = document.querySelector("#pwd");
 const btn = document.querySelector("#btn");

 // 页面初始化的先从 Chrome 的 storage 外面读取上次填写的手机号明码
 chrome.storage.sync.get({phone: "", pwd:""}, function (items) {
     phone.value = items.phone;
     pwd.value = items.pwd;
 });

 btn.addEventListener("click", () => {getToken(phone.value, pwd.value);
     // 每次点击确定的时候将手机号明码写入存储
     chrome.storage.sync.set({phone: phone.value, pwd: pwd.value}, function () {console.log("保留胜利！");
     });
 });

 function getToken(phone_no, password) {
     let params = {
         phone_no: phone_no || "10012345632",
         password: password || "123456",
     };
     const url = "https://xxx.com/login?args=" + JSON.stringify(params);

     fetch(url).then((res) => res.json())
         .then((res) => {sendMsg(res.token)
         });
 }

 // 通过 postmessage 的模式将信息传给 content-script
 // 因为 popup.html 不能操作以后宿主页面而 content-script 要将信息传递进来
 // 另外一点值得提的是以后文件能够忽视跨域间接调接口而 content-script 受跨域限度
 function sendMsg(token) {chrome.tabs.query({ active: true, currentWindow: true}, 
     (tabs) => {const message = { token};
             chrome.tabs.sendMessage(tabs[0].id, message);
         }
     );
 }

content.js 即由 content-script 间接注入到宿主页面内

// onMessage 监听 popup.js 传递过去的信息
chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {console.log("接管了来自 popup.js 的音讯", req.token);
    replaceToken(req.token);
});

// 间接替换以后 url 中的 token
function replaceToken(token) {
    const url = window.location.href;
    if (!url.includes("token")) {window.location.href += url.includes("?")
        ? `&token=${res.token}`
        : `?token=${res.token}`;
    } else {window.location.href = url.replace(/(token=)[^&]+/, "$1" + res.token);
    }
    // 单页面利用因为间接扭转 token 页面不会刷新，所以须要手动 reload 一下
    setTimeout(() => window.location.reload();, 500);
}