浏览器插件官方demo学习（四）：图片下载

图片下载

官方示例中提供了这个例子，不过是基于v2版本的。这里我们学习一下实现的原理，开发一个基于v3的demo

官方例子：download_images

鼠标右键，点击检查弹窗窗口

问题
查看了一下源码，发现这个demo比较简单。是通过获取页面中的img标签来获取链接的，但是这种方式有个问题就是，图片有可能是相对路径。

相对路径存在一下两种情况：
1、网站的基础路径就是图片的根路径（简单）
2、网站的基础路径不是图片的根路径（复杂）

实现

无论是简单的还是复杂的都需要进行消息传递，通过扩展往页面里注入脚本，由这部分脚本来获取到页面里所有img标签的src属性值。然后再由脚本向扩展发送消息，将这些属性值传递给扩展。
以下内容都是基于react进行开发的，第一次用react开发脚本，应该会有不少理解错误的地方。（在这个过程中，很多实现都是问的new bing，真的是太方便了。我向她描述问题，她给我提供思路）

实际上手后才发现，起始还有很多的小细节。一开始是直接使用document.querySelectorAll('img')来获取图片，但是如果存在iframe标签的话，document.querySelectorAll('img') 是无法获取的iframe里的图片
原因是：

document.querySelectorAll(‘img’) 只能获取当前文档中匹配选择器的元素，而不能获取iframe标签里的元素，因为iframe标签里的内容是另一个文档。如果你想获取iframe标签里的img元素，你需要先获取iframe标签的引用，然后使用它的contentDocument属性来访问它的文档，再使用querySelectorAll(‘img’)方法

因此获取图片应该如下：

export const funaa = () => {
    // 存储src属性
    let srcArray = []
    // 获取body中所有的image标签的currentSrc属性
    let bodyImages = document.querySelectorAll('img')
    Array.from(bodyImages).forEach(img => {
        srcArray.push(img.currentSrc)
    })
    // 获取iframes中所有的image标签的currentSrc属性
    let iframes = document.querySelectorAll('iframe')
    Array.from(iframes).forEach(iframe => {
        // 获取当前iframe标签里的img元素
        let iframeImages = iframe.contentDocument.querySelectorAll('img');
        Array.from(iframeImages).forEach(img => {
            srcArray.push(img.currentSrc)
        })
    })
    console.log("图片是：", srcArray)
}

为什么是currentSrc而不是src属性

说实话，还真不知道currentSrc属性。自己真的是个大菜逼，还一直沾沾自喜，觉得自己水平还可以。

img标签的src属性和currentSrc属性有一些区别。
src属性是用来指定图片的源地址的，它可以是一个绝对的或相对的URL。
currentSrc属性是用来表示当前显示在img标签里的图片的完整URL的，它是一个只读的属性，不能被修改

currentSrc属性在你使用sizes和srcset属性来提供多个图片选项的时候很有用，因为它可以让你知道浏览器选择了哪一个图片。例如，下面的代码提供了一个时钟图片的两个不同尺寸，一个是200px宽，另一个是400px宽。sizes属性用来指定图片在不同视口宽度下的显示大小。你可以通过currentSrc属性来查看浏览器实际选择了哪个图片。

<img src="clock-200.jpg" srcset="clock-200.jpg 200w, clock-400.jpg 400w" sizes="(max-width: 400px) 50vw, 90vw">
<script>
  var img = document.querySelector('img');
  console.log(img.currentSrc); // 打印出当前显示的图片的URL
script>

上面还在分析如果src属性是相对路径时该如何获取到这个图片的地址呢，现在直接被打脸了。这下也不用考虑了，直接用currentSrc 属性就好了

除了img标签中存在src和currentSrc 属性外，video标签中同样存在这两个属性。获取网页中的图片，起始也可以变成获取网页中的视频。

但是获取视频其实还有些别的问题：

• 视频是个视频流，你需要把每一个流文件给存起来，最后再把这些流文件给合并成一个完整的视频文件。关于视频流，前段时间拿来解决过一个问题，感兴趣的见：前端播放大视频卡顿的解决（m3u8视频流）
• 上面的问题，真要想解决也是可以解决的。比如手机端的qq浏览器的嗅探功能，可以将视频流下载下来，然后再转成MP4，原理应该差不多（个人觉得）。再复杂的情况应该是对这些流文件给加密，你就算下载下来也没用，你无法进行解密。

下载视频这个如果以后有时间，会专门写一篇文章来介绍。

言归正传，继续来实现图片下载这个功能。获取到图片后我们将这些图片地址给缓存起来，这里使用chrome.storage.local

chrome.storage.local是一个用来存储数据的API，它可以让你在Chrome扩展中保存和读取对象。 它和localStorage 类似，但是有一些区别：

