Number imgur album images

Numbers the images in imgur albums, so it's easier to reference them as #X in the comment section

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// ==UserScript==
// @name         Number imgur album images
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Numbers the images in imgur albums, so it's easier to reference them as #X in the comment section
// @author       Retsam19
// @match        imgur.com/gallery/*
// @grant        none
// ==/UserScript==

/* jshint esversion: 6 */

const CONTAINER_ELEMENT_CLASS = "post-image-container"; //Class used by imgur for image containers
const IMAGE_ELEMENT_CLASS = "post-image";               //Class used by imgur for individual images
const INDEX_ELEMENT_CLASS = "post-image-index";         //Class used by this script for it's index labels that it adds to the DOM
(function() {
    'use strict';

    //Map from image id to index
    const imageIndexes = {};

    new MutationObserver(() => {
        const imageContainers = document.querySelectorAll("."+CONTAINER_ELEMENT_CLASS);
        //Don't attempt to number single image albums
        if(imageContainers.length < 2) return;

        let previousIndex = null;
        for(const imageContainer of imageContainers) {
            const id = imageContainer.id;
            if(!previousIndex) {
                //For the first image that's currently visible, either lookup its index from the map...
                //  ... or else assume it's the first image
                previousIndex = imageIndexes[id] || 1;
            } else {
                //For the rest, just increment from the previous
                previousIndex += 1;
            }
            //Update indexes with the (possibly new) index
            const index = imageIndexes[id] = previousIndex;

            //Update the DOM with the label element
            let indexLabelElement = imageContainer.querySelector("."+INDEX_ELEMENT_CLASS);
            if(!indexLabelElement) {
                //Create the element
                indexLabelElement = document.createElement("div");
                //With the identifiable class
                indexLabelElement.classList.add(INDEX_ELEMENT_CLASS);
                //Centered text
                indexLabelElement.style.textAlign = "center";
                //Add it to the DOM
                imageContainer.querySelector("."+IMAGE_ELEMENT_CLASS).insertAdjacentElement('afterend', indexLabelElement);
            }
            //Update the text
            indexLabelElement.innerText = `^ ${index} ^`;
        }

    }).observe(document.body, {
    childList: true,
    subtree: true
});
})();