用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等古代的前端开发框架
发表回复