☰

InstaDecrapper

Replaces Instagram pages with their decrapped versions (only media & titles)

// ==UserScript==
// @name         InstaDecrapper
// @version      1.3.2
// @description  Replaces Instagram pages with their decrapped versions (only media & titles)
// @author       GreasyPangolin
// @license      MIT
// @match        https://www.instagram.com/*
// @match        https://instagram.com/*
// @match        http://localhost:8000/*
// @run-at       document-start
// @grant        none
// @namespace https://greasyfork.org/users/1448662
// ==/UserScript==

function isDebug() {
    return window.location.href.includes('localhost')
}

async function fixture(variables) {
    let url
    if (variables?.shortcode) {
        url = `http://localhost:8000/post_${variables.shortcode}.json`
    } else if (variables?.id) {
        url = `http://localhost:8000/next_page.json`
    } else {
        url = `http://localhost:8000/profile.json`
    }

    const resp = await fetch(url)
    if (!resp.ok) {
        throw new Error(`Fixture fetch failed with status ${resp.status}: ${await resp.text()}`)
    }

    return await resp.json()
}

function filterNonNull(obj) {
    return Object.fromEntries(
        Object.entries(obj).filter(([_, v]) => v != null)
    );
}

function extractDataAndRemoveScripts(runId) {
    // Extract CSRF token and App ID from scripts
    let csrfToken = ''
    let appId = ''
    let profileId = null

    var scripts = document.querySelectorAll('script')

    for (var i = 0; i < scripts.length; i++) {
        // scan for the script that contains the CSRF token and App ID
        const csrfMatch = scripts[i].textContent.match(/"csrf_token":"([^"]+)"/)
        const appIdMatch = scripts[i].textContent.match(/"app_id":"([^"]+)"/)
        const profileIdMatch = scripts[i].textContent.match(/"profile_id":"([^"]+)"/)

        if (csrfMatch && csrfMatch[1]) {
            csrfToken = csrfMatch[1]
            console.log(`[Run ${runId}] Found CSRF token: ${csrfToken} `)
        }

        if (appIdMatch && appIdMatch[1]) {
            appId = appIdMatch[1]
            console.log(`[Run ${runId}] Found App ID: ${appId} `)
        }

        if (profileIdMatch && profileIdMatch[1]) {
            profileId = profileIdMatch[1]
            console.log(`[Run ${runId}] Found profile ID: ${profileId} `)
        }

        // we don't need this script anymore
        scripts[i].remove()

        if (csrfToken && appId && profileId) {
            return {
                secrets: { csrfToken, appId },
                profileId,
            }
        }
    }

    // secrets found but profile ID is missing (possibly a post page)
    if (csrfToken && appId) {
        return {
            secrets: { csrfToken, appId },
            profileId: null,
        }
    }

    console.log(`[Run ${runId}] Could not find CSRF token and App ID`)

    return {
        secrets: null,
        profileId: null,
    }
}

