插件简介 🔥(用过的都说好)
需求背景 ⛏️
-
本地开发的token需要复制生产正式服的token,这个token是保存在localStorage里的
-
那么我每天来到公司的第一件事,就是刷新正式服页面,提示token过期跳到登录页,认证登陆。
-
登陆成功后,F12打开开发者工具复制localStorage里的token
-
打开本地开发的页面,F12打开开发者工具,将token粘贴到localStorage里
- 每天重复一遍,虽然不会花很多时间,但作为一个程序员,拒绝重复简单的劳动,代码的意义就是将一些手动工作
自动化
完成,我要用我吃饭的代码让我工作轻松一些(实际并不轻松,因为开发这个插件也用了好多时间QAQ) - 另外值得一提的是
支持多项目配置
,多项目党也可以轻松应对
- 每天重复一遍,虽然不会花很多时间,但作为一个程序员,拒绝重复简单的劳动,代码的意义就是将一些手动工作
怎么实现 ✏️
-
插件开发入门
-
谷歌插件入门级别建议看这个如何从零开始开发一个 Chrome 插件?,看完你就可以写一些简单的插件了。
-
下面所讲内容涉及一些插件开发的
简单知识
,上面的文章有详细描述,这里假设各位看官们已经熟读插件开发入门了,直接开整😂
-
-
我们需要一个配置页面去配置我们要将哪个页面的token复制到哪个页面的localStorage里面去,如下面的表单配置,他配置了我们要将百度localStorage里的token复制到aaa.com这个网站下对应的位置里
-
关于这个配置页是怎么写的我就不多赘述了,对于各位大佬来说都是基操了,我就说一下插件相关的,如何通过点击上图的插件icon打开这个配置页。
- 插件项目的工作目录下有一个很重要的文件
manifest.json
,它可以说是插件的入口文件,浏览器通过读取这个配置文件,去加载对应的js - 而插件的popup页,我们只需要将配置页的路径写到
browser_action的default_popup
里,就可以实现点击插件icon打开配置页,让用户去进行插件的一些配置
- 插件项目的工作目录下有一个很重要的文件
-
通过这个配置页,插件已经知道,要复制哪个页面的token,然后粘贴到哪个页面去,那么我怎么去执行复制、粘贴这个操作呢
-
那当然是用js去帮插件执行复制粘贴的操作,这里可以隐约看出一些插件的本质
-
重点来了,插件的本质是什么?
插件的本质就是给浏览器上打开的所有页面注入插件的js脚本
(大多数插件都是如此),去完成插件想要完成的功能。也就是每一个页面都引入了一个你装的插件的js。 -
那么怎么用js去拿localStorage or cookie的数据,怎么往localStorage or cookie里存数据大家比我还熟就不赘述了,这里讲一下怎么往每一个页面里
插入
你的脚本 -
同样是manifest.json文件,把复制token和粘贴token的js脚本路径写进
content_scripts
里,就可以在每个页面里插入你的js脚本去帮你复制粘贴token。
-
- 此时我们已经通过注入的脚本,可以复制token,然后粘贴token。
- 但是你在一个页面下拿到的token,怎么粘贴到目标页下呢。此时就需要
通信
了,在当前页通过配置拿到token后,通知目标页去粘贴token。
- 但是你在一个页面下拿到的token,怎么粘贴到目标页下呢。此时就需要
-
此时又有了一个新的概念,插件主程序,也可以叫插件后台。
-
他可以和弹出配置页通讯,拿到插件配置。也可以和注入脚本content_script通讯,比如在A页面拿到了token,A页面和插件主程序通讯,告诉他拿到的token。然后插件主程序就广播一个消息,每一个页面都会收到这个消息,如果收到消息的页面是配置里接收token的目标页则执行粘贴操作
-
插件通讯的方式类似于事件监听,详细内容在上面的博文里有详细介绍
-
如何配置插件后台脚本?同样是manifest,将后台脚本的路径写入到background配置里。(不截图了上面有)
-
-
content_script,注入到每个页面的脚本
- 最后简单看一下注入到每个页面里,帮我们执行复制粘贴操作的js脚本长啥样,有兴趣可以简单看一下注释。
如何使用 🏆
- 可以在谷歌扩展程序商店里面找到他
2. 也可以直接下载github上的源码,然后通过加载已解压的扩展程序安装
他
- 打开配置弹出框 - 完成配置就可以开整啦(首次安装,需要刷新对应页,以注入插件脚本)
最后 🚁
写完这个插件之后,试用了几天感觉非常爽,记录一下,但是跟我有同样需求背景的人可能不太多,微众插件。