Creates a scrollable wall of full-size images from any user's instagram page. Just click the "Load Images" button at the top.
// ==UserScript==
// @name Instagram full-size media scroll wall
// @author deltabravozulu + driver8
// @description Creates a scrollable wall of full-size images from any user's instagram page. Just click the "Load Images" button at the top.
// @include /^https?://www\.instagram\.com/[\s\S\w\W\d\D]+$/
// @exclude https://www.instagram.com/p/*
// @exclude https://instagram.com/p/*
// @exclude https://www.instagram.com/
// @exclude https://instagram.com/
// @version 0.2.0[deltabravozulu]
// @grant none
// @namespace https://greasyfork.org/users/774364
// ==/UserScript==
//readd to user script later after generating feed wall
// @match *://*.instagram.com/*
(function () {
"use strict";
console.log("hi insta scroll");
// https://www.instagram.com/graphql/query/?query_hash=<hash>&variables={%22shortcode%22:%22<shortcode>%22}
const IMAGES_PER_QUERY = 12;
const NTH_TO_LAST_IMAGE = 3;
const HEIGHT_PCT = 0.8;
const WIDTH_PCT = 0.49;
const VID_VOLUME = 0.02;
let m = document.body.innerHTML.match(/profilePage_(\d+)/);
var userId = m && m[1];
var notLoaded = true;
function getQueryHash() {
let allScripts = Array.from(document.getElementsByTagName("script"));
let PostPageContainer = allScripts.find(
(el) => el.src && el.src.match(/ProfilePageContainer.js/)
);
let FeedPageContainer = allScripts.find(
(el) => el.src && el.src.match(/FeedPageContainer.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/)
);
//NotificationLandingPage.js
var query_hash = false,
query_id = false;
if (typeof ConsumerLibCommons !== "undefined") {
console.log("ConsumerLibCommons is defined");
fetch(ConsumerLibCommons.src)
.then((resp) => {
console.log("resp 1", resp);
return resp.text();
})
.then((text) => {
let m = text.match(
/profilePosts\.byUserId\.get.*?queryId:"([a-f0-9]+)"/
//profilePosts.byUserId.get(n))||void 0===s?void 0:s.pagination},queryId:"e5555555555555555555555555555508"
);
console.log("queryId m", m);
query_id = m && m[1];
query_id && notLoaded && loadImages(query_id, query_hash);
// query_id && query_hash && loadImages(query_id, query_hash);
});
}
if (typeof PostPageContainer !== "undefined") {
console.log("PostPageContainer is defined");
fetch(PostPageContainer.src)
.then((resp) => {
console.log("resp 1", resp);
return resp.text();
})
.then((text) => {
let m = text.match(
/profilePosts\.byUserId\.get.*?queryId:"([a-f0-9]+)"/
); //profilePosts.byUserId.get(n))||void 0===s?void 0:s.pagination},queryId:"e5555555555555555555555555555508"
console.log("queryId m", m);
query_id = m && m[1];
query_id && notLoaded && loadImages(query_id, query_hash);
// query_id && query_hash && loadImages(query_id, query_hash);
});
}
if (typeof FeedPageContainer !== "undefined") {
console.log("FeedPageContainer is defined");
fetch(FeedPageContainer.src)
.then((resp) => {
console.log("resp 1", resp);
return resp.text();
})
.then((text) => {
let m = text.match(
/profilePosts\.byUserId\.get.*?queryId:"([a-f0-9]+)"/
); //profilePosts.byUserId.get(n))||void 0===s?void 0:s.pagination},queryId:"e5555555555555555555555555555508"
console.log("queryId m", m);
query_id = m && m[1];
query_id && notLoaded && loadImages(query_id, query_hash);
// query_id && query_hash && loadImages(query_id, query_hash);
});
}
// l.pagination},queryId:"15b55555555555555555555555555551"
if (typeof Consumer !== "undefined") {
console.log("Consumer is defined");
fetch(Consumer.src)
.then((resp) => {
console.log("resp 1", resp);
return resp.text();
})
.then((text) => {
//let m = text.match(/l\.pagination\},queryId:"([a-f0-9]+)"/); //const s="05555555555555555555555555555554",E="
let m = text.match(
/profilePosts\.byUserId\.get[^;]+queryId:\s*"([a-f0-9]+)"/
);
console.log("queryId m", m);
query_id = m && m[1];
query_id && notLoaded && loadImages(query_id, query_hash);
});
}
}
// fetch(Consumer.src)
// .then(resp => {
// console.log('resp 1', resp);
// return resp.text();
// })
// .then(text => {
// let m = text.match(/const s="([a-f0-9]+)",E="/); //const s="05555555555555555555555555555554",E="
// m = m || text.match(/var u="([a-f0-9]+)",s="/);
// console.log('query_hash m', m);
// query_hash = m && m[1];
// query_hash && query_id && loadImages(query_id, query_hash);
// });
// 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
function loadImages(query_id, query_hash, after) {
notLoaded = false;
console.log("id", query_id, "hash", query_hash);
// let userIdMetaTag = document.querySelector('head > meta[property="instapp:owner_user_id"]');
// let userId = userIdMetaTag && userIdMetaTag.content;
let m = document.body.innerHTML.match(/profilePage_(\d+)/);
userId = userId || (m && m[1]);
if (!userId) return;
let queryVariables = { id: userId, first: IMAGES_PER_QUERY };
//et queryVariables = { "id":"123456789","first":12 };
if (after) queryVariables.after = after;
let queryVariablesString = encodeURIComponent(
JSON.stringify(queryVariables)
);
let imageListQueryUrl = `https://www.instagram.com/graphql/query/?query_hash=${query_id}&variables=${queryVariablesString}`;
fetch(imageListQueryUrl, { responseType: "json" })
.then((resp) => {
console.log("resp 1", resp);
return resp.json();
})
.then((json) => {
console.log("json", json);
let timelineMedia = json.data.user.edge_owner_to_timeline_media;
let end_cursor = timelineMedia.page_info.end_cursor;
let mediaList = timelineMedia.edges.map((n) => n.node);
console.log("media list", mediaList);
let bigContainer = document.querySelector("#igBigContainer");
// Create the main container if it doesn't exist
if (!bigContainer) {
let tempDiv = document.createElement("div");
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;
document.body.innerHTML = "";
document.body.appendChild(bigContainer);
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;
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)"
);
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, end_cursor);
}
};
}
});
}
function getBestImage(media) {
return media.display_resources.reduce((a, b) =>
a.width > b.width ? a : b
).src;
}
function addMedia(media, container) {
let shortcode = media.shortcode;
let medias = media.edge_sidecar_to_children
? media.edge_sidecar_to_children.edges.map((n) => n.node)
: [media];
for (let m of medias) {
let a = document.createElement("a");
a.href = `https://www.instagram.com/p/${shortcode}/`;
if (m.is_video) {
let vid = document.createElement("video");
vid.src = m.video_url;
vid.controls = true;
vid.volume = VID_VOLUME;
a.textContent = "Link";
container.appendChild(vid);
container.appendChild(a);
} 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;
`;
document.body.appendChild(userStyle);
}
function startUp() {
"use strict";
var svgImageWallBtn = `<img height="24" width="24" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDAwIDQwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMTc4LjcgMGMxMS45IDMuOCAxNS4zIDEyLjMgMTUuMyAyNC4zLS4zIDEwMi43LS4yIDIwNS41LS4yIDMwOC4yIDAgMTQuMi03LjQgMjEuNy0yMS41IDIxLjdoLTE1MC45Yy0xNCAwLTIxLjQtNy40LTIxLjQtMjEuNHYtMjQ1LjgtNC42aDEyLjd2MjE3LjhjMi0xLjUgMy41LTIuNCA0LjYtMy41IDI0LjktMjQuNiA0OS43LTQ5LjIgNzQuNi03My44IDExLjgtMTEuNiAyMy43LTIzLjEgMzUuNS0zNC44IDYuNi02LjUgOS42LTYuNiAxNi4zLjEgMTEuMSAxMSAyMi4yIDIyLjEgMzMuMiAzMy4zLjcuNyAxLjIgMS43IDIuOCAyIC4xLTEuMi4yLTIuNC4yLTMuNiAwLTY2IDAtMTMyIC4xLTE5OCAwLTcuMS0yLjEtOS4xLTkuMi05LjFoLTE0OC45Yy03IDAtOS4yIDIuMy05LjIgOS4zdjIyaC0xMi4yYy4yLTEwLjEtLjUtMjAuNC41LTMwLjQuNy03LjMgNi45LTExLjEgMTMuMy0xMy43em0xLjQgMjQ2LjJjLTE1LjctMTctMjkuOC0zMi40LTQ0LjEtNDcuOC00MS42IDQwLjktODIuMyA4MC45LTEyMy4yIDEyMS4xdjEzLjZjMCA1LjcgMi40IDguMyA4LjIgOC4zIDUwLjUuMSAxMDEuMSAwIDE1MS42IDAgNC44IDAgNy40LTIuNSA3LjQtNy4zLjItMzAuNC4xLTYwLjcuMS04Ny45em0zOSA4LjNjOS41IDEwLjggMTcuNCAxOS44IDI1LjMgMjguOCAxLjEtLjggMS41LTEuMSAxLjktMS40IDEzLTEyLjcgMjUuOS0yNS40IDM4LjktMzguMSAxOC44LTE4LjUgMzcuNi0zNy4xIDU2LjUtNTUuNyA0LjUtNC41IDguNi00LjUgMTMuMi4xIDEwLjMgMTAuMiAyMC41IDIwLjQgMzEuMyAzMS4xdi05MS4yaDEzLjh2MjUyYzAgMTEuNC04LjUgMTkuOC0xOS45IDE5LjhoLTE1NC44Yy0xMC44IDAtMTktOC4yLTE5LTE5di0zMTYuNWMwLTEwLjYgOC4yLTE4LjggMTguNy0xOC44aDE1NS4yYzExLjIgMCAxOS43IDguNSAxOS44IDE5LjYuMSA4LjEgMCAxNi4zIDAgMjQuNmgtMTMuN3YtMjIuOWMwLTYuMy0yLjItOC41LTguNi04LjVoLTE1MC4xYy01LjkgMC04LjYgMi4yLTguNiA3LjMgMCA2NC4yLjEgMTI4LjIuMSAxODguOHptMzYuMyAzN2MxNy4zIDE4LjEgMzQuMyAzNS45IDUxIDUzLjQtMi43IDIuOS01LjQgNS44LTguMyA5LTI2LjItMjUuNy01Mi4yLTUxLjItNzkuMS03Ny42djEwMS4xYzAgNy45IDEuOCA5LjggOS43IDkuOGgxNDguNWM3IDAgOS4xLTIuMSA5LjEtOS4ydi04Ni41LTQ5LjhjLTEzLjktMTUuMS0yNS45LTI4LjMtMzgtNDEuNC0zMS43IDMxLjEtNjIuNiA2MS41LTkyLjkgOTEuMnoiLz48cGF0aCBkPSJtNzcuOCAzMS41YzIzLjQtLjMgNDQuMiAxOS40IDQ1IDQxLjUuOSAyNi45LTE4LjggNDYuNi00My45IDQ3LjItMjUuNC42LTQ2LjMtMTguNi00Ni41LTQyLjItLjItMjYuOSAxOC42LTQ2LjIgNDUuNC00Ni41em0tMzIuNSA0NC43Yy4xIDE2LjkgMTQuOCAzMS40IDMyLjIgMzEgMTcuMy0uNCAzMi4xLTEyLjYgMzIuMS0zMS40IDAtMTkuMS0xNS45LTMxLjEtMzIuMy0zMS4zLTE3LjUtLjEtMzIuMSAxNC42LTMyIDMxLjd6bTMwMi40LTV2MTIuNGgtODkuOXYtMTIuNHptMzguOSAzMS42aDEzLjF2MTIuNGgtMTMuMXptLTM4Ni40LTMzLjV2LTEyLjJoMTIuNHYxMi4yem0zNzMuNSAxNC40aC0xMi40di0xMi40aDEyLjR6Ii8+PC9zdmc+"></img>`;
var checkExistTimer = setInterval(function () {
let homeSelector = "nav span img";
let menuAndStorySelector = "header button > span";
let profileSelector = "header section svg circle";
// check profile
if (document.getElementsByClassName("imagewall-btn").length === 0) {
if (document.querySelector(profileSelector)) {
addCustomBtnProfile(
document.querySelector(profileSelector),
"black",
append2Header
);
} else if (document.querySelector(menuAndStorySelector)) {
} else if (document.querySelector(homeSelector)) {
addCustomBtnHome(
document.querySelector(homeSelector),
"black",
append2Header
);
}
}
}, 500);
function append2Header(node, btn) {
node.parentNode.parentNode.parentNode.appendChild(
btn,
node.parentNode.parentNode
);
}
function addCustomBtnProfile(node, iconColor, appendNode) {
// add button and set onclick handler
let imageWallBtn = createCustomBtn(
svgImageWallBtn,
iconColor,
"imagewall-btn",
"16px",
"8px"
);
appendNode(node, imageWallBtn);
}
function addCustomBtnHome(node, iconColor, appendNode) {
// add button and set onclick handler
let imageWallBtn = createCustomBtn(
svgImageWallBtn,
iconColor,
"imagewall-btn Fifk5",
"16px",
"inherit"
);
appendNode(node, imageWallBtn);
}
function createCustomBtn(
svg,
iconColor,
className,
marginLeft,
marginTop
) {
let newBtn = document.createElement("div");
newBtn.innerHTML = svg.replace("%color", iconColor);
newBtn.setAttribute("class", "custom-btn " + className);
newBtn.setAttribute("target", "_blank");
newBtn.setAttribute(
"style",
"cursor: pointer;margin-left: " +
marginLeft +
";margin-top: " +
marginTop +
";"
);
newBtn.onclick = getQueryHash;
if (className.includes("imagewall-btn")) {
newBtn.setAttribute("title", "Load Image Wall");
}
return newBtn;
}
}
startUp();
})();