function renderProfileHeader(user) {
    const header = document.createElement('div')
    header.style.cssText = 'display: flex; align-items: center; padding: 20px;'

    const info = document.createElement('div')
    info.style.display = 'flex'
    info.style.alignItems = 'start'

    const profilePic = document.createElement('img')
    profilePic.src = user.profilePicUrl
    profilePic.width = 64
    profilePic.height = 64
    profilePic.style.borderRadius = '50%'
    profilePic.style.marginRight = '20px'

    info.appendChild(profilePic)

    const textInfo = document.createElement('div')

    const nameContainer = document.createElement('div')
    nameContainer.style.display = 'flex'
    nameContainer.style.alignItems = 'center'
    nameContainer.style.gap = '5px'

    const name = document.createElement('h1')
    name.textContent = user.fullName
    name.style.margin = '0 0 10px 0'
    name.style.fontFamily = 'sans-serif'
    name.style.fontSize = '18px'

    nameContainer.appendChild(name)

    if (user.isVerified) {
        const checkmark = document.createElement('span')
        checkmark.textContent = '✓'
        checkmark.style.margin = '0 0 10px'
        checkmark.style.color = '#00acff'
        checkmark.style.fontSize = '18px'
        checkmark.style.fontWeight = 'bold'
        nameContainer.appendChild(checkmark)
    }

    textInfo.appendChild(nameContainer)

    if (user.username) {
        const username = document.createElement('a')

        username.href = '/' + user.username
        username.textContent = '@' + user.username
        username.style.margin = '0 0 10px 0'
        username.style.fontFamily = 'sans-serif'
        username.style.fontSize = '14px'
        username.style.textDecoration = 'none'
        username.style.color = '#00376b'
        username.target = '_blank'

        textInfo.appendChild(username)
    }

    if (user.biography) {
        const bio = document.createElement('p')

        bio.textContent = user.biography
        bio.style.margin = '0 0 10px 0'
        bio.style.whiteSpace = 'pre-line'
        bio.style.fontFamily = 'sans-serif'
        bio.style.fontSize = '14px'

        textInfo.appendChild(bio)
    }

    if (user.bioLinks && user.bioLinks.length > 0) {
        const links = document.createElement('div')

        user.bioLinks.forEach(link => {
            const a = document.createElement('a')
            a.href = link.url
            a.textContent = link.title
            a.target = '_blank'
            a.style.display = 'block'
            a.style.fontFamily = 'sans-serif'
            a.style.fontSize = '14px'
            links.appendChild(a)
        })

        textInfo.appendChild(links)
    }

    info.appendChild(textInfo)

    header.appendChild(info)

    document.body.appendChild(header)
}

function parseMediaNode(media) {
    if (!media) return []; // Handle cases where media node might be null or undefined

    const date = new Date(media.taken_at_timestamp * 1000).toISOString().slice(0, 19).replace('T', ' ')
    const title = media.edge_media_to_caption?.edges[0]?.node.text || "No title"
    const shortcode = media.shortcode

    // Handle sidecar (carousel) posts
    if ((media.__typename === 'GraphSidecar' || media.__typename === 'XDTGraphSidecar') && media.edge_sidecar_to_children?.edges) {
        return media.edge_sidecar_to_children.edges.map(childEdge => {
            const child = childEdge.node
            if (!child) return null; // Skip if child node is invalid
            const isChildVideo = child.__typename === 'GraphVideo' || child.__typename === 'XDTGraphVideo'
            return {
                date: date, // Use parent's date
                title: title, // Use parent's title
                isVideo: isChildVideo,
                videoUrl: isChildVideo ? child.video_url : null,
                imageUrl: child.display_url,
                shortcode: shortcode // Use parent's shortcode
            }
        }).filter(item => item !== null); // Filter out any null items from invalid child nodes
    }
    // Handle single image or video posts
    else {
        const isVideo = media.is_video || media.__typename === 'GraphVideo' || media.__typename === 'XDTGraphVideo'
        return [{
            date: date,
            title: title,
            isVideo: isVideo,
            videoUrl: isVideo ? media.video_url : null,
            imageUrl: media.display_url,
            shortcode: shortcode
        }]
    }
}

