A simple script for downloading all images for a listing on BringATrailer.com

bat-download.js

async function ensureCarouselVisible() {
  const imgWrap = document.elementFromPoint(100, 100);
  if (!imgWrap.classList.contains('pswp__item')) {
    // carousel isn't active, make it so
    document.querySelector('.gallery img').click();
    while (!document.elementFromPoint(100, 100).classList.contains('pswp__item')) {
      await delay(50);
    }
  }
}

function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

// Find the active image, surround it in an anchor tag, then click it.
async function downloadImage() {
  const imgWrap = document.elementFromPoint(100, 100);
  const img = imgWrap.querySelector('.pswp__img');
  if (!img || !img.src) {
    throw new Error("All images downloaded or next image not found.");
  }
  // Full image hasn't loaded yet, so change the src
  const src = img.src
    .split('?')[0] // get rid of querystring
    .replace('-scaled', ''); // Remove `-scaled` to attempt to get the full res image
  return downloadSrc(src);
}

// Create an anchor then download from it
function downloadSrc(src) {
  const a = document.createElement('a');
  a.href = src;
  a.download = "";
  a.click();
}

function nextImage() {
  document.querySelector('.pswp__button.pswp__button--arrow--right').click();
}

function getCounterValue() {
  const [position, total] = document.querySelector('.pswp__counter').textContent.split('/');
  return parseInt(position.trim(), 10);
}

async function run() {
  await ensureCarouselVisible();
  await delay(500);
  const firstValue = getCounterValue();

  async function preloadLoop() {
    nextImage();
    await delay(50);
    if (getCounterValue() !== firstValue) return preloadLoop(); // recurse
  }

  async function imageLoop() {
    try {
      await downloadImage();
    } catch (e) {
      console.log('done!');
      return;
    }
    nextImage();
    await delay(100);
    // console.log('counter', getCounterValue());
    if (getCounterValue() !== firstValue) return imageLoop(); // recurse
  }
  console.log('Running image preload, please wait...');
  await preloadLoop();
  console.log('Running download...');
  return imageLoop();
}

run()
  .then(() => 
    console.log('Download initiated, please wait until your download folder contains the full number of items.'))
  .catch(console.error);

Thank you all for this super-handy utility! Works like a charm.

For users who found this code snippet browsing the internet, the usage of this code as follows.

1. Open browser (I used Mozilla Firefox)
2. Click 3 lines in upper right
3. Select "More Tools" and then "Web Developer Tools".
4. You may have to enter the text "accept paste" in the console on the left side and click Run.
5. Paste the javascript code from above into the console.
6. Click Run

It will open a browser tab for each picture and download the picture to your download folder.

Voila!

Thanks again.

@CuHead Thank you for the step-by-step.
@STRML This is an awesome tool for using BAT images as reference images for documentation. Thank You for the work you put into it and also making it available to the public.

I also learned that with this Firefox plugin enabled:
https://addons.mozilla.org/en-US/firefox/addon/dont-accept-webp/
The images downloaded are in .jpg format instead of webp.

I tried this after already loading the webp plugin into irfanview, thinking i was just going to run a batch convert.

Had same issues with the script as @handro123 - did not download all pictures.
Tried in MSFT Edge - worked great, all pictures downloaded as .jpeg
Thanks!

Worked like a charm in Chrome. Thanks! Made archiving the photos from a purchase easy.

@aronparsons Glad it's helped you. I've bought a lot of cars on BaT so I use this every 6-9mo or so!