Download Slack Profile Pictures / Images

Download-Slack-Profile-Pictures.js

// 1. Navigate to the Members View
// Enter slack in the browser. https://{insert your team name here}.slack.com/messages/
// Click on the channel you want.
// Click the information icon.
// Expand the members dropdown.
// Click "See All Members"

// 2. Run JS Code To Start
// Copy-paste this whole thing

// 3. Scroll through the Members List
// If your channel has more than 19 members, the list won't display past that. It also unloads them from the state as you scroll.
// When you trigger this bookmarklet, it will automatically start collecting images as you scroll down the list, removing duplicates along the way

// 4. Run JS Code Again
// Copy-paste this whole thing again
// A list of curl commands is copied into your copy-paste hand.

// 5. Paste the curl commands into Terminal, and run them. 

// --- the code ---

// if this is the first time running it, make it an empty set
// otherwise, let it be
var imageList;
imageList ??= new Map();

function grabThumbnailURLs() {
  var $slackUsers = document.querySelectorAll(`[aria-label="Members in channel"] [data-qa="medium_member_list_entity"]`);
  $slackUsers.forEach(function (el, i) {
    $name = el.querySelector(`[data-qa="member-entity__secondary-name"]`)?.innerText || el.querySelector(`[data-qa="member-entity__primary-name"]`).innerText;
    $image = el.querySelector(`[data-qa="member-entity__avatar"] img`);
    var $memberThumbnail = $image.src;
    var $memberThumbnailUrl = $memberThumbnail.replace('url("', "").replace("-48", "-500");
    imageList.set($name, $memberThumbnailUrl);
  });
}
grabThumbnailURLs();

window.addEventListener("wheel", function (event) {
  grabThumbnailURLs();
});

function copyCurlCommands() {
  const curlCommands = Array.from(imageList).map((item, i) => {
    let name = item[0];
    let imageURL = item[1];
    return `curl -o "${name}.png" ${imageURL}`;
  });
  copy(curlCommands.join("\n"));
}

copyCurlCommands();