function renderMedia(mediaItems) {
    const mediaContainer = document.createElement('div')
    mediaContainer.style.display = 'grid'
    mediaContainer.style.gridTemplateColumns = 'repeat(auto-fill, minmax(320px, 1fr))'
    mediaContainer.style.gap = '20px'
    mediaContainer.style.padding = '20px'

    mediaItems.forEach(item => {
        const mediaDiv = document.createElement('div')
        mediaDiv.className = 'media'
        mediaDiv.style.display = 'flex'
        mediaDiv.style.flexDirection = 'column'
        mediaDiv.style.alignItems = 'center'

        if (item.isVideo) {
            const videoElement = document.createElement('video')
            videoElement.controls = true
            videoElement.width = 320

            const source = document.createElement('source')
            source.src = item.videoUrl
            source.type = 'video/mp4'

            videoElement.appendChild(source)
            mediaDiv.appendChild(videoElement)
        } else {
            const imageElement = document.createElement('img')
            imageElement.src = item.imageUrl
            imageElement.width = 320
            imageElement.style.height = 'auto'

            const linkElement = document.createElement('a')
            linkElement.href = item.imageUrl
            linkElement.target = '_blank'

            linkElement.appendChild(imageElement)
            mediaDiv.appendChild(linkElement)
        }

        const dateContainer = document.createElement('div')
        dateContainer.style.display = 'flex'
        dateContainer.style.alignItems = 'center'
        dateContainer.style.justifyContent = 'center'
        dateContainer.style.gap = '10px'
        dateContainer.style.width = '320px'

        const date = document.createElement('p')
        date.textContent = item.date
        date.style.fontFamily = 'sans-serif'
        date.style.fontSize = '12px'
        date.style.margin = '5px 0'

        dateContainer.appendChild(date)

        if (item.shortcode) {
            const postLink = document.createElement('a')
            postLink.href = `/p/${item.shortcode}`
            postLink.textContent = '[post]'
            postLink.style.fontFamily = 'sans-serif'
            postLink.style.fontSize = '12px'
            postLink.style.color = 'blue'
            postLink.style.textDecoration = 'none'
            dateContainer.appendChild(postLink)
        }

        if (item.isVideo) {
            const previewLink = document.createElement('a')
            previewLink.href = item.imageUrl
            previewLink.textContent = '[preview]'
            previewLink.style.fontFamily = 'sans-serif'
            previewLink.style.fontSize = '12px'
            previewLink.style.color = 'blue'
            previewLink.style.textDecoration = 'none'
            dateContainer.appendChild(previewLink)
        }

        mediaDiv.appendChild(dateContainer)

        const title = document.createElement('p')
        title.textContent = item.title
        title.style.fontFamily = 'sans-serif'
        title.style.fontSize = '12px'
        title.style.width = '320px'
        title.style.textAlign = 'center'

        mediaDiv.appendChild(title)
        mediaContainer.appendChild(mediaDiv)
    })

    document.body.appendChild(mediaContainer)
}

function renderLine() {
    const line = document.createElement('hr')
    line.style.margin = '20px 0'
    document.body.appendChild(line)
}


function renderLoadMoreButton(secrets, profileId, pageInfo) {
    let loadMoreButton = document.getElementById('loadMoreBtn')

    // Remove old button
    if (loadMoreButton) {
        loadMoreButton.remove()
    }

    // Add new "Load More" button
    if (pageInfo?.has_next_page && pageInfo.end_cursor) {
        // Create a horizontal line
        renderLine()

        // Create "Load More" button
        loadMoreButton = document.createElement('button')
        loadMoreButton.id = 'loadMoreBtn'
        loadMoreButton.style.cssText = 'display: block; margin: 20px auto; padding: 10px 20px; font-size: 16px; cursor: pointer;'
        document.body.appendChild(loadMoreButton)

        // Update button's state and event listener
        loadMoreButton.textContent = 'Load More'
        loadMoreButton.disabled = false

        // Clone and replace to ensure the event listener is fresh and doesn't stack
        const newButton = loadMoreButton.cloneNode(true)
        loadMoreButton.parentNode.replaceChild(newButton, loadMoreButton)

        newButton.onclick = () => {
            newButton.disabled = true; // Prevent multiple clicks while loading
            newButton.textContent = 'Loading...'
            // Call loadNextPage with the new cursor
            loadNextPage(secrets, profileId, pageInfo.end_cursor)
        }
    }
}

