用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

手摸手教你，从0到1开发一个Chrome浏览器插件

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

chrome插件实现监听ajax请求，然后修改请求参数

Chrome 浏览器插件获取网页 window 对象（方案三）

Chrome 浏览器插件获取网页 window 对象（方案一）

Chrome 浏览器插件获取网页 window 对象（方案二）

用Chrome插件改进开发体验

用Chrome插件改进开发体验

事件背景

解决方法

如何开发一个Chrome插件

我的Chrome插件mock_token的实现

关于调试

总结

大桔子

引用和评论

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

手摸手教你，从0到1开发一个Chrome浏览器插件

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

chrome插件实现监听ajax请求，然后修改请求参数

Chrome 浏览器插件获取网页 window 对象（方案三）

Chrome 浏览器插件获取网页 window 对象（方案一）

Chrome 浏览器插件获取网页 window 对象（方案二）

我的Chrome插件`mock_token`的实现