y252328 / instagram_download_button

Add download button to download media in the post and the story in Instagram

Instagram Download Button

Github, Greasy Fork , OpenUserJS

In the future, I will focus on fixing the bugs that happen in my environment if I have the free time

Thank you all like this script. Before the beginning of this year, I devoted significant effort to ensuring its compatibility with the most recent versions of the Instagram webpage. However, Instagram frequently modifies its front-end and distributes distinct versions of the web across various regions. It's challenging to reproduce the bug and debug it on my end. Additionally, I'm focusing on my full-time job. Therefore, as the title suggests, I will focus on fixing the bugs that I encounter if I have the free time.

Introduction

This repository is a JavaScript for Greasemonkey/Tampermonkey. This script will add a download button and open button to your Instagram and you can download or open profile pictures, media in the posts, stories, and highlights by one click.

The newer versions code only do some simple tests on Chrome. So if you have any problem, please feel free to contact me in English or Chinese and attach the detail information such as your runtime environment, IG post url, etc.

Note: This script only tests on Chrome , Edge, and Firefox with Tampermonkey on Windows 10 1903 64-bit.

Caution

• Some user feedback that account be logged out when this script is enabled, please disable this script if you meet a similar issue.
• There is some feedback provided by users that Instagram will block your account for a few hours (maybe longer) if you download too much media in a short time. So please mind the download number.
• Doesn't support reels page (i.e., https://www.instagram.com/reels/)

Issues