// Helper function for GraphQL API calls
async function fetchGraphQL({ csrfToken, appId }, { variables, doc_id }) {
    if (isDebug()) {
        return fixture(variables)
    }

    const resp = await fetch(`https://www.instagram.com/graphql/query`, {
        "method": "POST",
        "credentials": "include",
        "headers": {
            "User-Agent": "Mozilla/5.0 (X11; Linux x86_64; rv:136.0) Gecko/20100101 Firefox/136.0",
            "Accept": "*/*",
            "Accept-Language": "en-US,en;q=0.5",
            "Content-Type": "application/x-www-form-urlencoded",
            "X-CSRFToken": csrfToken,
            "X-IG-App-ID": appId,
            "Origin": "https://www.instagram.com",
            "Sec-Fetch-Dest": "empty",
            "Sec-Fetch-Mode": "cors",
            "Sec-Fetch-Site": "same-origin",
        },
        "body": new URLSearchParams({
            "av": "0",
            "hl": "en",
            "__d": "www",
            "__user": "0",
            "__a": "1",
            "__req": "a",
            "__hs": "20168.HYP:instagram_web_pkg.2.1...0",
            "dpr": "2",
            "__ccg": "EXCELLENT",
            "fb_api_caller_class": "RelayModern",
            "variables": JSON.stringify(filterNonNull(variables)),
            "server_timestamps": "true",
            "doc_id": doc_id,
        }).toString()
    })

    if (!resp.ok) {
        throw new Error(`GraphQL fetch failed with status ${resp.status}: ${await resp.text()}`)
    }

    return await resp.json()
}

// Helper function for standard Web API calls
async function fetchProfile({ csrfToken, appId }, username) {
    if (isDebug()) {
        return fixture()
    }

    const resp = await fetch(`https://www.instagram.com/api/v1/users/web_profile_info/?username=${username}&hl=en`, {
        method: 'GET',
        credentials: "include",
        headers: {
            "User-Agent": "Mozilla/5.0 (X11; Linux x86_64; rv:136.0) Gecko/20100101 Firefox/136.0",
            "Accept": "*/*",
            "Accept-Language": "en,en-US;q=0.5",
            "X-CSRFToken": csrfToken,
            "X-IG-App-ID": appId,
            "X-IG-WWW-Claim": "0",
            "X-Requested-With": "XMLHttpRequest",
            "Alt-Used": "www.instagram.com",
            "Sec-Fetch-Dest": "empty",
            "Sec-Fetch-Mode": "cors",
            "Sec-Fetch-Site": "same-origin",
            "Pragma": "no-cache",
            "Cache-Control": "no-cache"
        },
        referrer: `https://www.instagram.com/${username}/?hl=en`,
        mode: "cors",
    })

    if (!resp.ok) {
        throw new Error(`API fetch failed with status ${resp.status}: ${await resp.text()}`)
    }

    return await resp.json()
}


async function loadSinglePost(secrets, shortcode) {
    const data = await fetchGraphQL(secrets, {
        doc_id: "8845758582119845",
        variables: {
            "shortcode": shortcode,
            "fetch_tagged_user_count": null,
            "hoisted_comment_id": null,
            "hoisted_reply_id": null
        },
    })

    // Check if media data exists
    if (!data || !data.data || !data.data.xdt_shortcode_media) {
        console.error(`Media data is missing or invalid for post ${shortcode}:`, data)
        document.body.innerHTML = `<p style="color: orange; font-family: sans-serif; padding: 20px;">Could not find media data for post ${shortcode}. It might be private or unavailable.</p>`
        return; // Stop execution
    }

    const media = data.data.xdt_shortcode_media

    // Use the new parsing function
    const mediaItems = parseMediaNode(media)

    renderProfileHeader({
        username: media.owner.username,
        fullName: media.owner.full_name,
        profilePicUrl: media.owner.profile_pic_url,
        isVerified: media.owner.is_verified
    })

    renderMedia(mediaItems)
}


// Refactored loadNextPage
async function loadNextPage(secrets, profileId, after) {
    const data = await fetchGraphQL(secrets, {
        doc_id: "7950326061742207",
        variables: {
            "id": profileId,
            "after": after,
            "first": 12 // Number of posts to fetch per page
        },
    })

    // Parse `data` and fill `mediaItems` using the parsing function
    const mediaEdges = data?.data?.user?.edge_owner_to_timeline_media?.edges
    const mediaItems = mediaEdges ? mediaEdges.flatMap(edge => parseMediaNode(edge.node)) : []

    if (!mediaEdges) {
        console.error("Could not find media edges in the response data:", data)
    }

    renderMedia(mediaItems)

    // Handle pagination
    const pageInfo = data?.data?.user?.edge_owner_to_timeline_media?.page_info
    renderLoadMoreButton(secrets, profileId, pageInfo)
}

