Список файлов всех изображений на странице (Расширение Chrome)

Question

Я хочу написать расширение Chrome, в котором вы вводите URL-адрес страницы, и перечисляет все имена файлов изображений, которые появляются на этой странице, с размерами файлов этих изображений, например. «Страница содержит изображения: 1.jpg (65KB), 2.png (135KB)». Как это может быть сделано? Я также хочу избежать расширения devtools.

Я пробовал использовать API webRequest, но я не вижу возможности получить доступ к телу запросов. Размер изображения может быть отправлен в заголовке ответа, но это не гарантируется. Я попытался использовать AJAX для захвата данных изображения, но данные изображения, которые вы получаете, являются несжатой версией, и это не будет точным отражением фактического размера файла.

Answer 1

Вы можете позвонить document.images получить изображения в document, используйте fetch(), Response.blob() вернуть Blob ответ изображения, проверить .size из Blob, получить имя изображения с 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">