☰

Instagram Downloader - HISHTNIK

Download Instagram photos and videos from posts.

// ==UserScript==
// @name         Instagram Downloader - HISHTNIK
// @namespace    http://tampermonkey.net/
// @license      MIT
// @version      1.6
// @description  Download Instagram photos and videos from posts.
// @author       You
// @include      /^http.*:\/\/(?:www\.)?instagram\.com\/.*$/
// @icon         https://www.google.com/s2/favicons?domain=instagram.com
// @grant        GM_download
// ==/UserScript==

(function() {
    'use strict';

    // VIDEO DOWNLOADS TEMPORARILY NOT WORKING. ALTERNATIVE:
         // Firefox addon => Video Download Helper (with companion app installed)
         // Video Download Helper > Settings > Behaviour > Download Processor > Companion App (make sure you save)
         // To download videos, copy the link and open it in a new tab. Then click on the Video Download Helper Icon

    // Gradual download progress with videos: Tampermonkey > Settings > Advanced > Download Mode > Browser API

    /* Originally developed in Firefox but works in Chromium-based browsers too.
    Every 300 milliseconds, the script attempts to add buttons to the elements inside of a post
    SAVED_VIDEO_DOWNL_LINKS_OBJ stores the download links of fetched videos (so they don't have to be fetched again): {thumbFilename:videoDownloadLink, ....} (could reach limit faster)
         Saved video links are search based on the thumbnail filename (that on page vs saved)
    Photos are downloaded from their src attribute of the <img> element on page (since that seems to be the highest quality one) */

    let BTNS_WRAPPER_HTML_CLASS_STR = "hishtnikBtnsWrapper", BTN_HTML_CLASS_STR = `hishtnikBtn`, DOWNL_VIDEO_BTN_HTML_CLASS_STR = `hishtnikDownlVidBtn`, DOWNL_PHOTO_BTN_HTML_CLASS_STR = `hishtnikDownlPhotoBtn`, DOWNL_THUMB_BTN_HTML_CLASS_STR = `hishtnikDownlThumbBtn`, OPEN_THUMB_BTN_HTML_CLASS_STR = `hishtnikOpenThumbBtn`;
    let POST_MEDIA_ELEMS_CSS_SELECTOR_STR = `video, div[role="button"] img[style="object-fit: cover;"]`, POST_OP_USERNAME_CSS_SELECTOR_STR = `.UE9AK .Jv7Aj.mArmR.MqpiF`;

    let STYLE_HTML_STR =
        `<style>
            /* Download / Open thumb buttons */
            .${BTNS_WRAPPER_HTML_CLASS_STR} {display: flex !important; width: 100%; flex-direction: row !important; justify-content: space-between; z-index:9999999; position:absolute !important; top:0;}
            .${BTN_HTML_CLASS_STR} {width: auto; cursor:pointer; padding:5px; font-weight:bold; color:#ff2d2d; background:black; border:1px solid;}
            /* add borders and background to albums labers (easier to see) */
            .CzVzU > div, ._aatp > div {padding: 5px !important;}
            .CzVzU > div, ._aatp > div, button[aria-label="Go Back"], button[aria-label="Next"] {background: #951111 !important; border: 2px solid #979085 !important;}
        </style`;

    let SAVED_VIDEO_DOWNL_LINKS_OBJ = {}, MAX_SAVED_VIDEO_LINKS_INT = 100;

    run();
    async function run()
    {
        document.querySelector("html").appendChild(str_to_html_elem(STYLE_HTML_STR));
        document.addEventListener("dblclick", (event)=>{event.stopPropagation(); event.preventDefault();}, true); // prevent double click like on post items
        document.addEventListener("click", click_handler);
        while(1==1) {if (window.location.href.match(/^.+\/p\/.+$/)) add_btns(); await delay(300);}
    }

    function add_btns()
    {
        let htmlMediaElemsInPost = document.querySelectorAll(POST_MEDIA_ELEMS_CSS_SELECTOR_STR);

        for (let htmlMediaElem of htmlMediaElemsInPost) {
            let htmlMediaElemWrapper = htmlMediaElem.parentElement; // the buttons wrapper elem will become a sibiling to the media elem
            if (htmlMediaElemWrapper.querySelector(`.${BTNS_WRAPPER_HTML_CLASS_STR}`)) continue; // already added
            let btnsHtmlStr = ``;
            if (htmlMediaElem.nodeName == "VIDEO") {
                btnsHtmlStr += `<button class="${BTN_HTML_CLASS_STR} ${DOWNL_VIDEO_BTN_HTML_CLASS_STR}">DOWNL VIDEO</button>`;
                btnsHtmlStr += `<button class="${BTN_HTML_CLASS_STR} ${DOWNL_THUMB_BTN_HTML_CLASS_STR}">DOWNL THUMB</button>`;
                btnsHtmlStr += `<button class="${BTN_HTML_CLASS_STR} ${OPEN_THUMB_BTN_HTML_CLASS_STR}">OPEN THUMB</button>`;
            }
            else if (htmlMediaElem.nodeName == "IMG") {
                btnsHtmlStr += `<button class="${BTN_HTML_CLASS_STR} ${DOWNL_PHOTO_BTN_HTML_CLASS_STR}">DOWNL PHOTO</button>`;
            }
            btnsHtmlStr = `<div class="${BTNS_WRAPPER_HTML_CLASS_STR}">` + btnsHtmlStr + `</div>`;
            htmlMediaElemWrapper.appendChild(str_to_html_elem(btnsHtmlStr));
        }
    }

    function click_handler(event)
    {
        if (!event.target.classList.contains(BTN_HTML_CLASS_STR)) return;
        let htmlBtnElemClicked = event.target;
        if (htmlBtnElemClicked.classList.contains(OPEN_THUMB_BTN_HTML_CLASS_STR)) open_thumb(htmlBtnElemClicked);
        else if (htmlBtnElemClicked.classList.contains(DOWNL_THUMB_BTN_HTML_CLASS_STR)) downl_img("thumb", htmlBtnElemClicked);
        else if (htmlBtnElemClicked.classList.contains(DOWNL_PHOTO_BTN_HTML_CLASS_STR)) downl_img("photo", htmlBtnElemClicked);
        else if (htmlBtnElemClicked.classList.contains(DOWNL_VIDEO_BTN_HTML_CLASS_STR)) downl_video(htmlBtnElemClicked);
    }

    function open_thumb(htmlBtnElem)
    {
        let htmlMediaElemWrapper = htmlBtnElem.parentElement.parentElement;
        try {window.open(htmlMediaElemWrapper.querySelector("video").getAttribute("poster"))}
        catch(err) {alert("Failed to open thumbnail.")}
    }

    function downl_img(typeOfImgStr, htmlBtnElem)
    {
        let downlLinkStr;
        try {
            let htmlMediaElemWrapper = htmlBtnElem.parentElement.parentElement;
            downlLinkStr = (typeOfImgStr == "photo") ? htmlMediaElemWrapper.querySelector("img").src : htmlMediaElemWrapper.querySelector("video").poster;
        }
        catch(err) {alert("Couldn't get download link. Download failed."); return;}
        let authorStr = get_post_author();
        if (!authorStr) alert("Downloaded filename will not have the author's username due to an error. Please inform developer.");
        GM_download(downlLinkStr, generate_cust_filename(authorStr, downlLinkStr));
    }

    async function downl_video(htmlBtnElem)
    {
        let authorStr = get_post_author(); // author name is defined here first, in case the post is closed while fetching
        let targetVidThumbFilenameStr;
        try {targetVidThumbFilenameStr = get_filename_from_url(htmlBtnElem.parentElement.parentElement.querySelector("video").poster)}
        catch(err) {alert("Error initializing the video download process. Download failed."); return;}
        let downlLinkStr = SAVED_VIDEO_DOWNL_LINKS_OBJ[targetVidThumbFilenameStr] || await get_newly_fetched_download_link();
        if (!downlLinkStr) {alert("Error getting video download link. Download failed."); return;}
        if (!authorStr) alert("Downloaded filename will not have the author's username due to an error. Please inform developer.");
        GM_download(downlLinkStr, generate_cust_filename(authorStr, downlLinkStr));

        async function get_newly_fetched_download_link() {
            try {
                let fetchResponseObj = await fetch(window.location.href + "?__a=1");

                let postInfoObj = (await fetchResponseObj.json())["items"][0]; // get the data from the response and advance to the meaningful part
                let mediaInfosArr = postInfoObj["carousel_media"] || [postInfoObj]; // album test - if not, put it in array so you can loop

                for (let mediaInfoObj of mediaInfosArr) {
                    try {
                        let videoSrcStr = mediaInfoObj["video_versions"][0]["url"]; // the first version seems to be the highest quality one
                        let thumbFilenameStr = get_filename_from_url(mediaInfoObj["image_versions2"]["candidates"][0]["url"]);
                        if (Object.keys(SAVED_VIDEO_DOWNL_LINKS_OBJ).length == MAX_SAVED_VIDEO_LINKS_INT) delete SAVED_VIDEO_DOWNL_LINKS_OBJ[Object.keys(SAVED_VIDEO_DOWNL_LINKS_OBJ)[0]];
                        SAVED_VIDEO_DOWNL_LINKS_OBJ[thumbFilenameStr] = videoSrcStr;
                    }
                    catch(err){}
                }

                return SAVED_VIDEO_DOWNL_LINKS_OBJ[targetVidThumbFilenameStr];
            }
            catch(err) {return false}
        }
    }

    function delay(durationMs) {return new Promise(resolve => setTimeout(resolve, durationMs));}
    function get_post_author()
    {
        if (document.title.includes("@")) { // within profile
            try {return document.title.split("@").pop().split(")")[0].split(" ")[0]}
            catch(err) {return ""}
        }
        else { // individual post opened
            try {return document.querySelector(POST_OP_USERNAME_CSS_SELECTOR_STR).innerText.trim()}
            catch(err) {return ""}
        }
    }
    function generate_cust_filename(authorStr, downlLinkStr)
    {
        if (authorStr) authorStr += "_";
        return authorStr + get_filename_from_url(downlLinkStr);
    }
    function get_filename_from_url(url)
    {
        let filename = url.split("?")[0].split("/").pop();
        return filename.replace(/\.jpg\.webp$|\.webp$/, ".jpg"); // change .webp to .jpg. Also helps with inconsistencies between fetched thumb and thumbs on page
    }
    function str_to_html_elem(str)
    {
        let htmlWrapperElem = document.createElement("div");
        htmlWrapperElem.innerHTML = str;
        if (htmlWrapperElem.childElementCount == 1) htmlWrapperElem = htmlWrapperElem.firstChild; // only keep the wrapper if there are multiple direct children
        return htmlWrapperElem;
    }
})();