Image Downloader per Google Chrome fai da te

, , , ,

Image Downloader screenshot

Sei mai rimasto bloccato su una pagina web, incapace di scaricare quelle immagini che ti piacciono tanto? Che ne dici di crearci una estensione per Chrome in grado di farlo?


Sai già che a volte non è possibile procedere con il tasto destro, e il motivo è che molti siti usano "trucchi" per proteggere i loro contenuti. Pensa a piattaforme come Instagram, dove le foto sono protette per questioni di copyright e per invitarti a restare nel suo spazio.


Ti sarai anche accorto che il più delle volte quella che vedi non è la "vera": cioè, è solo un'anteprima del file originale e ad alta risoluzione che si trova in un'altra posizione. In altri casi sono parte di una galleria dinamica o di uno "slide" che le carica in modo da rendere impossibile il download diretto.

Purtroppo, in alcuni casi, anche un'estensione ben progettata ha i suoi limiti e non può sempre superare tutti gli ostacoli.
Tuttavia, questa piccola estensione pur essendo molto semplice ci riesce abbastanza bene grazie all'API di Chrome. Trova e scarica le immagini che altrimenti non potresti salvare.
Ti aiuta a trovare quelle disponibili e a gestirne il download in modo semplice e veloce, singolarmente o tutte in un colpo solo, risparmiando tempo prezioso se devi raccogliere decine di immagini per un moodboard o per una ricerca.


Seguendo questa guida, ti basterà un semplice copia e incolla per averla funzionante sul tuo PC. Più tardi, ti mostrerò come personalizzarla per renderla ancora più tua.
Vai di fretta? Scaricala da Telegram



Configurazione dell'Estensione

Se sei pronto/a, iniziamo subito.


1) Crea una cartella principale chiamata Image Downloader. Scegli una posizione sul tuo computer che non sposterai in futuro o l'estensione non funzionerà più.
2) All'interno di questa cartella, crea tre file utilizzando un semplice editor di testo come il Blocco Note di Windows: manifest.json.txt, popup.html.txt, e popup.js.txt.
3) Copia e incolla i codici che trovi nella guida all'interno dei rispettivi file e, una volta terminato, rimuovi il .txt da tutti e tre i nomi dei file.


Fatto? Bene. 4) Ora dovrai aggiungere le icone (in realtà e una sola ma con differenti misure).
Crea una nuova cartella all'interno di Image Downloader e chiamala images.
Qui dovrai inserire tre versioni in formato PNG.
Assicurati che ognuna abbia la dimensione giusta e che sia rinominata come segue: icon16.png (16x16 pixel), icon48.png (48x48 pixel), e icon128.png (128x128 pixel). In pratica, è quella che vedrai in alto nella barra degli strumenti.
In questo modo, l'estensione avrà tutte le risorse necessarie per essere installata correttamente.


manifest.json

{ "manifest_version": 3, "name": "Image Downloader by TantiLink", "version": "1.0", "description": "Scaricare tutte le immagini di una pagina web", "permissions": ["activeTab", "scripting", "downloads", "storage"], "host_permissions": ["<all_urls>"], "action": { "default_popup": "popup.html", "default_icon": { "16": "images/icon16.png", "48": "images/icon48.png", "128": "images/icon128.png" } } }

