我想编写一个Chrome扩展程序,在其中输入页面URL,它列出了该页面上显示的所有图像文件名以及这些图像的文件大小,例如“页面包含图像:1.jpg(65KB),2.png(135KB) )”。如何才能做到这一点?我也想避免使它成为devtools扩展。
我尝试使用webRequest API,但看不到任何访问请求正文的方法。图片大小可能会在响应标头中发送,但不能保证。我已经尝试过使用AJAX来获取图像数据,但是您获得的图像数据是未压缩的版本,这不能准确反映实际文件的大小。
您可以致电document.images获得图像document,使用fetch(),Response.blob()以回报Blob图像的响应,检查.size的Blob,以获取图像的名称URL()构造
document.images
document
fetch()
Response.blob()
Blob
.size
URL()
let getImages = () => { let images = Array.from(document.images); return Promise.all(images.map(img => fetch(img.src) .then(response => response.blob()))) .then(blobs => { return blobs.map((img, index) => { let name = new URL(images[index].src).pathname.split("/").pop(); name = !/\./.test(name) ? name + "." + img.type.replace(/.+\/|;.+/g, "") : name; return { name: name, size: img.size } }); }) } getImages() .then(images => console.log(JSON.stringify(images))) .catch(e => console.log(e)) <img src="https://placehold.it/10x10"> <img src="https://placehold.it/20x20">