【源码】基于Webpack和Vue2.x的蓝湖切图拦截上传Chrome插件

项目简介

此项目是一款用于拦截蓝湖切图并自动上传的Chrome插件。在小程序项目里，因主包大小受限，需把切图上传到公司资源服务器，通过图片的http链接访问，以此减少主包或分包体积。该插件借助Chrome扩展功能，结合Webpack和Vue2.x技术栈开发，能自动拦截蓝湖切图请求，对图片压缩处理后，依据图片大小选择上传至服务器或直接下载到本地。

项目的主要特性和功能

1. 切图拦截：利用chrome.webRequest API拦截蓝湖网站的图片下载请求。
2. 图片压缩：针对不同图片类型采用不同压缩策略，gif图不压缩，png图裁剪压缩，jpeg图通过encoderOptions参数压缩。
3. 上传与下载决策：根据预设图片大小阈值，判断图片是上传到资源服务器还是直接下载到本地。
4. 结果展示：上传成功后，在页面右侧弹窗展示预览图和图片的http链接。
5. 手动上传功能：支持用户手动选择图片进行上传。
6. 配置设置：提供属性设置页，可设置是否拦截、是否压缩、图片上传大小阈值、展示个数等。

安装使用步骤

前提条件

用户已下载本项目的源码文件，且上传图片的接口需用户根据实际情况自行完善。

具体步骤

1. 打开命令行工具，进入项目根目录，执行npm run build命令打包代码。
2. 打开Chrome浏览器，点击右上角的三个点，选择“更多工具” -> “扩展程序”。
3. 在扩展程序页面，开启“开发者模式”，点击“加载已解压的扩展程序”，选择打包好的dist文件夹，完成扩展的添加。
4. 打开蓝湖网站，尝试下载切图，插件将自动拦截上传并展示图片链接。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】