写了一个浏览器插件，本地调试再也不需要改hosts或者复制token啦！

插件简介 🔥（用过的都说好）

• 他叫tokencv，简而言之，tokencv实现的功能就是把一个页面的token，复制到另一个页面里。
• Github地址
• 谷歌商店地址

需求背景 ⛏️

1. 本地开发的token需要复制生产正式服的token，这个token是保存在localStorage里的

2. 那么我每天来到公司的第一件事，就是刷新正式服页面，提示token过期跳到登录页，认证登陆。

3. 登陆成功后，F12打开开发者工具复制localStorage里的token

4. 打开本地开发的页面，F12打开开发者工具，将token粘贴到localStorage里

   • 每天重复一遍，虽然不会花很多时间，但作为一个程序员，拒绝重复简单的劳动，代码的意义就是将一些手动工作自动化完成，我要用我吃饭的代码让我工作轻松一些（实际并不轻松，因为开发这个插件也用了好多时间QAQ）
   • 另外值得一提的是支持多项目配置，多项目党也可以轻松应对

怎么实现 ✏️

1. 插件开发入门

   • 谷歌插件入门级别建议看这个如何从零开始开发一个 Chrome 插件？，看完你就可以写一些简单的插件了。

   • 下面所讲内容涉及一些插件开发的简单知识，上面的文章有详细描述，这里假设各位看官们已经熟读插件开发入门了，直接开整😂

2. 我们需要一个配置页面去配置我们要将哪个页面的token复制到哪个页面的localStorage里面去，如下面的表单配置，他配置了我们要将百度localStorage里的token复制到aaa.com这个网站下对应的位置里

3. 关于这个配置页是怎么写的我就不多赘述了，对于各位大佬来说都是基操了，我就说一下插件相关的，如何通过点击上图的插件icon打开这个配置页。

   • 插件项目的工作目录下有一个很重要的文件manifest.json，它可以说是插件的入口文件，浏览器通过读取这个配置文件，去加载对应的js
   • 而插件的popup页，我们只需要将配置页的路径写到browser_action的default_popup里，就可以实现点击插件icon打开配置页，让用户去进行插件的一些配置

4. 通过这个配置页，插件已经知道，要复制哪个页面的token，然后粘贴到哪个页面去，那么我怎么去执行复制、粘贴这个操作呢

   • 那当然是用js去帮插件执行复制粘贴的操作，这里可以隐约看出一些插件的本质

   • 重点来了，插件的本质是什么？插件的本质就是给浏览器上打开的所有页面注入插件的js脚本（大多数插件都是如此），去完成插件想要完成的功能。也就是每一个页面都引入了一个你装的插件的js。

   • 那么怎么用js去拿localStorage or cookie的数据，怎么往localStorage or cookie里存数据大家比我还熟就不赘述了，这里讲一下怎么往每一个页面里插入你的脚本

   • 同样是manifest.json文件，把复制token和粘贴token的js脚本路径写进content_scripts里，就可以在每个页面里插入你的js脚本去帮你复制粘贴token。

5. 此时我们已经通过注入的脚本，可以复制token，然后粘贴token。
   • 但是你在一个页面下拿到的token,怎么粘贴到目标页下呢。此时就需要通信了，在当前页通过配置拿到token后，通知目标页去粘贴token。

6. 此时又有了一个新的概念，插件主程序，也可以叫插件后台。

   • 他可以和弹出配置页通讯，拿到插件配置。也可以和注入脚本content_script通讯，比如在A页面拿到了token,A页面和插件主程序通讯，告诉他拿到的token。然后插件主程序就广播一个消息,每一个页面都会收到这个消息，如果收到消息的页面是配置里接收token的目标页则执行粘贴操作

   • 插件通讯的方式类似于事件监听，详细内容在上面的博文里有详细介绍
     

   • 如何配置插件后台脚本？同样是manifest，将后台脚本的路径写入到background配置里。（不截图了上面有）

7. content_script，注入到每个页面的脚本

   • 最后简单看一下注入到每个页面里，帮我们执行复制粘贴操作的js脚本长啥样，有兴趣可以简单看一下注释。

如何使用 🏆

1. 可以在谷歌扩展程序商店里面找到他

2. 也可以直接下载github上的源码，然后通过加载已解压的扩展程序安装他

3. 打开配置弹出框 - 完成配置就可以开整啦（首次安装，需要刷新对应页，以注入插件脚本）

最后 🚁

写完这个插件之后，试用了几天感觉非常爽，记录一下，但是跟我有同样需求背景的人可能不太多，微众插件。