• Not work in independent post (https://www.instagram.com/p/XXX/)
• Not work in multiple highlights page (independent highlights page is okay)
• Sometimes may not work on the main feed
• May be loged out when this script enabled
• May break the layout
• May not work on in private account post due to no share button
• May not work with saved posts
• May get lower resolution media

About the new url fetch method

Around May 2022, Instagram modified the web page so that some media could not be downloaded (especially Reels). From this script version 1.13, a new method of fetching media url has been added and is enabled by default (not yet applied to Story). This new method can obtain full resolution pictures (to be verified) and all media can be downloaded at present, but the disadvantage is that the speed of fetching URLs is slow (download speed has no effect) and may have some bugs. You can set disableNewUrlFetchMethod to true if you don't want to use the new method. Or you can set prefetchAndAttachLink to true in order to prefetch the URL info.

Options

This script can be configured by modifying the following constant variables in the head of this script.

• disableNewUrlFetchMethod : boolean, disable new url fetch method which uses info API
• prefetchAndAttachLink : boolean, attach the link into the button elements if true
• hoverToFetchAndAttachLink : boolean, fetch and add link when hover the button
• postFilenameTemplate : string, naming rule for media downloading in the post
• storyFilenameTemplate : string, naming rule for media downloading in the story
• replaceJpegWithJpg : boolean, replace .jpeg with .jpg if true

Naming Template

• %id% : the poster id
• %datetime% : the media upload time, see next section for the datatime format
• %medianame% : the original media file name
• %postId% : the post id
• %mediaIndex% : the media index in multiple-media posts
• %ext% : the file extension of media

Datetime Template

• %y% : year (4 digits)
• %m% : month (01-12)
• %d% : day (01-31)
• %H% : hour (00-23)
• %M% : min (00-59)
• %S% : sec (00-59)

Shortcut Keys (May not work in newer versions)

• Alt + i : Open the media in the new tab
• Alt + k : Download the media
• Alt + j : Next media in the multiple media post
• Alt + l : Previous media in the multiple media post

The shortcut keys do not work on the Instagram main page currently

Contributors who aren't listed in the GitHub contributors list (sort by contribution time)

• 孙年忠
• xxalexx

Preview

License

MIT

instagram_download_button's Issues

Download button not working when post/reel was opened in new tab

Hi there!

To clarify, your userscript works phenomenal, when I open a post from grid view (i.e. the user's profile page). In that case the download button is on the bottom of the overlay, next to the save button.

What does, at least for me, not work is when I open a post in a new tab or get there from a direct link (e.g. https://www.instagram.com/p/CsJv4hNJzdb/). In that case, the download button appears on the top next to the user's handle. Clicking it will do nothing.

Same applies to reels. Anytime the download button is on top, it just does nothing. When it's on the bottom it works like a charm. That's why I assume, the bug lies somewhere in the code responsible for the placement next to the Instagram handle.

(I'd personally prefer if the button is consistently at the bottom anyway, but that's just as side note.)

Tested with script version 1.16.1 and 1.16.2 in Google Chrome 113 using Tampermonkey.

Hope that helps,
kind regards!

Request blocked by CORS when trying to download anything

Version: 1.17.14
Tested browsers: Firefox developer edition 121.0.b4, firefox 115.5.0esr

When I try to download anything I get a CORS error mentioning headers, this doesn't happen on 1.17.10

Dowloading https://instagram.fflr3-1.fna.fbcdn.net/v/t51.2885-15/404312395_252102311209315_1603083148809262124_n.jpg?stp=dst-jpg_e35&efg=eyJ2ZW5jb2RlX3RhZyI6ImltYWdlX3VybGdlbi4xNDQweDE2NjUuc2RyIn0&_nc_ht=instagram.fflr3-1.fna.fbcdn.net&_nc_cat=107&_nc_ohc=4xpymMblX5kAX_qJYOI&edm=ALQROFkBAAAA&ccb=7-5&ig_cache_key=MzI0NTQzNzUxMDE5OTcyOTMwNg%3D%3D.2-ccb7-5&oh=00_AfCjQxXco2qckDPywh-qhEkUIDy_gGsFDdtXZzq114Ec1Q&oe=656BF10E&_nc_sid=fc8dfb [Instagram-Download-Button.user.js:704:17](moz-extension://62646158-6073-4760-9255-faf858be51c9/userscripts/Instagram-Download-Button.user.js?id=67ad556a-0dad-4a7e-966f-e3220395d047)
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://instagram.fflr3-1.fna.fbcdn.net/v/t51.2885-15/404312395_252102311209315_1603083148809262124_n.jpg?stp=dst-jpg_e35&efg=eyJ2ZW5jb2RlX3RhZyI6ImltYWdlX3VybGdlbi4xNDQweDE2NjUuc2RyIn0&_nc_ht=instagram.fflr3-1.fna.fbcdn.net&_nc_cat=107&_nc_ohc=4xpymMblX5kAX_qJYOI&edm=ALQROFkBAAAA&ccb=7-5&ig_cache_key=MzI0NTQzNzUxMDE5OTcyOTMwNg%3D%3D.2-ccb7-5&oh=00_AfCjQxXco2qckDPywh-qhEkUIDy_gGsFDdtXZzq114Ec1Q&oe=656BF10E&_nc_sid=fc8dfb. (Reason: header ‘user-agent’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://instagram.fflr3-1.fna.fbcdn.net/v/t51.2885-15/404312395_252102311209315_1603083148809262124_n.jpg?stp=dst-jpg_e35&efg=eyJ2ZW5jb2RlX3RhZyI6ImltYWdlX3VybGdlbi4xNDQweDE2NjUuc2RyIn0&_nc_ht=instagram.fflr3-1.fna.fbcdn.net&_nc_cat=107&_nc_ohc=4xpymMblX5kAX_qJYOI&edm=ALQROFkBAAAA&ccb=7-5&ig_cache_key=MzI0NTQzNzUxMDE5OTcyOTMwNg%3D%3D.2-ccb7-5&oh=00_AfCjQxXco2qckDPywh-qhEkUIDy_gGsFDdtXZzq114Ec1Q&oe=656BF10E&_nc_sid=fc8dfb. (Reason: CORS request did not succeed). Status code: (null).

TypeError: NetworkError when attempting to fetch resource. [Instagram-Download-Button.user.js:726:33](moz-extension://62646158-6073-4760-9255-faf858be51c9/userscripts/Instagram-Download-Button.user.js?id=67ad556a-0dad-4a7e-966f-e3220395d047)
    downloadResource moz-extension://62646158-6073-4760-9255-faf858be51c9/userscripts/Instagram-Download-Button.user.js?id=67ad556a-0dad-4a7e-966f-e3220395d047:726

​

Syntax error in querySelector

This was observed on 1.17.4 and 1.17.5(it wasnt introduced as part of this most recent update)

SyntaxError: Document.querySelector: 'button:has(polygon[points="11.698 20.334 22 3.001 2 3.001 9.218 10.084 11.698 20.334"])' is not a valid selector 38 Instagram Download Button:157
checkExistTimer user-script:https://github.com/y252328/Instagram_Download_Button/Instagram Download Button:157
(Async: setInterval handler)
userScript user-script:https://github.com/y252328/Instagram_Download_Button/Instagram Download Button:136
userScript user-script:https://github.com/y252328/Instagram_Download_Button/Instagram Download Button:676
scopeWrapper user-script:https://github.com/y252328/Instagram_Download_Button/Instagram Download Button:697
user-script:https://github.com/y252328/Instagram_Download_Button/Instagram Download Button:698
inject resource://gre/modules/ExtensionContent.jsm:599
AsyncFunctionNext self-hosted:756

Wrong button position in new tab

I noticed that the download button position has changed when you open posts in new tabs (from push notifications for example), and it's hard to click it if you're following the account (or even impossible if it has a long username).

Distinguish file names

Distinguish file names between "story" and "post," and assign a sequence to multiple photos within the same post.

Button no longer works for stories

Button no longer appears on IG stories, but seems to work on posts. Also Story Highlights appear broken.

The Download Buttom Does Not Work

After the update, the download buttom key on the right corner of the post doesn't work. I can only open a video on new tab then right click to download the video. How to fix the download buttom?

Extra period/dot . at the end of filenames

When I download any content, posts, stories etc. from Instagram on Chrome filenames are ending in a dot before the file extension, thus every file has two dots in their filenames.

Filenames look like this (cropped for anonymity)

--950610_n..jpg
--transcode_output_dashinit..mp4
--7468409_n..mp4

Just happening for me or is this a bug in the script?

Chrome version 96.0.4664.110
Script version 1.9.5

Buttons not working on videos on feed page only

As title describes. Videos will not open in new tab nor download when on feed page, but they will work when viewing individual posts such as from a profile page. Console gave this error:

Uncatched in postOnClicked(): TypeError: Cannot read properties of null (reading 'match')
TypeError: Cannot read properties of null (reading 'match')
    at fetchVideoURL (chrome-extension://dhdgffkkebhmkfjojejmpbldmpobfkfo/userscript.html?name=Instagram%2520Download%2520Button.user.js&id=1f82600b-3a3c-421a-9a15-ccc07b7cf2f1:490:34)
    at postGetUrl (chrome-extension://dhdgffkkebhmkfjojejmpbldmpobfkfo/userscript.html?name=Instagram%2520Download%2520Button.user.js&id=1f82600b-3a3c-421a-9a15-ccc07b7cf2f1:325:37)
    at async postOnClicked (chrome-extension://dhdgffkkebhmkfjojejmpbldmpobfkfo/userscript.html?name=Instagram%2520Download%2520Button.user.js&id=1f82600b-3a3c-421a-9a15-ccc07b7cf2f1:269:39)

Additional details: Windows, Chrome, Tampermonkey, Instagram Download Button 1.16.1

Possibly related to #31 ?

[Error] Fetching Resource!

How to fix this error?

New issue with file type format

Hey man, i need change the line 37 to .ext from the end template

old: const postFilenameTemplate = "%id%-%datetime%-%medianame%.%ext%-%datetime%";
new one: const postFilenameTemplate = "%id%-%datetime%-%medianame%-%datetime%.%ext%";

Issue with omited ‘IG Story ID number’ and findMediaId()

Main issue: When you visit a user’s profile and click on the user’s story, instagram omits the ‘IG Story ID number’ from the URL (in the case that a user just has 1 story posted). If the user has multiple stories posted, you can navigate one story forward and one in reverse and now the first story url has the ‘IG Story ID number’ in the URL.
In the case that you are browsing stories from your main timeline feed, all stories, even of users with just 1 story posted, will have the ‘IG Story ID’ populated as part of the URL. Downloading Stories from main timeline feed continues to work as intended.

Expectation of user IG Story URL with just one story:
https://www.instagram.com/stories/sometestuser/3242792923564360989
Actual IG Story URL due to recent IG change (omits the ‘IG Story ID number’):
https://www.instagram.com/stories/sometestuser/
What this breaks:
findMediaId() is expecting to match on the story URL with the ‘IG Story ID number’ as part of the URL. This will no longer match, and execution continues thinking this is a ‘IG Post’ instead of a ‘IG Story’.

Buggy behaviour with posts of multiple images/videos

Say there are 6 images in a post, moving through and clicking the button on each image gets images 1, 2, 3, 3, 5, where clicking on the 4th gets you the 3rd again and clicking on the 6th gives you nothing, or maybe another unpredictable combination of images
I hope this made sense

using Firefox 97.0.1

thanks

Download button disappear

I found that there are some instagram account photos without download button. Thank you

Here the fix to make it working again.

Add this part after the line : let content = await resp.text();

Happy new year 😃

        // FIX

        let m=content.match(/"(https:\/\/scontent.+?_n.mp4.+?)"/gi);
        
        if (!m)
        {
            console.error("match fail",m);
            return null;
        }

        // JSON.parse to convert \uXXXX to char

        for (let i=1;i<m.length;i++)
        {
            console.log(i,JSON.parse(`{"url":${m[i]}}`).url);
        }

        let json=`{"url":${m[1]}}`;

        let url=JSON.parse(json).url;

        videoElem.setAttribute("videoURL",url);
        return url;

        // OLD CODE

        /*
        let match = content.match(pattern);
        let videoUrl = JSON.parse(match[1]);
        videoUrl = videoUrl.replace(/^(?:https?:\/\/)?(?:[^@\/\n]+@)?(?:www\.)?([^:\/?\n]+)/g, 'https://scontent.cdninstagram.com');
        videoElem.setAttribute('videoURL', videoUrl)
        return videoUrl;
        */

Instagram changed something in the main feed again

@y252328 Instagram changed something, on the main feed the download buttons don't appear anymore.

time zone

is it possible to use a different time zone in the file name?
for example, I download an image whose original upload time is 2023-02-14T15:31:30 (UTC) then the download will be 2023-02-14T14:31:30 (UTC+1)

Seems to have stopped working on the main feed

When viewing the main feed, clicking the button doesn't do anything on pics or vids.

can we used on Android/PHP?

Video downloads are broken as of today?

Looks like instagram changed something.

edit: it appears that instagram reverted something, as it just werks again

[Request] Download saved posts collection

Hey, that would be awesome if you could download your saved posts collection using this script ^^

Retrieving posterName in Stories is not working

In func storyOnClicked(target), looks like the line that retrieves posterName is returning 'null'.

let posterName = sectionNode
.querySelector('header a')
.getAttribute('href')
.replace(///g, '');

Not showing buttons on single video view.

When viewing a single video, it's not currently showing the download buttons.

Example:
https://www.instagram.com/p/CLzolZ-jz0R/
https://imgur.com/a/DVaNZaI

Note: You have to click a picture, then refresh the page. Or follow a link to the image.

Stopped work

Just stopped work on Microsoft Edge (Chromium), download and open new tab icon just gone, just for me or script issue?

No Download button on iOS Safari

No Download button on iOS Safari with Stay

Warning, it seems IG detects the script on mobile Firefox

I'm not sure how but in the last 2-3 days I'm getting constantly logged out when using Firefox Beta 113 + Tampermonkey + this script.

I tried several workarounds (adding more restrictive uBlock filters and reducing the useragent number to 112) but without any success.

On the desktop it seems more stable but also gets detected after a while.

在MacOs 是否可以修改脚本默认的下载地址？

RT？

如何修改脚本代码，以修改默认的下载路径？

thank you～

Not an issue

You may not be aware of this.

It seems like the old method of fetching the data by adding ?__a=1 to the url, can be used again like this ?__a=1&__d=1.

source

I want use your code in my project

your js code works great, I want use your code in my project， Do I need to pay for you code?

将快捷键/常量配置储存到 Storage，避免下次更新被覆盖

建议将快捷键/常量配置储存到 Storage，避免下次更新被覆盖

https://www.tampermonkey.net/documentation.php?locale=en#api:GM_getValue

const someKey = GM_getValue("someKey", null);
const otherKey = await GM.getValue("otherKey", null);

Downloads Wrong Instagram Story Picture

On January 27th, Instagram changed how they displayed stories. The button still downloads videos correctly. If you click on any image other than the first one in the series, the button downloads the first image in the series but with the name of the clicked image.

Downloading pictures doesn't work anymore everywhere on Instagram like before 😰😔

Hello,

Since December 2023, I can't anymore download pictures nor go to the source from any account on my side, while it was working very well until November :-(

Do you have any idea what's going on please ?

Thank you for your answer.

Google Chrome and Mozilla Firefox Browsers with Tampermonkey or Violentmonkey

Downloading is not working on Firefox.

The fetch method to download file is not working for Firefox (cors problem most of the time).

A better way is to use the tampermonkey downloader. Simply add @grant GM_download to script headers then change the function downloadResource by GM_download(url,filename+".mp4")

GM_download is done with webext. So no cross-origin problem.

I have to fix the script at every update 😅

Media index is always zero

It seems that due to the re-definition of mediaIndex on line 376 the value is not saved to the variable in the outside scope on line 351, causing the returned value to always be 0. Deleting the 'let' keyword seems to fix the issue.

User script download same media despite it shouldn't

@y252328 @Patty-OFurniture

Something is wrong with one of your recent commits. Have a look: https://youtu.be/YVPzZcLqOL0

Steps to reproduce:

1. Copy the URL of any post and paste it into a new tab.
2. Once the page has loaded in the new tab, go to the author's profile page.
3. Choose any picture and download it.
4. From that post page, choose any other account.
5. Download another photo.
6. You simply downloaded the same image you downloaded before, but with the filename slightly updated to include the other account name.

This didn't happen on v1.17.10.

Not working on IG Stories

Hello,
The download button is no longer working on Instagram Storys.
Google Chrome

İnstagram down

Not Working in Individual Stories

Seems like a recent update has made it so the download button has stopped working on individual IG pages within stories. Anyway to update? Thanks!

@updateURL meta tag?

Is it possible for you to add the @updateURL meta tag to the script?

Your script works great in Safari, but Safari's main free userscript manager cannot update scripts from GreasyFork automatically. But it can update from URL (perhaps you can use the direct raw GitHub link?) if the script contains the @updateURL tag among the metadata. Thank you!

Can't download highlight videos

Only work once, after that it just outputting Fetch info API failed with status code: 400 with Failed- Network error on file download

Instagram_Download_Button/instagram-dl.user.js

Line 481 in 6d67240

console.log(`Fetch info API failed with status code: ${resp.status}`);

Correct typo

Hi small correction, storySeletor should be storySelector (there is a missing c in Seletor). Just because maybe later on a new piece is added and pointing at storySelector would error out. Not an issue right now because all references are same. Thank you for your script 🥇

Instagram_Download_Button/instagram-dl.user.js

Line 115 in dc8c58d

let storySeletor = "header button > div";

Instagram_Download_Button/instagram-dl.user.js

Lines 136 to 137 in dc8c58d

	if (document.querySelector(storySeletor)) {
	addCustomBtn(document.querySelector(storySeletor), "white", append2Post);

Small issue with story and the buttons

A small issue: In a story if you click on the picture: "See post". It goes to the IG post. But the Icons from IDB are at the top next to the name. It doesn't work when you click on download. Refreshing don't solve it.
But if you click on the profile and find the post, it works fine, the icons are at the bottom.

Download buttons don't respond in "mobile view" with multi-image posts

I noticed this issue on my Android running Firefox with Tampermonkey addon. The buttons don't respond when clicked on posts that include more than 1 image. DL buttons on posts with a single image works fine. DL buttons on stories work fine. DL buttons on Reels work fine. The only way to get the buttons to respond in a multi image post is to enable "view as desktop webpage" for the post. When the page reloads as the desktop version then the buttons are responsive.

I was able to reproduce this issue on my desktop windows machine running firefox by setting the user agent as firefox mobile and by narrowing the browser window so that Instagram uses the narrow mobile UI.

Some video's don't have a download link.

Hello!
Instagram (Facebook) is busy with updates and work on the site, as we all know..
Some videos do not have a download link. Is that just for me?

eg: https://www.instagram.com/p/Cly6Gimqt6-/
_(For some reason I can't 'direct link' an Instagram post in Firefox, that's new too! Copying the url above and putting it in a tab gives me a blank screen. I can link profiles directly, but it doesn't work with posted videos and photos links. Only with FF. ) _

Edit: Is it possible to change the date format to: dd-mm-yyyy without the time?

Thanks!!

Would you mind sharing what code formatter you are using?

Would you mind sharing what code formatter you are using, including its settings?

I use Prettier, and if I modify the code and format it, it would trigger changes all over the code.

Feature request: Video Cover

hope add a way (button or shortcut) to open / download of video covers.

Example

https://www.instagram.com/allthatisshe/

For example, I want to download the cover of this video:

https://www.instagram.com/p/C0jyeHPo6y3/

it's at this position:

When I hold down a shortcut key and click on the icon, the cover is automatically downloaded

Black buttons when using dark theme

let iconColor = getComputedStyle(document.body).backgroundColor === 'rgb(0, 0, 0)' ? 'white' : 'black';

Could fix it.

[Request] Download All button?

Can you add download All posts/videos from profiles? Thank you so much