用Chrome插件改进开发体验

事件背景

由于公司的部分老项目（数量还挺多）前端是用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插件(扩展)开发全攻略、官网
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);
}

关于调试

content.js里面的内容可以直接在当前页面的控制台进行调试
popup.js里面的内容要单独打开一个控制台，操作如下图所示
总结
以上就是该插件开发的全部内容-非常简单😂😂[旺柴]
当然Chrome插件本身还是可以开发很多好玩有用的东西，比如如果要实现的功能非常复杂完全可以引入像React/Vue等现代的前端开发框架

用Chrome插件改进开发体验

用Chrome插件改进开发体验

事件背景

解决方法

如何开发一个Chrome插件

我的Chrome插件`mock_token`的实现

关于调试

总结

大桔子

引用和评论

Flutter Overlay 的使用 —— 自定义 Loading、Toast

如何将Chrome本地安装的扩展应用导出到本地

使用 CRXJS 构建 Chrome 插件在 Chrome 浏览器升级到 130xxx 版本之后，出现CSP错误

vue2 devtools导致页面卡顿，解决方案

用Chrome插件改进开发体验

用Chrome插件改进开发体验

事件背景

解决方法

如何开发一个Chrome插件

我的Chrome插件mock_token的实现

关于调试

总结

大桔子

引用和评论

Flutter Overlay 的使用 —— 自定义 Loading、Toast

如何将Chrome本地安装的扩展应用导出到本地

使用 CRXJS 构建 Chrome 插件在 Chrome 浏览器升级到 130xxx 版本之后，出现CSP错误

vue2 devtools导致页面卡顿，解决方案

我的Chrome插件`mock_token`的实现