popup.html

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <style> body { width: 450px; padding: 10px; font-family: 'Poppins', sans-serif; background: linear-gradient(to bottom, #000000, #1a1a1a); color: #fff; } .popup-container { background: linear-gradient(to top, #1e1e1e, #2e2e2e); border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 20px; } .logo-container { text-align: center; margin-bottom: 20px; } .logo-container img { width: 250px; height: auto; } #header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } h3 { margin: 0; color: #fff; } #image-count { font-size: 1em; font-weight: 600; color: #fff; } #image-list { max-height: 400px; overflow-y: auto; border: 1px solid #ddd; border-radius: 8px; padding: 10px; margin-top: 10px; background-color: #212121; } .image-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #eee; } .image-item:last-child { border-bottom: none; } .image-details { display: flex; align-items: center; flex-grow: 1; overflow: hidden; } .image-details a { color: #fff; text-decoration: none; font-weight: 500; flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .image-preview { width: 80px; height: 80px; border-radius: 5px; margin-right: 10px; object-fit: cover; } .no-preview { width: 80px; height: 80px; border-radius: 5px; margin-right: 10px; background-color: #2e2e2e; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 0.7em; color: #aaa; padding: 5px; box-sizing: border-box; } .image-info { display: flex; flex-direction: column; justify-content: center; } .image-dimensions { font-size: 0.8em; color: #fff; } .download-icon { cursor: pointer; margin-left: 10px; color: #0d6efd; } hr { border: 0; height: 1px; background: #ccc; margin: 20px 0; } button { position: relative; width: 100%; padding: 12px; cursor: pointer; background-color: #2563eb; color: white; border: none; border-radius: 6px; font-size: 1.1em; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; overflow: hidden; } button:hover { background-color: #1d4ed8; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } button .button-icon { margin-right: 8px; font-size: 1.2em; line-height: 1; } button::before, button::after { content: ''; position: absolute; top: 0; width: 0; height: 0; border-style: solid; transition: all 0.3s ease; z-index: -1; } button::before { border-width: 0 10px 10px 0; border-color: transparent #f0f2f5 transparent transparent; left: 0; } button:after { border-width: 0 0 10px 10px; border-color: transparent transparent transparent #f0f2f5; right: 0; } button:hover::before { border-width: 0 20px 20px 0; border-color: transparent #1d4ed8 transparent transparent; } button:hover::after { border-width: 0 0 20px 20px; border-color: transparent transparent transparent #1d4ed8; } </style> </head> <body> <div class="popup-container"> <div class="logo-container"> <a href="https://www.tantilink.net" target="_blank" title="visit tantilink.net"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie-JqwqntVBFPNAdjPLbR4hNtxRdugKuV7SCLxi_JV7pgDzvsaMlF2lQ91aDPWoZwepsNFbc34j5O5mVdYUqKtdwZgWYorxHMfjQ2f-Yoe0IYdP1ld3JnDHd98OCmW0jrveER27DV4g_h99tG7cDrQwQybKLTPxiDni4VfE5fRFLssDTC8-P7f5QnHFkN6/s1600/tantilink-logo.webp" alt="TantiLink Logo"> </a> </div> <div id="header"> <h3>Images found</h3> <span id="image-count"></span> </div> <div id="image-list"></div> <hr> <button id="download-all"> <span class="button-icon"><i class="fas fa-download"></i></span> Download all images </button> </div> <script src="popup.js"></script> </body> </html>

popup.js

document.addEventListener('DOMContentLoaded', function() { const imageList = document.getElementById('image-list'); const downloadButton = document.getElementById('download-all'); const imageCountSpan = document.getElementById('image-count'); chrome.storage.local.clear(function() { console.log('Cache dell\'estensione svuotata.'); }); chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) { if (!tabs || tabs.length === 0) { imageList.textContent = 'Nessuna scheda attiva trovata.'; downloadButton.style.display = 'none'; imageCountSpan.textContent = '0 immagini'; return; } const tab = tabs[0]; const tabId = tab.id; if (!tab.url || tab.url.startsWith('chrome://')) { imageList.textContent = 'Non puoi usare l\'estensione su questa pagina.'; downloadButton.style.display = 'none'; imageCountSpan.textContent = '0 immagini'; return; } chrome.scripting.executeScript({ target: { tabId: tabId }, function: findLargeImages }, (results) => { if (chrome.runtime.lastError || !results || results.length === 0 || !results[0].result) { imageList.textContent = 'Impossibile trovare immagini. Assicurati che l\'estensione abbia i permessi corretti.'; downloadButton.style.display = 'none'; imageCountSpan.textContent = '0 immagini'; console.error('Failed to execute script:', chrome.runtime.lastError ? chrome.runtime.lastError.message : 'No results.'); return; } const imageUrls = results[0].result; const savedUrls = new Set(imageUrls.map(img => img.url)); chrome.storage.local.set({ imageUrls: Array.from(savedUrls) }, function() { updatePopup(imageUrls); }); }); }); function updatePopup(urls) { imageList.innerHTML = ''; imageCountSpan.textContent = `${urls.length} images`; if (urls.length > 0) { urls.forEach(img => { const itemDiv = document.createElement('div'); itemDiv.className = 'image-item'; const imageDetailsDiv = document.createElement('div'); imageDetailsDiv.className = 'image-details'; const imgElement = document.createElement('img'); imgElement.src = img.url; imgElement.className = 'image-preview'; imgElement.alt = 'Anteprima immagine'; imgElement.onerror = function() { imgElement.style.display = 'none'; const noPreviewDiv = document.createElement('div'); noPreviewDiv.className = 'no-preview'; noPreviewDiv.textContent = 'Anteprima non disponibile'; imageDetailsDiv.insertBefore(noPreviewDiv, imageDetailsDiv.firstChild); }; imageDetailsDiv.appendChild(imgElement); const infoDiv = document.createElement('div'); infoDiv.className = 'image-info'; const urlLink = document.createElement('a'); urlLink.href = img.url; const fileName = img.url.split('/').pop(); urlLink.textContent = fileName.length > 30 ? fileName.substring(0, 27) + '...' : fileName; urlLink.title = img.url; urlLink.download = ''; urlLink.onclick = function(event) { event.preventDefault(); chrome.downloads.download({ url: img.url }); }; infoDiv.appendChild(urlLink); const dimensionsSpan = document.createElement('span'); dimensionsSpan.className = 'image-dimensions'; dimensionsSpan.textContent = `${img.width}x${img.height} px`; infoDiv.appendChild(dimensionsSpan); imageDetailsDiv.appendChild(infoDiv); itemDiv.appendChild(imageDetailsDiv); const downloadIcon = document.createElement('span'); downloadIcon.className = 'download-icon'; downloadIcon.innerHTML = '<i class="fas fa-arrow-alt-circle-down"></i>'; downloadIcon.onclick = function() { chrome.downloads.download({ url: img.url }); }; itemDiv.appendChild(downloadIcon); imageList.appendChild(itemDiv); }); downloadButton.onclick = function() { urls.forEach(img => { chrome.downloads.download({ url: img.url }); }); }; downloadButton.style.display = 'block'; } else { imageList.textContent = 'Nessuna immagine grande trovata.'; downloadButton.style.display = 'none'; } } }); function findLargeImages() { const images = []; const minWidth = 150; const minHeight = 150; const foundUrls = new Set(); const allImages = document.querySelectorAll('img'); for (const img of allImages) { const src = img.src; if (src && !foundUrls.has(src)) { if (img.naturalWidth >= minWidth && img.naturalHeight >= minHeight) { images.push({ url: src, width: img.naturalWidth, height: img.naturalHeight }); foundUrls.add(src); } } } document.querySelectorAll('*').forEach(element => { const style = window.getComputedStyle(element); const backgroundImage = style.backgroundImage; if (backgroundImage && backgroundImage.startsWith('url(')) { const url = backgroundImage.slice(5, -2); if (url && !foundUrls.has(url)) { images.push({ url: url, width: null, // Non disponibile height: null // Non disponibile }); foundUrls.add(url); } } }); return images; }

La struttura della cartella Image Downloader

screenshot cartella Image Downloader

Se hai eseguito correttamente i pochi passaggi di questa guida, la struttura completa della cartella 📁 Image Downloader pronta per essere utilizzata è simile a questa:

📂 images
🖼️ icon16.png
🖼️ icon48.png
🖼️ icon128.png
📄 manifest.json
📄 popup.html
📄 popup.js



Come installare l'estensione su Chrome

1) Apri la pagina delle estensioni digitando chrome://extensions/ nella barra degli indirizzi e poi premi Invio.
Oppure puoi accedere dal menu di Chrome (i tre puntini in alto a destra) > Estensioni > Gestisci estensioni.


2) Qui attiva la Modalità sviluppatore pigiandi sull'interruttore in alto a destra.

screenshot estensioni chrome modalità sviluppatore

3) Carica l'estensione facendo clic sul pulsante Carica estensione non pacchettizzata che è appena comparso alla tua sinistra. Si aprirà una finestra per la selezione della cartella.


4) Selezionala con un clic, non devi caricare i singoli file!
A questo punto, l'estensione sarà installata e la sua icona apparirà nella barra degli strumenti di Chrome.



Come scaricare immagini e foto dai siti internet

Quando fai clic sull'icona su una pagina web, l'estensione la scansiona immediatamente per trovare immagini disponobili. Il popup ti mostra il numero totale che puoi scaricare: tutte insieme con un solo clic sul pulsante Download all images o una per una.


💡 Suggerimento: Per essere sicuro di trovarne di più, specialmente su pagine lunghe, scorri fino in fondo prima di fare clic sull'icona dell'estensione.



Personalizzare l'estensione per Chrome

Qualsiasi modifica tu voglia fare, dovrai temporaneamente aggiungere l'estensione .txt al nome del file e, dopo aver salvato, rimuoverla nuovamente.

Colori e font

Come promesso, ti spiego brevemmente come personalizzare l'estensione, partendo da colori e font.
Per modificare i colori e lo stile del testo, devi aprire il file popup.html.
Tutti i cambiamenti che riguardano l'aspetto grafico sono qui, all'interno del blocco style.
Per cambiare i colori dei gradienti, cerca le sezioni body e .popup-container.
Modifica i valori esadecimali dei colori (es. #000000, #1a1a1a) con i tuoi colori preferiti.
Puoi farlo aiutandoti con il mio generatore online di colori casuali e convertitore HEX in RGBA.


Testo e link: Per cambiare il colore del testo, cerca il selettore a per i link e h3 per i titoli.


Per il tipo di Font (carattere), modifica il valore di font-family nel selettore body. Puoi usare un font web come "Poppins" o un font standard del sistema come "Arial", "Helvetica", "Verdana", ecc. Oppure, importa uno nuovo da Google Fonts per sostituire l'attuale.


Modificare la dimensione minima delle immagini

Se vuoi cambiare la dimensione minima delle immagini che l'estensione deve rilevare, devi aprire il file popup.js.
Cerca la funzione findLargeImages() e modifica i valori minWidth e minHeight.
Esempio:
minWidth = 300; minHeight = 300;


Dopo aver apportato tutte le modifiche, non dimenticare di salvare i file togliendo il .txt e di ricaricare l'estensione dalla pagina chrome://extensions/ per vedere i cambiamenti.



Anche per oggi è tutto! Spero che questa guida ti sia stata utile e che ora tu possa scaricare le tue immagini preferite con più facilità.
Se hai domande, dubbi o suggerimenti, o se dovessi notare qualche comportamento strano o un possibile bug, sentiti libero di lasciare un commento qui sotto.
E se questa ti è stata d'aiuto, non dimenticare di condividere la guida con i tuoi amici.


Leggi anche: Creare un'estensione per Chrome da zero: bookmarks con PIN
Come creare da zero temi Chrome personalizzati con JSON e Notepad


Maurizio Carbonaro, autore e fondatore di TantiLink

Maurizio Carbonaro

imbianchino e cartongessista

Catania, Italia

Autore e fondatore di TantiLink, umile imbianchino "appassionato" di informatica e tecnologia. Un Blog a 360° nato per gioco sei anni fa che tratta diversi argomenti sul mondo della tecnologia e dell’intrattenimento digitale. Non sono un guru come Aranzulla!

icona busta email png trasparente pulsante donazione paypal

By alle
Etichette: , , , ,

Nessun commento:

Posta un commento

Iscriviti a: Commenti sul post (Atom)
TantiLink collabora con: