前言

学习Chrome插件的起因

最近在学习Chrome插件开发，说到动机那可能就是，在目前开发的项目过程中，因为要在本地运行结果然后模拟登陆操作，那么就需要先登陆发布的网址登录进去，然后打开控制台获取对应字段的值，然后到本地的http://localhost:8080页面中先将原来的Cookie清除，然后就要配置一下项目中的cookie.js，把刚刚获取到的cookie复制进去，最后重新进行npm run serve一下，每次都这么操作就会显得很麻烦。那么就想着能不能自己写个插件进行快速操作呢？那么既然有了需求就要开始造轮子了。

学习插件的心得体会

之前没接触过，在第一次开发的过程中遇到很多坑，目前网上大多数教的是manifest V2版本的，但是CHrome官方已经禁止提交V2版本的插件同时要求进行版本迁移，这就导致开发的道路很艰辛，这就让我想起了之前学习小程序的时候，当时网上没那么多教程，都是看着官方文档一遍又一遍试错，才将代码跑通。现在学习Chrome插件开发也是一样的路程。用马克思主义发展的思想就是道路是曲折的，前途是光明的。那么就开始写插件吧，关于插件的如何编写，可以看看官方文档 (opens new window)，当然如果想发布插件，得先去注册成为插件开发者，然后交几美金，大概三四十块的样子，那么之后将插件写完后就可以发布了。对了写插件肯定要进行消息通信 (opens new window)，可以看这篇文章。

发布的时候记得上传的图片必须是640*400或者1280*800的尺寸，因为不常用PS，主要懒得装，那么自己写了一个工具快速更改图片大小，学以致用，又花了一天时间写好了，可能非常喜欢这个工作吧，虽然遇到了很多的坑会暴躁，但是很开心。

其实学习插件并完成后发布，会有满满的成就感，用着自己开发的插件还是很激动的。

插件编写过程中遇到的坑

把能想到的都写下来吧，方便以后规避一下：

• manifest V2和manifest V3版本中manifest.json的配置有所改变，可以看官方的配置更改：Migrating to Manifest V3 (opens new window)，不能看的可以看V3的配置更改
• chrome提供的API的弃用
• 关于popup、content_script、background中的document的不同指向，以及不同部分所能调用的API也有所不同
• V3中规定了不能在用内联script标签(部分)，同时也不能进行跨域请求，网上的做法是用的沙盒(sandbox)，但是没具体说明如何使用
• 图标的大小问题，要符合标准
• 最好不要在插件里用异步，因为会出现意想不到的BUG，虽然现在支持Promise了
• 一定要在manifest.json文件中的"permissions"进行权限填写，否则可能无法使用API