async function loadFullProfile(secrets, username) {
    const data = await fetchProfile(secrets, username)

    // Check if user data exists
    if (!data || !data.data || !data.data.user) {
        console.error("Profile data is missing or invalid:", data)
        document.body.innerHTML = `<p style="color: orange; font-family: sans-serif; padding: 20px;">Could not find profile data for ${username}. The profile might be private or does not exist.</p>`
        return; // Stop execution
    }

    // Header
    const user = data.data.user

    renderProfileHeader({
        fullName: user.full_name,
        biography: user.biography,
        profilePicUrl: user.profile_pic_url_hd || user.profile_pic_url, // Fallback for profile pic
        bioLinks: user.bio_links,
        isVerified: user.is_verified,
    })

    // Stories or whatever
    const felixVideoEdges = user.edge_felix_video_timeline?.edges || []
    if (felixVideoEdges.length > 0) {
        renderMedia(felixVideoEdges.flatMap(edge => parseMediaNode(edge.node)))
        renderLine()
    }

    // Timeline
    const timelineEdges = user.edge_owner_to_timeline_media?.edges || []
    const timelineMedia = timelineEdges.flatMap(edge => parseMediaNode(edge?.node)); // Add null check for edge

    renderMedia(timelineMedia)

    // Show more button
    const pageInfo = user.edge_owner_to_timeline_media?.page_info
    const profileId = user.id

    renderLoadMoreButton(secrets, profileId, pageInfo)
}

function run({ secrets, profileId }) {
    // first, stop the page from loading
    window.stop()

    document.head.innerHTML = ''
    document.body.innerHTML = ''

    // and now execute our code
    const postID = window.location.pathname.match(/(?:p|reel)\/([^\/]*)/)

    if (postID) {
        const shortcode = postID[1]
        console.log(`Loading post: ${shortcode}`)
        loadSinglePost(secrets, shortcode)
    } else {
        const username = window.location.pathname.split('/')[1]
        console.log(`Loading profile: ${username}`)
        try {
            loadFullProfile(secrets, username)
        } catch (error) {
            console.error("Error loading full profile:", error)

            // most probably access errro, let's try loading a limited profile
            loadNextPage(secrets, profileId, null)
        }
    }
}

(function () {
    'use strict'

    if (isDebug()) {
        console.log("Debug mode enabled")
        document.body.innerHTML = ""

        const shortcode = window.location.pathname.split('/').pop()
        if (shortcode && shortcode == "limited") {
            loadNextPage({ /* no secrets */ }, profileId)
        } else if (shortcode) {
            loadSinglePost({ /* no secrets */ }, shortcode)
        } else {
            loadFullProfile({/* no secrets */ })
        }

        return
    }

    // let's try to stop it from blinking
    const style = document.createElement('style')
    style.textContent = '#splash-screen { display: none !important; }'
    document.head.appendChild(style)

    // we try to extract the secrets and run the app right away,
    // sometimes it works :)
    const { secrets, profileId } = extractDataAndRemoveScripts(1)
    if (!secrets) {
        // but since the user-script injection is kinda unpredictable
        // especially across different browsers and extensions,
        // we also fallback to a DOMContentLoaded event listener
        document.addEventListener('DOMContentLoaded', function () {
            window.stop() // we know that the secrets are in the DOM, so we can stop loading all other garbage

            const { secrets, profileId } = extractDataAndRemoveScripts(2)
            if (!secrets) {
                console.log("Failed to extract secrets")
                return
            }

            run({ secrets, profileId })
        })

        return
    }

    run(secrets)
})()