Shows in instagram profile pages how many images out of total (as a number and as a percentage) are currently visible, as you scroll down the page.
// ==UserScript==
// @name Instagram - visible images counter
// @namespace darkred
// @version 2024.2.23
// @description Shows in instagram profile pages how many images out of total (as a number and as a percentage) are currently visible, as you scroll down the page.
// @author darkred
// @license MIT
// @include https://www.instagram.com/*
// @grant none
// @require https://code.jquery.com/jquery-3.2.1.min.js
// @require https://greasyfork.org/scripts/21927-arrive-js/code/arrivejs.js
// @supportURL https://github.com/darkred/Userscripts/issues
// ==/UserScript==
/* eslint-disable no-console */
const escapeHTMLPolicy = (({ trustedTypes }, policy) =>
trustedTypes
? trustedTypes.createPolicy('myEscapePolicy', policy)
: policy)(window, {
createHTML: (str) => str,
});
var stylesheet =
`<style>
.counter {
color: #D9D9D9 !important;
}
</style>`;
$('head').append(stylesheet);
// Not needed anymore
/*
// If you scroll down, beyond the first 12 images, then the "LOAD MORE" button(to show more images) will be automatically clicked
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
var element = $(`a:contains('Load more')`)[0];
element.click();
}
});
*/
var hrefselems = [];
var hrefs = [];
var total;
function showCounter() {
// var totalString = $(`span:contains('posts'):last-child > span, .g47SY`).html(); // The 'total' value (it's a string). The ".g47SY" selector is for localized pages, e.g. https://www.instagram.com/instagram/?hl=de
// var totalString = document.querySelector(`#react-root > section > main > div > header > section > ul > li:nth-child(1) > * > span`).textContent; // The 'total' value (it's a string). The ".g47SY" selector is for localized pages, e.g. https://www.instagram.com/instagram/?hl=de
var totalString = document.querySelector(`[id^=mount_0_0_] section > main > div > header > section > ul > li:nth-child(1) > * > span`).textContent; // The 'total' value (it's a string). The ".g47SY" selector is for localized pages, e.g. https://www.instagram.com/instagram/?hl=de
total = totalString.replace(',', '').replace('.', ''); // strip the thousand comma/dot seperator
// hrefselems = document.querySelectorAll(`a[href*='taken-by']`);
// hrefselems = document.querySelectorAll(`._aabd._aa8k._aanf > a`);
// hrefselems = document.querySelectorAll(`._aabd._aa8k._al3l > a`);
hrefselems = document.querySelectorAll(`._aabd._aa8k.x2pgyrj > a`);
$.each(hrefselems, function(index, value) {
// hrefs.indexOf(String(value)) === -1 ? hrefs.push(String(value)) : console.log("This item already exists"); // https://stackoverflow.com/a/36683363
if (hrefs.indexOf(String(value)) === -1) { // hrefs.count -below- serves as a counter for the newly added displayed images (on each infinite scrolling event)
hrefs.push(String(value));
}
});
var visibleCount = hrefs.length;
var visiblePercent = ((visibleCount / total) * 100).toFixed(1); // Visible images count as percentage
if (isNaN(visiblePercent)) {
visiblePercent = 0 ; // avoid NaN
}
var counter = visibleCount + ' / ' + totalString + ' that is ' + visiblePercent + '%';
return counter;
}
function createDiv() {
// Creation of the counter element
document.body.appendChild(div);
// div.innerHTML = showCounter(); // Initial display of the counter
div.innerHTML = escapeHTMLPolicy.createHTML(showCounter()); // Initial display of the counter
div.style.top = '1px';
div.style.right = '1px';
div.style.position = 'fixed';
div.className = 'counter';
}
function createObserver() {
// var thePics = document.querySelector('div[style="flex-direction: column; padding-bottom: 0px; padding-top: 0px;"]');
var thePics = document.querySelector('div[style*="flex-direction: column;"], div[style$="padding-top: 0px;"]'); // the "pics" area element, with rows that contain 3 pics each (watching for 'row' element additions) --> https://stackoverflow.com/a/5110337 ("wildcard * in CSS") starting (^=) with x and ending ($=) with y
if (!thePics){
return;
}
hrefselems.length = 0; // empty the array (see https://stackoverflow.com/a/1232046, method #2)
hrefs.length = 0;
/// ---------------------------------
/// mutation observer -monitors the Posts grid for infinite scrolling event-.
/// ---------------------------------
observer = new MutationObserver(function() { // --> Callback function to execute when mutations are observed
if (div.innerHTML.indexOf(total + ' / ' + total) === -1) {
// div.innerHTML = showCounter(); // On each infinite scrolling event, re-calculate counter
div.innerHTML = escapeHTMLPolicy.createHTML(showCounter()); // On each infinite scrolling event, re-calculate counter
}
// }).observe(document.querySelector('._havey'), // target of the observer: the "pics" area element, with rows that contain 3 pics each (watching for 'row' element additions)
// }).observe(document.querySelector('div[style="flex-direction: column; padding-bottom: 0px; padding-top: 0px;"]'), // target of the observer: the "pics" area element, with rows that contain 3 pics each (watching for 'row' element additions)
});
observer.observe(thePics, // target of the observer
{ // attributes: true,
childList: true,
// characterData: true,
// subtree: true,
}); // config of the observer
}
var div = document.createElement('div');
var observer;
// var avatarSelector = 'span[style="width: 152px; height: 152px;"]'; // the profile's photo/avatar element
// var avatarSelector = 'main > article > header > section > div._ienqf > div > button'; // the 3-dots icon
// var avatarSelector = 'div[style="flex-direction: column; padding-bottom: 0px; padding-top: 0px;"]'; // the 3-dots icon
// var avatarSelector = '._mainc'; // the profile's bio area element
// var avatarSelector = 'h1.notranslate'; // the profile name element
// var avatarSelector = 'h1.rhpdm'; // the profile name element
// var avatarSelector = 'span.-nal3'; // the 'posts' count element, e.g. 683 posts
// var avatarSelector = 'ul.k9GMp'; // the profile's 3 counters container element
// var avatarSelector = '.eC4Dz'; // the profile's username container element
// var avatarSelector = '._aa_m'; // the profile's username container element
// var avatarSelector = '._aa_c'; // the profile's username container element
// var avatarSelector = 'main > article > header > section > div._ienqf > div > button'; // the 3-dots icon
// var avatarSelector = 'div[style="flex-direction: column; padding-bottom: 0px; padding-top: 0px;"]'; // the 3-dots icon
var avatarSelector = '.x1q0g3np.x2lah0s.x8j4wrb'; // the 3-dots icon
if (document.querySelector(avatarSelector) ) {
if (!document.querySelector('.counter')){
createDiv();
createObserver();
}
} else {
console.log('ERROR: Cannot create the Counter element, the avatarSelector element ( ' + avatarSelector + ' ) doesn\'t exist !!');
}
document.arrive(avatarSelector, function() { // the avatar in the profile page
createDiv();
createObserver();
// alert()
});
function removeCounter(){
div.remove();
hrefselems.length = 0; // empty the array (see https://stackoverflow.com/a/1232046, method #2)
hrefs.length = 0;
total = '';
observer.disconnect();
// if (observer) {
// observer.disconnect();
// }
}
document.leave(avatarSelector, function() {
if (!document.querySelector(avatarSelector)){
removeCounter();
}
});
// when navigating using the browser's back/forth
window.addEventListener('popstate', function () {
// alert()
removeCounter();
console.log('COUNTER IS REMOVED');
// TODO
// createDiv();
// createObserver();
});
// when navigating from a profile to another via searchbox // history API)
// https://stackoverflow.com/questions/56760727/how-to-observe-a-change-in-the-url-using-javascript
(function(){
var rs = history.pushState;
history.pushState = function(state, title, url){
if ( !url.includes('/following/') && !url.includes('/followers/') && !url.includes('/p/') && !url.includes('/direct/') && !window.location.href.includes('/p/') ){ // avoid all possible in-page/popup "pages" (a profile's following/followers, and posts -opened by clicking on a thumb-)
rs.apply(history, arguments); // preserve normal functionality
console.log('navigating', arguments); // do something extra here; raise an event
removeCounter();
// alert()
}
};
}());