Chapter 04 Chapter: Advanced Userscript Techniques





Accessing, Viewing and Download Images



Getting all images (and their information)



First let's look at a simple script that will list all the images on a website. 

// ==UserScript==
// @name         Get Image Data
// @namespace    
// @description  Lists all the images on the page 
// @match        https://*/*
// @grant        none
// @run-at       document-idle
// @version      0.0.1
// ==/UserScript==


/* globals $ */
()=>{
    let imgs = document.getElementsByTagName('img');
    console.log( 'number of images:', imgs.length );
    
    // Let's list the url for each image
    for (let i=0; i


Viewing All Images



A webpage may load a large number of images which are not actually shown on the page (cached and hidden). The following userscript will let you grab all the images and place them at the bottom of the page.

// ==UserScript==
// @name         View All Images
// @namespace    
// @description  View all the images loaded by the page 
// @match        https://*/*
// @grant        none
// @run-at       document-idle
// @version      0.0.1
// ==/UserScript==


/* globals $ */
()=>{
    let imgs = document.getElementsByTagName('img');
    console.log( 'number of images:', imgs.length );
    
    // Let's list the url for each image
    for (let i=0; i



Downloading All Images (Zip)



You'll expand upon the previous section which retrieved all the images and their information. This section, takes it further by creating a zip that will let you download all of the images from the website. The example words in two parts, a button is added to the website, which when called will *grab* all the images and add them to a zip file. Then another button is added to the screen which when clicked will start the download of the images.

// ==UserScript==
// @name         Download All Images
// @namespace    
// @description  Add buttons to download all images as zip 
// @match        https://*/*
// @grant        none
// @run-at       document-idle
// @version      0.0.1
// ==/UserScript==