谷歌浏览器插件开发踩坑指南-搞图

需求背景故事

        女朋友做电商运营的，经常需要去各大电商平台扒商品的主图和详情图，一张一张的存，有的页面几张还好，但有的却是好几十章，这种重复体力工作，身为码农的男朋友，怎么可能看得下去。

        于是就有了最开始的解决方案，写了一段JS代码，需要在浏览器控制台中执行，然后读取页面的主图和详情图URL地址，生成curl命令，并重命名，然后在电脑命令行中执行，自动下载所需要的图片，写完后，可把女朋友高兴坏了，还请我吃了一顿费大厨。

        在命令方式用了几个月后，觉得这种方式操作太麻烦了，能不能简化一点呢，起初想的用Java的方式进行爬取，但后来想着咱穷，又没有服务器，所以方案就放弃了，最终想到浏览器插件，这个可以，是免费的，而且也很方便使用。把我的想法和女朋友说了后，女朋友说了两个字，搞他，于是咱插件名字也出来了，就叫搞图。

        但是有一个问题，咱不会浏览器插件开发，但咱可以学，所以在这把我制作过程，进行总结分享给大家。

所需技术

1. JS原生基础 （ps：没有看错，只需要这个即可）

踩坑指南

1. 项目结构
   
2. manifest.json 属于固定配置文件，必须要根目录下
   官方文档：https://developer.chrome.com/docs/extensions/mv3/manifest/
3. 重点：popup、background、content，这三个脚本属于插件开发的核心逻辑，popup页面为点击插件图标，所打开的页面，每次点击都会刷新，background，是浏览器后台运行的脚本，每次打开浏览器，都会在后台加载，一个浏览器只有一份，content为内容脚本，每打开一个页面都会注入一份，可配置那些页面需要注入。
4. 重点：popup、background、content之间通信参考下方文档，如果下方参考文档有不能用的或者报错的地方，果断去看官方文档，官方文档虽然是英文，但是不会有版本问题
   参考文档：chrome插件background、content、popup的通信 - ministep88 - 博客园
   官方文档：https://developer.chrome.com/docs/extensions/mv3/messaging/

   

5. 脚本对页面内JS的访问是有限制的，所以在开发过程中需要知道这一点

   

6. popup.html是插件按钮点击后的弹窗，需要注意一个点，点击打开弹窗后，如果弹窗内的脚本还在执行过程中，你点击了弹窗的其他地方，就会关闭弹窗，并且直接中断脚本运行，所以耗时功能，最好放background.js去运行，但是他只能配置一个js文件，如果有第三方js依赖，就用 importScripts('js/zipjs.js')
7. 插件源码就算了，不误人子弟，建议参考下方官方源码，案例是真的齐全，搞图也是很多都是参考的官方网案例来的，如果你是要用，可以微信联系我
   https://github.com/GoogleChrome/chrome-extensions-samples

 搞图核心流程

1. 点击插件图标，打开popup页面
2. 点击popup页面中的按钮，通信后台background脚本
3. 判断当前页面是否正在生成中
4. background脚本获取当前激活tab页面，进行判断是否是各大电商平台详情页
5. 如果是的话，执行已经注入在页面当中的content脚本，得到主图和详情图URl对象，返回background脚本
6. background脚本对图片进行下载，并通过zipjs进行打包，需要注意下载时的异步问题，可以用promise对象或者递归回调都可以
7. 最后采用FileSave.js进行保存下载

效果图示

点击后就会下载下来所有需要的图片了