从 0 到 1 实现一个 chrome 插件
大家好， 我是晨光，5 年前端开发程序媛，没想到第一篇小 y 给加了精华：https://t.zsxq.com/0frC1H9z9
今天分享一篇我的技术探索，实现一个简单的 chrome 插件。
之前做需求的时候，每次都需要手动拿页面上的几个参数去拼一个新的 url，操作耗时繁琐，且没有技术含量，所以就尝试写了 chrome 插件。本次内容分为以下三个部分：
- 功能介绍
- 从 0 到 1
- 待拓展功能
一、功能介绍
插件一般都是为了方便我们的日常工作。
本次分享的插件功能简单，主要是减少了复制粘贴的重复工作，且人为的复制粘贴有时也会存在一些误差，而对于代码来说，就是一个简单的规则。
只要规则没有问题，那么输出的内容大概率都是正确的。
二、从 0 到 1
1、参考资料
第一次写 chrome 插件，不知道怎么开始，就去百度搜索了一圈，根据 chrome 插件开发文档，一步一步模仿。
参考链接：https://support.google.com/chrome/a/answer/2714278?hl=zh-Hans
2、准备工作
大致浏览完上面的文档，开始开发
1）创建文件夹以及相关文件，最主要的文件是 mainfest.json 文件，里面包含插件名称等一些插件配置相关的内容。
2）准备插件 icon，注意尺寸要求，可以去阿里矢量图库里面下载，或者自己切图都可，晨光这里是从阿里矢量图库里面下载了一个大拇指。
3）实现功能代码 功能代码在 scripts/content.js 里。这里的实现没有过多需要注意的地方，就正常写 js 即可
3、开发过程
大致过程，需要先获取页面元素，如果能够找到，那么开始拼接参数，参数拼接好之后，创建 a 标签，并插入到页面的某个位置中。然后就可以点击跳转到我们想去的某个链接。具体实现如下图
我们把插件导入到浏览器中，只要 url 命中 manifest.json 文件中的 matches 的url，插件就会工作
但调试过程中，多次刷新页面，代码都不生效，而 copy 代码到控制台可正常执行，无 js error，并且页面也可以出现我们想要的效果。
经分析后得出，页面加载还未完成就执行了插件代码，走到 39 行，因无法找到 id=app 的 DOM 元素，因此进不到 if 语句中，并且代码不会重试，所以，就给这段代码套了一个 setTimeout，插件代码加载两秒后再执行，发现插件的功能大部分时候都可运行成功。
4、投入使用
插件加载完成
浏览器右上角会有一个大拇指的插件图标
打开对应目标页面，插件执行完，页面中会插入下图的两个链接
三、待拓展功能
1、插件未发布，目前使用都是本地压缩包分享，对于功能完善且不涉密的内容，可以尝试发布插件
2、插件功能单一，可尝试拓展新功能，能够解决日常浏览痛点的，但暂时没有什么好想法，有想法的也可以私我，共创～
总结
本次开发过程耗时半天，功能满意程度总体评分 6 分，勉强及格啦。初步试水，后面工作之余也会捣鼓捣鼓别的好玩有趣有用的东西。
感谢阅读，如果本文对你有帮助的话，点个赞再走吧～
