- // ==UserScript==
- // @name Instagram full-size media scroll wall
- // @namespace driver8.net
- // @author driver8
- // @license GNU AGPLv3
- // @description Creates a scrollable wall of full-size images from any user's instagram page, "tagged" page, or the instagram homepage. Just click the "Load Images" button at the top of the list of images/posts.
- // @match *://*.instagram.com/*
- // @version 0.2.4.4
- // @grant none
- // @run-at document-start
- // ==/UserScript==
-
- (function() {
- 'use strict';
-
- console.log('hi insta scroll');
- // https://www.instagram.com/graphql/query/?query_hash=<hash>&variables={%22shortcode%22:%22<shortcode>%22}
- // https://i.instagram.com/api/v1/usertags/0000000000/feed/?count=12&max_id=0000000000000000000
-
-
- const IMAGES_PER_QUERY = 12;
- const NTH_TO_LAST_IMAGE = 3;
- const HEIGHT_PCT = .8;
- const WIDTH_PCT = .49;
- const VID_VOLUME = 0.02;
- var MODE = 'profile';
- const win = window;
- var userId = win.userId;
- var notLoaded = true;
- const tempDiv = document.createElement('div');
-
- if (win.trustedTypes && win.trustedTypes.createPolicy) { // Feature testing
- win.trustedTypes.createPolicy('default', {
- createHTML: (str) => str
- });
- }
-
- function pickMode() {
- console.log('picking mode');
- if (document.location.href.match(/https:\/\/(www\.)?instagram.com\/?(\?|$|#)/)) {
- MODE = 'home';
- getQueryHash();
- } else if (document.location.href.match(/\/tagged\//)) {
- MODE = 'tagged';
- getUserId();
- } else if (document.location.href.match(/\/explore\//)) {
- MODE = 'explore';
- console.log('"Explore" loading not implemented yet!');
- //getQueryHash();
- } else if (document.location.href.match(/https:\/\/(www\.)?instagram.com\/p\//)) {
- MODE = 'post';
- } else {
- MODE = 'profile';
- getUserId();
- }
- console.log('MODE', MODE);
- }
-
- function getUserId() {
- //console.log('getUserId');
- userId = userId || document.body.innerHTML.match(/profilePage_(\d+)/)?.[1];
- userId = userId || document.body.innerHTML.match(/<a author_id="(\d+)" class="heKAw"/)?.[1];
- if (userId) {
- console.log('userId', userId);
- getQueryHash();
- } else {
- let req = indexedDB.open('redux');
- req.onsuccess = function(evt) {
- console.log('req evt', evt);
- let db = req.result;
- let os = db.transaction("paths")?.objectStore("paths");
- let req2 = db.transaction("paths")?.objectStore("paths")?.get('users.usernameToId');
- req2.onsuccess = function(evt) {
- console.log('db evt', evt);
- let result = req2?.result;
- let userName = document.location.href.match(/https:\/\/(?:www\.)?instagram.com\/([^\/]{3,})/)?.[1];
- console.log('userName', userName);
- userId = result?.[userName];
- if (userId) {
- getQueryHash();
- } else {
- requestUserId();
- console.log("Couldn't find user ID!");
- return;
- }
- };
- };
- }
- }
-
- function requestUserId() {
- let loc = document.location.href;
- if (loc.match(/https:\/\/(?:www\.)?instagram.com\/([^\/]{3,})\/?$/)) {
- loc += '?__a=1';
- fetch(loc)
- .then(resp => {
- return resp.json();
- })
- .then(json => {
- console.log('userId json', json);
- userId = json?.graphql?.user?.id;
- if (userId) {
- getQueryHash();
- } else {
- console.log("Couldn't find user ID!");
- return;
- }
- });
- } else {
- console.log("URL doesn't match a profile page");
- return;
- }
- }
-
- function getQueryHash() {
- console.log('getQueryHash');
- let allScripts = Array.from(document.getElementsByTagName('script'));
- let PostPageContainer = allScripts.find(el => el.src && el.src.match(/ProfilePageContainer.js/));
- let ConsumerLibCommons = allScripts.find(el => el.src && el.src.match(/ConsumerLibCommons.js/));
- let Consumer = allScripts.find(el => el.src && el.src.match(/Consumer.js/));
- let randomJs = allScripts.find(el => el.src && el.src.match(/miOdM842jTv\.js/));
- randomJs = null;
-
- let y8 = '';//allScripts.find(el => el.src && el.src.match(/\/v3iNkn4\/|ODje2xQc3d4\.js|\/y8\//))?.src;
-
- var query_hash = false,
- query_id = false,
- doc_id = false;
-
- if (ConsumerLibCommons) {
- fetch(ConsumerLibCommons.src)
- .then(resp => {
- console.log('resp 1', resp);
- return resp.text();
- })
- .then(text => {
- query_id = text.match(/profilePosts\.byUserId\.get.*?queryId:"([a-f0-9]+)"/)?.[1]; //profilePosts.byUserId.get(n))||void 0===s?void 0:s.pagination},queryId:"e5555555555555555555555555555508"
- let app_id = text.match(/instagramWebDesktopFBAppId='(\d+)'/)?.[1];
- let asbd_id = text.match(/ASBD_ID='(\d+)'/)?.[1];
- query_id && notLoaded && loadImages(query_id, query_hash, doc_id, app_id, asbd_id);
- });
- }
-
- if (PostPageContainer) {
- fetch(PostPageContainer.src)
- .then(resp => {
- console.log('resp 2', resp);
- return resp.text();
- })
- .then(text => {
- query_id = text.match(/profilePosts\.byUserId\.get.*?queryId:"([a-f0-9]+)"/)?.[1]; //profilePosts.byUserId.get(n))||void 0===s?void 0:s.pagination},queryId:"e5555555555555555555555555555508"
- let app_id = text.match(/instagramWebDesktopFBAppId='(\d+)'/)?.[1];
- let asbd_id = text.match(/ASBD_ID='(\d+)'/)?.[1];
- query_id && notLoaded && loadImages(query_id, query_hash, doc_id, app_id, asbd_id);
- });
- }
-
- // l.pagination},queryId:"15b55555555555555555555555555551"
- if (Consumer) {
- fetch(Consumer.src)
- .then(resp => {
- console.log('resp 3', resp);
- return resp.text();
- })
- .then(text => {
- query_id = text.match(/profilePosts\.byUserId\.get[^;]+queryId:\s*"([a-f0-9]+)"/)?.[1]; //text.match(/l\.pagination\},queryId:"([a-f0-9]+)"/); //const s="05555555555555555555555555555554",E="
- let app_id = text.match(/instagramWebDesktopFBAppId='(\d+)'/)?.[1];
- let asbd_id = text.match(/ASBD_ID='(\d+)'/)?.[1];
- query_id && notLoaded && loadImages(query_id, query_hash, doc_id, app_id, asbd_id);
- });
- }
-
- if (randomJs) {
- fetch(randomJs.src)
- .then(resp => {
- console.log('resp 4', resp);
- return resp.text();
- })
- .then(text => {
- doc_id = text.match(/,"polarisUnexpected"\],\(function\(a,b,c,d,e,f,g\)\{"use strict";e=0;f="(\d+)";var h="/)?.[1]; //text.match(/l\.pagination\},queryId:"([a-f0-9]+)"/); //const s="05555555555555555555555555555554",E="
- let app_id = text.match(/instagramWebDesktopFBAppId='(\d+)'/)?.[1];
- app_id = app_id || text.match(/;\s*([a-z])\s*=\s*(['"])(\d+)\2;[^}]*f\.instagramWebDesktopFBAppId\s*=\s*\1;/)?.[3];
- let asbd_id = text.match(/ASBD_ID='(\d+)'/)?.[1];
- asbd_id = asbd_id || text.match(/([a-z]+)="(\d+)";f.ASBD_ID=\1/)?.[2];
- console.log('app_id, asbd_id, doc_id', app_id, asbd_id, doc_id);
- doc_id && notLoaded && loadImages(query_id, query_hash, doc_id, app_id, asbd_id);
- });
- }
-
- //let fberror = win?.require?.('PolarisAPI')?.fetchFBInfo('foo');
- let fberror = null;
- (function checkError() {
- if (fberror?._state == 2) {
- //console.log(typeof fberror?._value, '_value', fberror?._value);
- console.log(fberror);
- y8 = fberror?._value?.fileName;
- y8 = y8 || fberror?._value?.stack?.match(/\((https[^\)]+)\)/)?.[1];
- y8 = y8 || Object.values(Object.values(win.pldmp)?.[0]).find(o => o.refs.length === 4 && o.url.match(/rsrc\.php.*\/[a-z]{2,3}_[A-Z]{2,3}\/[^\/.]{9,15}\.js/));
- if (y8) {
- console.log('y8', y8);
- fetch(y8)
- .then(resp => {
- console.log('resp 1', resp);
- return resp.text();
- })
- .then(text => {
- query_id = text.match(/,"regeneratorRuntime"\],\(function\(a,b,c,d,e,f,g\)\{f=0;var h="([a-f0-9]+)"/)?.[1];
- query_id = query_id || text.match(/,"regeneratorRuntime"\],\(function\(a,b,c,d,e,f,g\)\{"use strict";f=0;var h="([a-f0-9]+)"/)?.[1];
- query_id = query_id || text.match(/,"regeneratorRuntime"\],\(function\(a,b,c,d,e,f,g\)\{"use strict";e=0;f="([a-f0-9]+)"/)?.[1];
- //query_id = query_id || text.match(/([a-z]{1,2})="([a-f0-9]{32})".*queryId:\1/)?.[2];
- if (query_id && notLoaded) {
- loadImages(query_id);
- } else if (notLoaded) {
- loadImages(-1);
- }
- });
- }
- } else {
- //window.setTimeout(checkError, 20);
- if (notLoaded) {
- loadImages(-1);
- }
- }
- })();
- }
-
- // https://www.instagram.com/graphql/query/?query_hash=<queryhash>&variables=%7B%22id%22%3A%22<profle_id>%22%2C%22first%22%3A12%2C%22after%22%3A%22<after_code>%3D%3D%22%7D
- // https://www.instagram.com/graphql/query/?doc_id=<doc_id>&variables={"id":"<profile_id>","after":"<after_code>","first":12}
- function loadImages(query_id=0, query_hash=0, doc_id=0, app_id=936619743392459, asbd_id=129477, after=null) { // asbd_id=198387
- notLoaded = false;
- console.log('MODE', MODE, 'query_id', query_id, 'query_hash', query_hash);
- app_id = app_id || 936619743392459;
- asbd_id = asbd_id || 129477;
-
- // let userId = document.querySelector('head > meta[property="instapp:owner_user_id"]')?.content;
- let imageListQueryUrl;
- let init = { responseType: 'json', credentials: 'include', referrerPolicy: 'no-referrer'};
- // if (MODE == 'profile') {
- // if (!userId) {
- // console.log("Couldn't find user ID!", userId);
- // return;
- // }
- // let queryVariables = {"id": userId, "first": IMAGES_PER_QUERY};
- // if (after) queryVariables.after = after;
- // let queryVariablesString = encodeURIComponent(JSON.stringify(queryVariables));
- // imageListQueryUrl = `https://www.instagram.com/graphql/query/?query_hash=${query_id}&variables=${queryVariablesString}`;
- if (MODE == 'profile') {
- if (!userId) {
- console.log("Couldn't find user ID!", userId);
- return;
- }
- let queryVariables = {"id": userId, "first": IMAGES_PER_QUERY};
- if (after) queryVariables.after = after;
- let queryVariablesString = encodeURIComponent(JSON.stringify(queryVariables));
- //https://i.instagram.com/api/v1/feed/user/696969696/?count=12&max_id=0000000000000000000_696969696
- imageListQueryUrl = `https://i.instagram.com/api/v1/feed/user/${userId}/?count=12`;
- if (after) {
- imageListQueryUrl += `&max_id=${after}`;
- }
-
- init.headers = {
- 'X-IG-App-ID': app_id,
- 'X-ASBD-ID': asbd_id,
- 'X-CSRFToken': win._sharedData?.config?.csrf_token
- };
- console.log(imageListQueryUrl, queryVariablesString, init);
- }
- if (MODE == 'tagged') {
- if (!userId) {
- console.log("Couldn't find user ID!", userId);
- return;
- }
- imageListQueryUrl = `https://i.instagram.com/api/v1/usertags/${userId}/feed/?count=${IMAGES_PER_QUERY}`;
- if (after) {
- imageListQueryUrl += `&max_id=${after}`;
- }
- init.headers = {
- 'X-IG-App-ID': app_id,
- 'X-ASBD-ID': asbd_id,
- 'X-CSRFToken': win._sharedData?.config.csrf_token
- }
- }
- if (MODE == 'home') {
- imageListQueryUrl = 'https://i.instagram.com/api/v1/feed/timeline/';
- //let fd = new FormData();
- let fd = new URLSearchParams();
- fd.set('is_async_ads_rti', 0);
- fd.set('is_async_ads_double_request', 0);
- fd.set('rti_delivery_backend', 0);
- fd.set('is_async_ads_in_headload_enabled', 0);
- fd.set('devide_id', win._sharedData?.device_id);
- if (after) {
- fd.set('max_id', after);
- }
- init.body = fd;
- init.method = 'POST';
- init.headers = {
- 'X-IG-App-ID': app_id,
- 'X-ASBD-ID': asbd_id,
- 'X-CSRFToken': win._sharedData?.config.csrf_token
- }
- }
-
- fetch(imageListQueryUrl, init)
- .then(resp => {
- console.log('json resp', resp);
- return resp.json();
- })
- .then(json => {
- console.log('json', json);
-
- let timelineMedia, end_cursor, mediaList;
-
- timelineMedia = json.data?.user.edge_owner_to_timeline_media;
- end_cursor = timelineMedia?.page_info.end_cursor || json.next_max_id;
- mediaList = timelineMedia?.edges.map(n => n.node) || json.items || json.feed_items?.map(n => n.media_or_ad).filter(n => n);
- console.log('end_cursor', end_cursor, 'media list', mediaList);
-
- let bigContainer = document.querySelector('#igBigContainer');
- // Create the main container if it doesn't exist
- if (!bigContainer) {
- tempDiv.innerHTML = `<div id="igBigContainer" style="background-color: #112;width: 100%;height: 100%;z-index: 999;position: fixed;top: 0;left: 0;overflow: scroll;">
- <div id="igAllImages" style="display:block; text-align:center;"></div></div>`;
- bigContainer = tempDiv.firstElementChild;
- let newBody = document.createElement('body');
- document.body = newBody;
- document.body.appendChild(bigContainer);
- XMLHttpRequest.prototype.send = (evt) => {
- //console.log('No send!');
- };
-
-
- let imgStyle = document.createElement('style');
- imgStyle.type = 'text/css';
- setMaxSize(imgStyle);
- document.body.appendChild(imgStyle);
- window.addEventListener('resize', evt => setMaxSize(imgStyle));
- styleIt();
- }
- let innerContainer = bigContainer.firstElementChild;
-
- console.log(mediaList);
- for (let media of mediaList) {
- addMedia(media, innerContainer);
- }
-
- if (end_cursor) {
- //console.log('end_cursor', end_cursor);
- let triggerImage = document.querySelector('#igAllImages a:nth-last-of-type(3)') || document.querySelector('#igAllImages a:last-of-type');
- bigContainer.onscroll = (evt) => {
- let vh = document.documentElement.clientHeight || window.innerHeight || 0;
- if (triggerImage.getBoundingClientRect().top - 800 < vh) {
- bigContainer.onscroll = null;
- console.log('loading next set of images');
- loadImages(query_id, query_hash, doc_id, app_id, asbd_id, end_cursor);
- }
-
- }
- }
- });
- }
-
- function getBestImage(media) {
- let bestUrl = null;
- let bestSize = 0;
- let list = media?.display_resources || media?.image_versions2?.candidates;;
- for (let m of list) {
- let w = m?.width || m?.config_width || 0;
- let h = m?.height || m?.config_height || 0;
- let size = Math.max(w, h);
- //console.log('size', size, m);
- if (size > bestSize) {
- bestSize = size;
- bestUrl = m?.url || m?.src;
- }
- }
- //best = media?.display_resources?.reduce((a, b) => Math.max(a.width, a.height) > Math.max(b.width, b.height) ? a : b).src;
- return bestUrl;
- }
-
- function addMedia(media, container) {
- //console.log('media', media);
- let shortcode = media?.shortcode || media?.code;
- let medias = media?.edge_sidecar_to_children?.edges?.map(n => n.node) ||
- media?.carousel_media ||
- [ media ];
-
- for (let i = 0; i < medias.length; i++) {
- let m = medias[i];
- let a = document.createElement('a');
- a.href = `https://www.instagram.com/p/${shortcode}/`;
- let un = media?.user?.username || media?.owner?.username;
- let caption = media?.caption?.text || media?.edge_media_to_caption?.edges?.[0]?.node?.text;
- a.title = `${media?.user?.full_name || ''} (${un}) ${caption} [${i+1}]`;
- //console.log('m', m);
- if (m?.is_video || m?.is_unified_video || m?.video_duration) {
- tempDiv.innerHTML = `<div class="vidDiv"></div>`;
- let vidDiv = tempDiv.firstElementChild;
- let vid = document.createElement('video');
- vid.src = m?.video_url || m?.video_versions?.reduce((a, b) => Math.max(a.width, a.height) > Math.max(b.width, b.height) ? a : b)?.url;
- vid.controls = true;
- vid.volume = VID_VOLUME;
- a.textContent = 'Link';
- vidDiv.appendChild(vid);
- vidDiv.appendChild(a);
- container.appendChild(vidDiv);
- } else if (m?.ad_id || m?.label === 'Sponsored') {
- console.log('Skipping ad', m);
- return;
- } else {
- a.innerHTML += `<img src="${getBestImage(m)}">`;
- container.appendChild(a);
- }
- }
- }
-
- function setMaxSize(userStyle) {
- let vw = document.documentElement.clientWidth || window.innerWidth || 0;
- let vh = document.documentElement.clientHeight || window.innerHeight || 0;
- userStyle.innerHTML = `
- #igAllImages img, #igAllImages video {
- max-height: ${vh * HEIGHT_PCT}px;
- max-width: ${vw * WIDTH_PCT}px;
- }
- `;
- }
-
- function styleIt() {
- let userStyle = document.createElement('style');
- userStyle.type = 'text/css';
- userStyle.innerHTML = `
- #igAllImages video {
- border: green solid 2px;
- }
- #igAllImages .vidDiv {
- display: inline-block;
- }
- #igAllImages .vidDiv a {
- display: block;
- text-decoration: none;
- margin-top: -5px;
- }
- /*#loadallbutton {
- padding-top: 40px;
- }*/
- `;
- document.body.appendChild(userStyle);
- console.log('styled');
- }
-
- function startUp() {
- (function insertButton() {
- let loadButton = document.querySelector("#loadallbutton");
- let insAt = null;
- if (!loadButton && !document.location.href.includes('instagram.com/p/')) {
- insAt = document.querySelector('div.fx7hk, div[role*=tablist]'); //, .ENC4C, .ZcHy5, ._47KiJ');
- if (insAt) {
- styleIt();
- tempDiv.innerHTML = profileButton;
- loadButton = tempDiv.firstElementChild;
- loadButton.onclick = pickMode;
- insAt.appendChild(loadButton);
- } else {
- //insAt = document.querySelector('article._8Rm4L, article[role="presentation"]')?.parentNode;
- insAt = document.querySelector('._aac4._aac5._aac6._aac7, ._aac4._aac5._aac6');
- insAt = document.querySelector('._aam1._aam2._aam5');
- insAt = document.querySelector('._ab6o._ab6q');
- insAt = document.querySelector('._aalv._aalx._aalz');
- insAt = document.querySelector('._aak6');
- insAt = insAt || document.querySelector('main > div.MxEZm');
- if (insAt) {
- styleIt();
- tempDiv.innerHTML = homeButton;
- loadButton = tempDiv.firstElementChild;
-
- loadButton.onclick = pickMode;
- insAt.prepend(loadButton);
- //insAt.before(loadButton);
- //insAt.after(loadButton);
- //insAt.appendChild(loadButton);
- }
- }
- }
- if (!insAt) {
- window.setTimeout(insertButton, 50);
- }
- })();
- }
-
- const profileButton = `<a aria-selected="false" class="_9VEo1 oajrlxb2 g5ia77u1 qu0x051f esr5mh6w e9989ue4 r7d6kgcz rq0escxv nhd2j8a9 nc684nl6 p7hjln8o kvgmc6g5 cxmmr5t8 oygrvhab hcukyx3x jb3vyjys rz4wbd8a qt6c0cv9 a8nywdso i1ao9s8h esuyzwwr f1sip0of lzcic4wl _aa-z _a6hd" role="tab" tabindex="0" id="loadallbutton"><span class="qzihg"><span class="_08DtY">Load Images</span></span></a>`;
- const homeButton = `<article class="_ab6k _ab6l _ab6m _aatb _aatc _aate _aatf _aath _aati _8Rm4L bLWKA M9sTE _1gNme L_LMM SgTZ1 Tgarh ePUX4" role="presentation" tabindex="-1" style="cursor: pointer;" id="loadallbutton">
- <div class="_ab8w _ab94 _ab99 _ab9h _ab9m _ab9p qF0y9 Igw0E IwRSH YBx95 _4EzTm" style="max-height: inherit; max-width: inherit;">
- <div class="_aasi _aasj UE9AK">
- <div class="_ab8w _ab94 _ab97 _ab9i _ab9k _ab9p qF0y9 Igw0E rBNOH CcYR1 ybXk5 _4EzTm">
- <header class="_aaqw _aaqx Ppjfr">
- <div class="_aap6 _aap7 _aapa Jv7Aj mArmR pZp3x">
- <div class="_aarf _aarg _aaqq RR-M- mrq0Z" aria-disabled="true" role="button" tabindex="-1">
- <svg aria-label="" class="_8-yf5" color="#262626" fill="#262626" role="img" width="22" height="22" viewBox="0 0 24 20">
- <rect fill="none" height="18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="18" x="3" y="3"></rect>
- <line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="9.015" x2="9.015" y1="3" y2="21"></line>
- <line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="14.985" x2="14.985" y1="3" y2="21"></line>
- <line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="21" x2="3" y1="9.015" y2="9.015"></line>
- <line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" x1="21" x2="3" y1="14.985" y2="14.985"></line>
- </svg>
- </div>
- </div>
- <div class="_aaqy _aaq- o-MQd z8cbW">
- <div class=" _aar1 RqtMr">
- <div class="_aaqt e1e1d">
- <div class="_aacl _aaco _aacw _aacx _aad6 _aade">
- <span class="_aap6 _aap7 _aap8 Jv7Aj mArmR MqpiF"><a class="oajrlxb2 g5ia77u1 qu0x051f esr5mh6w e9989ue4 r7d6kgcz rq0escxv nhd2j8a9 nc684nl6 p7hjln8o kvgmc6g5 cxmmr5t8 oygrvhab hcukyx3x jb3vyjys rz4wbd8a qt6c0cv9 a8nywdso i1ao9s8h esuyzwwr f1sip0of lzcic4wl _acan _acao _acat _acaw _a6hd sqdOP yWX7d _8A5w5 ZIAjV" tabindex="0">Load Images</a></span>
- </div>
- </div>
- </div>
- </div>
- </header>
- </div>
- </div>
- </div>
- </article>
- `;
- startUp();
-
- })();