• chrome.storage.local可以保存任何类型的数据，而localStorage只能保存字符串类型的数据。
• chrome.storage.local可以在不同的上下文中共享数据，例如background.js和popup.html，而localStorage只能在同一个网页中访问数据。
• chrome.storage.local有一个存储限制，一般是5MB，除非你申请了unlimitedStorage权限，而``localStorage`的存储限制取决于浏览器和网站。
• chrome.storage.local是异步的，需要使用回调函数来处理结果，而localStorage是同步的，可以直接返回结果。

可以使用chrome.storage.local.set方法来保存数据，使用chrome.storage.local.get方法来读取数据，使用chrome.storage.local.remove方法来删除数据。还可以使用chrome.storage.onChanged事件来监听数据的变化

  // 保存图片链接
  const [imgList, setImgList] = useState([]);
  // 注入脚本
  const insertScripts = () => {
    checkPage(async (tab) => {
      //依赖注入
      const result = await chrome.scripting.executeScript({
        target: { tabId: tab.id },
        func: getAllImage,
      });
      //console.log(result);
      // 这个API暂时无用，如果向打开一个新页面展示这些图片时有用
      chrome.storage.local.set('imgs',result[0]?.result || [])
      setImgList(result[0]?.result || []);
    });
  };

渲染这些图片

import React from 'react';
import './img-list.scss';
import { Checkbox } from 'antd';

const ImgList = (props) => {
  let img = props.list.map((e) => {
    return (
      <div key={e} >
        <img src={e} alt="图片" className="img-item" />
        <Checkbox value={e} style={{position:'relative',right:'20px',top:'-10px'}}></Checkbox>
      </div>
    );
  });
  return (
      <Checkbox.Group className="img-list">{img}</Checkbox.Group>
  );
};

export default ImgList;

有点丑，好久没用react，有点生疏

图片下载

图片下载这里需要用到 chrome插件提供的api，先添加下载权限 downloads，然后直接使用下面的方法即可进行下载。
除此之外还需用到 FileSaver 、jszip 。chrome.downloads.download只能根据url进行下载，不能下载文件流。

chrome.downloads.download({url: 'https://scpic.chinaz.net/Files/pic/pic9/202011/apic28854_s.jpg'});

npm i jszip
npm i file-saver

这里打算进行简单的优化：

• 单张图片的下载，直接下载
• 多张图片的下载，将多张图片放到一个压缩文件里将这个压缩文件进行下载

// 转换图片为base64格式
  const getImageBase64 = (url) => {
    let image = new Image();
    image.crossOrigin = 'Anonymous';
    image.src = url;
    // 创建一个画布
    const canvas = document.createElement('canvas');
    // 让画布的宽高等于图片的宽高
    canvas.width = image.width;
    canvas.height = image.height;
    // 然后在画布上进行画画
    const ctx = canvas.getContext('2d');
    // 开始画图片，1.绘制的对象2.绘制的位置，3绘制的宽高
    ctx.drawImage(image, 0, 0, image.width, image.height);
    return canvas.toDataURL();
  };

  // 将文件打包并下载
  const downloadZip = async (sourceList, zipName) => {
    const zip = new JSZip(); // 创建一个压缩对象
    const fileFolder = zip.folder(zipName); // 创建 zipName 文件夹
    const fileList = [];
    // 遍历图片数据
    for (let i = 0; i < sourceList.length; i++) {
      let image = sourceList[i];
      // 路径base64转换
      const url = await getImageBase64(image);
      let filename = image.split('/').pop();
      // 往压缩包里添加图片数据
      fileList.push({
        name: filename, // 压缩名
        img: url.substring(22), // 去掉base64文件标识，img是文件形式
      });
      // 确保每个数据都遍历完
      if (fileList.length === sourceList.length) {
        // 确保数据不为空
        if (fileList.length) {
          for (let k = 0; k < fileList.length; k++) {
            // 往文件夹中，添加每张图片数据fileFolder文件夹压缩包
            fileFolder.file(fileList[k].name, fileList[k].img, {
              base64: true,
              // 下面的可以省略
              compression: 'DEFLATE', // STORE：默认不压缩 DEFLATE：需要压缩
              compressionOptions: {
                level: 9, // 压缩等级1~9    1压缩速度最快，9最优压缩方式
                // [使用一张图片测试之后1和9压缩的力度不大，相差100字节左右]
                // 注意到达这里的时候image的路径必须是带有data：image/png;base64,
              },
            });
          }
          zip
            .generateAsync({
              // 压缩的结果为blob类型（二进制流）,可用作文件上传
              type: 'blob',
            })
            .then((content) => {
              // 直接在浏览器打成zipName.zip包并下载，saveAs依赖的js是FileSaver.js
              FileSaver.saveAs(content, zipName + '.zip');
            })
            .catch((msg) => {
              console.log(msg);
            });
        }
      }
    }
  };

效果

单张

多张

下载

下载插件
关注公众号回复关键字：图片下载插件 ，进行下载，下载完成后，将压缩包解压，将解压后的文件夹拖进浏览器的扩展程序里。

下载插件及源码（收费）

关注公众号，回复关键词 图片下载插件源码。会收到一张1元的支付二维码，付款后将付款截图在公众号里发给我。收到付款截图后，我将在6小时以内发你源码。