☰

IG小助手

一键下载对方 Instagram 帖子中的相片、视频甚至是他们的快拍！

当前为 2022-10-30 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name               IG Helper
  3. // @name:zh-TW         IG小精靈
  4. // @name:zh-CN         IG小助手
  5. // @name:ja            IG助手
  6. // @name:ko            IG조수
  7. // @namespace          https://github.snkms.com/
  8. // @version            2.5.2
  9. // @description        Downloading Instagram posts photos and videos or their stories!
  10. // @description:zh-TW  一鍵下載對方 Instagram 貼文中的相片、影片甚至是他們的限時動態！
  11. // @description:zh-CN  一键下载对方 Instagram 帖子中的相片、视频甚至是他们的快拍！
  12. // @description:ja     写真、ビデオ、そしてお互いの Instagram 投稿からのストーリーずズのワンクリックダウンロード！
  13. // @description:ko     Instagram 게시물에서 사진, 비디오 또는 이야기를 다운로드하십시오.
  14. // @author             SN-Koarashi (5026)
  15. // @match              https://*.instagram.com/*
  16. // @grant              GM_setValue
  17. // @grant              GM_getValue
  18. // @grant              GM_xmlhttpRequest
  19. // @require            https://code.jquery.com/jquery-3.6.0.min.js
  20. // @supportURL         https://www.facebook.com/smileopwe/
  21. // @icon               https://www.google.com/s2/favicons?domain=www.instagram.com
  22. // @compatible         firefox >= 87
  23. // @compatible         chrome >= 90
  24. // @compatible         edge >= 90
  25. // @license            GPLv3
  26. // ==/UserScript==
  27.  
  28. (function(jQuery) {
  29.     'use strict';
  30.     // Icon download by https://www.flaticon.com/authors/pixel-perfect
  31.  
  32.     const $ = jQuery;
  33.     const checkInterval = 250;
  34.     const lang = navigator.language || navigator.userLanguage;
  35.  
  36.     var currentURL = location.href;
  37.     var currentHeight = $(document).height();
  38.     var firstStarted = false;
  39.     var pageLoaded = false;
  40.  
  41.     var GL_postPath;
  42.     var GL_username;
  43.     var GL_repeat
  44.  
  45.     // Main Timer
  46.     var timer = setInterval(function(){
  47.         currentHeight = $(document).height();
  48.  
  49.         // Call Instagram dialog function if url changed.
  50.         if(currentURL != location.href || !firstStarted || !pageLoaded){
  51.             clearInterval(GL_repeat);
  52.             pageLoaded = false;
  53.             firstStarted = true;
  54.             currentURL = location.href;
  55.  
  56.             if(location.href.startsWith("https://www.instagram.com/p/")){
  57.                 console.log('isDialog');
  58.                 setTimeout(()=>{
  59.                     onReadyMyDW(false);
  60.                 },150);
  61.                 pageLoaded = true;
  62.             }
  63.  
  64.             if(location.href == "https://www.instagram.com/"){
  65.                 console.log('isHomepage');
  66.                 setTimeout(()=>{
  67.                     onReadyMyDW(false);
  68.                 },150);
  69.                 pageLoaded = true;
  70.             }
  71.             if(!$('body > div div.x9f619 div._adqx[data-visualcompletion="loading-state"]').length && $('canvas._aarh').length && location.href.match(/^(https:\/\/www\.instagram\.com\/)([0-9A-Za-z\.\-_]+)\/?$/ig) && !location.href.match(/^(https:\/\/www\.instagram\.com\/(stories|explore)\/?)/ig)){
  72.                 console.log('isProfile');
  73.                 setTimeout(()=>{
  74.                     onProfileDW(false);
  75.                 },150);
  76.                 pageLoaded = true;
  77.             }
  78.  
  79.             if(!pageLoaded){
  80.                 // Call Instagram stories function
  81.                 if(location.href.match(/^(https:\/\/www\.instagram\.com\/stories\/highlights\/)/ig)){
  82.                     console.log('isHighlightsStory');
  83.                     onHighlightsStoryDW(false);
  84.                     GL_repeat = setInterval(()=>{
  85.                         onHighlightsStoryThumbnailDW(false);
  86.                     },checkInterval);
  87.  
  88.                     if($(".IG_DWHISTORY").length) setTimeout(()=>{pageLoaded = true;},150);
  89.                 }
  90.                 else if(location.href.match(/^(https:\/\/www\.instagram\.com\/stories\/)/ig)){
  91.                     console.log('isStory');
  92.                     onStoryDW(false);
  93.                     onStoryThumbnailDW(false);
  94.  
  95.                     if($(".IG_DWSTORY").length) setTimeout(()=>{pageLoaded = true;},150);
  96.                 }
  97.                 else{
  98.                     pageLoaded = false;
  99.                     // Remove the download icon
  100.                     $('.IG_DWSTORY').remove();
  101.                     $('.IG_DWSTORY_THUMBNAIL').remove();
  102.                 }
  103.             }
  104.  
  105.         }
  106.  
  107.         // Direct Download Checkbox
  108.         /*
  109.         if(!$('.AutoDownload_dom').length){
  110.             let ckValue = (GM_getValue('AutoDownload'))?'checked':'';
  111.             $('body div.mfclru0v.astyfpdk.om3e55n1.jez8cy9q').css('position','relative');
  112.             $('body div.mfclru0v.astyfpdk.om3e55n1.jez8cy9q').append(`<div class="AutoDownload_dom" style="position:absolute;left:10px;bottom:7px;padding:0px;line-height:1;display:inline-block;width:fit-content;"><label title="${_i18n("DDL_INTRO")}" style="cursor:help;"><input type="checkbox" value="1" class="AutoDownload" name="AutoDownload" ${ckValue} />${_i18n("DDL")}</label></div>`);
  113.         }
  114.         */
  115.     },checkInterval);
  116.  
  117.     // Call general function when user scroll the page
  118.     $(document).scroll(function(){
  119.         if(currentHeight != $(this).height() && location.href == "https://www.instagram.com/"){
  120.             onReadyMyDW();
  121.         }
  122.     });
  123.  
  124.     // Profile funcion
  125.     async function onProfileDW(isDownload){
  126.         if(isDownload){
  127.             let date = new Date().getTime();
  128.             let timestamp = Math.floor(date / 1000);
  129.             let username = location.href.replace(/\/$/ig,'').split('/').at(-1);
  130.             let userInfo = await getUserId(username);
  131.  
  132.             saveFiles(userInfo.user.profile_pic_url,username,"avatar",timestamp,'jpg');
  133.         }
  134.         else{
  135.             // Add the stories download button
  136.             let style = "position: absolute;right:0px;top:0px;padding:5px;line-height:1;background:#fff;border-radius: 50%;cursor:pointer;border: 1px solid #ccc";
  137.             if(!$('.IG_DWPROFILE').length){
  138.                 $('body > div main canvas._aarh').parent().append(`<div title="${_i18n("DW")}" class="IG_DWPROFILE" style="${style}"><svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><path d="M382.56,233.376C379.968,227.648,374.272,224,368,224h-64V16c0-8.832-7.168-16-16-16h-64c-8.832,0-16,7.168-16,16v208h-64    c-6.272,0-11.968,3.68-14.56,9.376c-2.624,5.728-1.6,12.416,2.528,17.152l112,128c3.04,3.488,7.424,5.472,12.032,5.472    c4.608,0,8.992-2.016,12.032-5.472l112-128C384.192,245.824,385.152,239.104,382.56,233.376z"/></g></g><g><g><path d="M432,352v96H80v-96H16v128c0,17.696,14.336,32,32,32h416c17.696,0,32-14.304,32-32V352H432z"/></g></g></div>`);
  139.                 return true;
  140.             }
  141.         }
  142.     }
  143.  
  144.     // Highlight Stories funcion
  145.     async function onHighlightsStoryDW(isDownload){
  146.         if(isDownload){
  147.             let date = new Date().getTime();
  148.             let timestamp = Math.floor(date / 1000);
  149.             let highlightId = location.href.replace(/\/$/ig,'').split('/').at(-1);
  150.             let highStories = await getHighlightsStories(highlightId);
  151.             let username = highStories.data.reels_media[0].owner.username;
  152.             let nowIndex = $("body > div section._ac0a header._ac0k > ._ac3r ._ac3n ._ac3p[style]").length;
  153.             let totIndex = highStories.data.reels_media[0].items.length;
  154.  
  155.             let target = highStories.data.reels_media[0].items[totIndex-nowIndex];
  156.             if(target.is_video){
  157.                 saveFiles(target.video_resources.at(-1).src,username,"highlights",timestamp,'mp4');
  158.             }
  159.             else{
  160.                 saveFiles(target.display_resources.at(-1).src,username,"highlights",timestamp,'jpg');
  161.             }
  162.         }
  163.         else{
  164.             // Add the stories download button
  165.             let style = "position: absolute;right:-40px;top:15px;padding:5px;line-height:1;background:#fff;border-radius: 5px;cursor:pointer;";
  166.             if(!$('.IG_DWHISTORY').length){
  167.                 $('body > div section._ac0a').append(`<div title="${_i18n("DW")}" class="IG_DWHISTORY" style="${style}"><svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><path d="M382.56,233.376C379.968,227.648,374.272,224,368,224h-64V16c0-8.832-7.168-16-16-16h-64c-8.832,0-16,7.168-16,16v208h-64    c-6.272,0-11.968,3.68-14.56,9.376c-2.624,5.728-1.6,12.416,2.528,17.152l112,128c3.04,3.488,7.424,5.472,12.032,5.472    c4.608,0,8.992-2.016,12.032-5.472l112-128C384.192,245.824,385.152,239.104,382.56,233.376z"/></g></g><g><g><path d="M432,352v96H80v-96H16v128c0,17.696,14.336,32,32,32h416c17.696,0,32-14.304,32-32V352H432z"/></g></g></div>`);
  168.                 return true;
  169.             }
  170.         }
  171.     }
  172.  
  173.     // Highlight Stories Thumbnail funcion
  174.     async function onHighlightsStoryThumbnailDW(isDownload){
  175.         if(isDownload){
  176.             let date = new Date().getTime();
  177.             let timestamp = Math.floor(date / 1000);
  178.             let highlightId = location.href.replace(/\/$/ig,'').split('/').at(-1);
  179.             let highStories = await getHighlightsStories(highlightId);
  180.             let username = highStories.data.reels_media[0].owner.username;
  181.             let nowIndex = $("body > div section._ac0a header._ac0k > ._ac3r ._ac3n ._ac3p[style]").length;
  182.             let totIndex = highStories.data.reels_media[0].items.length;
  183.  
  184.             let target = highStories.data.reels_media[0].items[totIndex-nowIndex];
  185.             saveFiles(target.display_resources.at(-1).src,username,"highlights",timestamp,'jpg');
  186.         }
  187.         else{
  188.             if($('body > div section._ac0a video.xh8yej3').length){
  189.                 // Add the stories download button
  190.                 let style = "position: absolute;right:-40px;top:45px;padding:5px;line-height:1;background:#fff;border-radius: 5px;cursor:pointer;";
  191.                 if(!$('.IG_DWHISTORY_THUMBNAIL').length){
  192.                     $('body > div section._ac0a').append(`<div title="${_i18n("THUMBNAIL_INTRO")}" class="IG_DWHISTORY_THUMBNAIL" style="${style}"><svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512"><circle cx="8.25" cy="5.25" r=".5"/><path d="m8.25 6.5c-.689 0-1.25-.561-1.25-1.25s.561-1.25 1.25-1.25 1.25.561 1.25 1.25-.561 1.25-1.25 1.25zm0-1.5c-.138 0-.25.112-.25.25 0 .275.5.275.5 0 0-.138-.112-.25-.25-.25z"/><path d="m7.25 11.25 2-2.5 2.25 1.5 2.25-3.5 3 4.5z"/><path d="m16.75 12h-9.5c-.288 0-.551-.165-.676-.425s-.09-.568.09-.793l2-2.5c.243-.304.678-.372 1.002-.156l1.616 1.077 1.837-2.859c.137-.212.372-.342.625-.344.246-.026.49.123.63.334l3 4.5c.153.23.168.526.037.77-.13.244-.385.396-.661.396zm-4.519-1.5h3.118l-1.587-2.381zm-3.42 0h1.712l-1.117-.745z"/><path d="m22.25 14h-2.756c-.778 0-1.452.501-1.676 1.247l-.859 2.862c-.16.533-.641.891-1.197.891h-7.524c-.556 0-1.037-.358-1.197-.891l-.859-2.861c-.224-.747-.897-1.248-1.676-1.248h-2.756c-.965 0-1.75.785-1.75 1.75v5.5c0 1.517 1.233 2.75 2.75 2.75h18.5c1.517 0 2.75-1.233 2.75-2.75v-5.5c0-.965-.785-1.75-1.75-1.75z"/><path d="m4 12c-.552 0-1-.448-1-1v-8c0-1.654 1.346-3 3-3h12c1.654 0 3 1.346 3 3v8c0 .552-.448 1-1 1s-1-.448-1-1v-8c0-.551-.449-1-1-1h-12c-.551 0-1 .449-1 1v8c0 .552-.448 1-1 1z"/></svg></div>`);
  193.                 }
  194.             }
  195.             else{
  196.                 $('.IG_DWHISTORY_THUMBNAIL').remove();
  197.             }
  198.         }
  199.     }
  200.  
  201.     // Stories funcion
  202.     async function onStoryDW(isDownload){
  203.         if(isDownload){
  204.             let date = new Date().getTime();
  205.             let timestamp = Math.floor(date / 1000);
  206.             let username = $("body > div section._ac0a header._ac0k ._ac0l div ._ac0q > a").text();
  207.  
  208.             if($('body > div section._ac0a video.xh8yej3').length){
  209.                 // Download stories if it is video
  210.                 let type = "mp4";
  211.                 let userInfo = await getUserId(username);
  212.                 let userId = userInfo.user.pk;
  213.                 let stories = await getStories(userId);
  214.  
  215.                 let targetURL = location.href.replace(/\/$/ig,'').split("/").at(-1);
  216.                 let videoURL = "";
  217.  
  218.                 stories.data.reels_media[0].items.forEach(item => {
  219.                     if(item.id == targetURL){
  220.                         videoURL = item.video_resources[0].src;
  221.                     }
  222.                 });
  223.  
  224.                 if(videoURL.length == 0){
  225.                     alert(_i18n("NO_VID_URL"));
  226.                 }
  227.                 else{
  228.                     saveFiles(videoURL,username,"stories",timestamp,type);
  229.                 }
  230.  
  231.             }
  232.             else{
  233.                 // Download stories if it is image
  234.                 let srcset = $('section._ac0a ._aa64 img._aa63').attr('srcset').split(',')[0].split(' ')[0];
  235.                 let link = (srcset)?srcset:$('section._ac0a ._aa64 img._aa63').attr('src');
  236.  
  237.                 let downloadLink = link;
  238.                 let type = 'jpg';
  239.  
  240.                 saveFiles(downloadLink,username,"stories",timestamp,type);
  241.             }
  242.         }
  243.         else{
  244.             // Add the stories download button
  245.             let style = "position: absolute;right:-40px;top:15px;padding:5px;line-height:1;background:#fff;border-radius: 5px;cursor:pointer;";
  246.             if(!$('.IG_DWSTORY').length){
  247.                 $('body > div section._ac0a').append(`<div title="${_i18n("DW")}" class="IG_DWSTORY" style="${style}"><svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><path d="M382.56,233.376C379.968,227.648,374.272,224,368,224h-64V16c0-8.832-7.168-16-16-16h-64c-8.832,0-16,7.168-16,16v208h-64    c-6.272,0-11.968,3.68-14.56,9.376c-2.624,5.728-1.6,12.416,2.528,17.152l112,128c3.04,3.488,7.424,5.472,12.032,5.472    c4.608,0,8.992-2.016,12.032-5.472l112-128C384.192,245.824,385.152,239.104,382.56,233.376z"/></g></g><g><g><path d="M432,352v96H80v-96H16v128c0,17.696,14.336,32,32,32h416c17.696,0,32-14.304,32-32V352H432z"/></g></g></div>`);
  248.                 return true;
  249.             }
  250.         }
  251.     }
  252.  
  253.     // Stories Thumbnail funcion
  254.     async function onStoryThumbnailDW(isDownload){
  255.         if(isDownload){
  256.             // Download stories if it is video
  257.             let date = new Date().getTime();
  258.             let timestamp = Math.floor(date / 1000);
  259.             let type = 'jpg';
  260.             let username = $("body > div section._ac0a header._ac0k ._ac0l div ._ac0q > a").text();
  261.             let style = 'margin:5px 0px;padding:5px 0px;color:#111;font-size:1rem;line-height:1rem;text-align:center;border:1px solid #000;border-radius: 5px;';
  262.             // Download thumbnail
  263.             let userInfo = await getUserId(username);
  264.             let userId = userInfo.user.pk;
  265.             let stories = await getStories(userId);
  266.             let targetURL = location.href.replace(/\/$/ig,'').split("/").at(-1);
  267.             let videoThumbnailURL = "";
  268.  
  269.             stories.data.reels_media[0].items.forEach(item => {
  270.                 if(item.id == targetURL){
  271.                     videoThumbnailURL = item.display_url;
  272.                     console.log(item.display_url);
  273.                 }
  274.             });
  275.  
  276.             saveFiles(videoThumbnailURL,username,"thumbnail",timestamp,type);
  277.         }
  278.         else{
  279.             if($('body > div section._ac0a video.xh8yej3').length){
  280.                 // Add the stories download button
  281.                 let style = "position: absolute;right:-40px;top:45px;padding:5px;line-height:1;background:#fff;border-radius: 5px;cursor:pointer;";
  282.                 if(!$('.IG_DWSTORY_THUMBNAIL').length){
  283.                     $('body > div section._ac0a').append(`<div title="${_i18n("THUMBNAIL_INTRO")}" class="IG_DWSTORY_THUMBNAIL" style="${style}"><svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512"><circle cx="8.25" cy="5.25" r=".5"/><path d="m8.25 6.5c-.689 0-1.25-.561-1.25-1.25s.561-1.25 1.25-1.25 1.25.561 1.25 1.25-.561 1.25-1.25 1.25zm0-1.5c-.138 0-.25.112-.25.25 0 .275.5.275.5 0 0-.138-.112-.25-.25-.25z"/><path d="m7.25 11.25 2-2.5 2.25 1.5 2.25-3.5 3 4.5z"/><path d="m16.75 12h-9.5c-.288 0-.551-.165-.676-.425s-.09-.568.09-.793l2-2.5c.243-.304.678-.372 1.002-.156l1.616 1.077 1.837-2.859c.137-.212.372-.342.625-.344.246-.026.49.123.63.334l3 4.5c.153.23.168.526.037.77-.13.244-.385.396-.661.396zm-4.519-1.5h3.118l-1.587-2.381zm-3.42 0h1.712l-1.117-.745z"/><path d="m22.25 14h-2.756c-.778 0-1.452.501-1.676 1.247l-.859 2.862c-.16.533-.641.891-1.197.891h-7.524c-.556 0-1.037-.358-1.197-.891l-.859-2.861c-.224-.747-.897-1.248-1.676-1.248h-2.756c-.965 0-1.75.785-1.75 1.75v5.5c0 1.517 1.233 2.75 2.75 2.75h18.5c1.517 0 2.75-1.233 2.75-2.75v-5.5c0-.965-.785-1.75-1.75-1.75z"/><path d="m4 12c-.552 0-1-.448-1-1v-8c0-1.654 1.346-3 3-3h12c1.654 0 3 1.346 3 3v8c0 .552-.448 1-1 1s-1-.448-1-1v-8c0-.551-.449-1-1-1h-12c-.551 0-1 .449-1 1v8c0 .552-.448 1-1 1z"/></svg></div>`);
  284.                 }
  285.             }
  286.             else{
  287.                 $('.IG_DWSTORY_THUMBNAIL').remove();
  288.             }
  289.         }
  290.     }
  291.  
  292.     // Prepare promise to fetch user stories
  293.     function getHighlightsStories(highlightId){
  294.         return new Promise((resolve,reject)=>{
  295.             let getURL = `https://www.instagram.com/graphql/query/?query_hash=45246d3fe16ccc6577e0bd297a5db1ab&variables=%7B%22highlight_reel_ids%22:%5B%22${highlightId}%22%5D,%22precomposed_overlay%22:false%7D`;
  296.  
  297.             GM_xmlhttpRequest({
  298.                 method: "GET",
  299.                 url: getURL,
  300.                 onload: function(response) {
  301.                     let obj = JSON.parse(response.response);
  302.                     resolve(obj);
  303.                 },
  304.                 onerror: function(err){
  305.                     reject(err);
  306.                 }
  307.             });
  308.         });
  309.     }
  310.  
  311.     // Prepare promise to fetch user stories
  312.     function getStories(userId){
  313.         return new Promise((resolve,reject)=>{
  314.             let getURL = `https://www.instagram.com/graphql/query/?query_hash=15463e8449a83d3d60b06be7e90627c7&variables=%7B%22reel_ids%22:%5B%22${userId}%22%5D,%22precomposed_overlay%22:false%7D`;
  315.  
  316.             GM_xmlhttpRequest({
  317.                 method: "GET",
  318.                 url: getURL,
  319.                 onload: function(response) {
  320.                     let obj = JSON.parse(response.response);
  321.                     resolve(obj);
  322.                 },
  323.                 onerror: function(err){
  324.                     reject(err);
  325.                 }
  326.             });
  327.         });
  328.     }
  329.  
  330.     // Prepare promise to fetch user id by username
  331.     function getUserId(username){
  332.         return new Promise((resolve,reject)=>{
  333.             let getURL = `https://www.instagram.com/web/search/topsearch/?query=${username}`;
  334.  
  335.             GM_xmlhttpRequest({
  336.                 method: "GET",
  337.                 url: getURL,
  338.                 onload: function(response) {
  339.                     let obj = JSON.parse(response.response);
  340.                     resolve(obj.users[0]);
  341.                 },
  342.                 onerror: function(err){
  343.                     reject(err);
  344.                 }
  345.             });
  346.         });
  347.     }
  348.  
  349.     // Prepare promise to cache article which contains blob media
  350.     function getBlobMedia(postPath){
  351.         return new Promise((resolve,reject)=>{
  352.             if(!postPath) reject("NOPATH");
  353.             let postShortCode = postPath.substring(3, postPath.length - 1);
  354.             let getURL = `https://www.instagram.com/graphql/query/?query_hash=2c4c2e343a8f64c625ba02b2aa12c7f8&variables=%7B%22shortcode%22:%22${postShortCode}%22}`;
  355.  
  356.             GM_xmlhttpRequest({
  357.                 method: "GET",
  358.                 url: getURL,
  359.                 onload: function(response) {
  360.                     let obj = JSON.parse(response.response);
  361.                     resolve(obj.data);
  362.                 },
  363.                 onerror: function(err){
  364.                     reject(err);
  365.                 }
  366.             });
  367.         });
  368.     }
  369.  
  370.     // Main function
  371.     function onReadyMyDW(NoDialog){
  372.         // Whether is Instagram dialog?
  373.         if(!NoDialog){
  374.             // Running if it is dialog
  375.             $('article[role="presentation"]').each(function(){
  376.                 $(this).removeAttr('data-snig');
  377.                 $(this).unbind('click');
  378.             });
  379.             $('.SNKMS_IG_DW_MAIN,.SNKMS_IG_DW_MAIN_VIDEO').remove();
  380.         }
  381.         if(NoDialog == false){
  382.             var repeat = setInterval(() => {
  383.                 if($('article[data-snig="canDownload"]').length > 0) clearInterval(repeat);
  384.                 createArtBtn();
  385.             },250);
  386.         }
  387.         else{
  388.             createArtBtn();
  389.         }
  390.     }
  391.  
  392.     function createArtBtn(){
  393.         // Add download icon per each posts
  394.         $('article[role="presentation"]').each(function(){
  395.             // If it is have not download icon
  396.             if(!$(this).attr('data-snig')){
  397.                 console.log("Found article");
  398.                 var style = "position: absolute;right:15px;top:15px;padding:6px;line-height:1;background:#fff;border-radius: 50%;cursor:pointer;";
  399.  
  400.                 // Add the download icon
  401.                 let $childElement = $(this).children("div").children("div");
  402.                 $childElement.eq($childElement.length - 2).append(`<div title="${_i18n("DW")}" class="SNKMS_IG_DW_MAIN" style="${style}"><svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><path d="M382.56,233.376C379.968,227.648,374.272,224,368,224h-64V16c0-8.832-7.168-16-16-16h-64c-8.832,0-16,7.168-16,16v208h-64    c-6.272,0-11.968,3.68-14.56,9.376c-2.624,5.728-1.6,12.416,2.528,17.152l112,128c3.04,3.488,7.424,5.472,12.032,5.472    c4.608,0,8.992-2.016,12.032-5.472l112-128C384.192,245.824,385.152,239.104,382.56,233.376z"/></g></g><g><g><path d="M432,352v96H80v-96H16v128c0,17.696,14.336,32,32,32h416c17.696,0,32-14.304,32-32V352H432z"/></g></g></div>`);
  403.  
  404.                 // Running if user click the download icon
  405.                 $(this).on('click','.SNKMS_IG_DW_MAIN', async function(e){
  406.                     GL_username = $(this).parent().parent().parent().attr('data-username');
  407.                     GL_postPath = $(this).parent().parent().children("div:last-child").children("div").find("div > section").last().prev().find("a").attr("href");
  408.  
  409.                     // Create element that download dailog
  410.                     IG_createDM(GM_getValue('AutoDownload'));
  411.  
  412.                     $("#article-id").text(GL_postPath);
  413.                     var style = 'display:block;margin:5px 0px;padding:5px 0px;color:#111;font-size:1rem;line-height:1rem;text-align:center;border:1px solid #000;border-radius: 5px;';
  414.  
  415.                     // Find video/image element and add the download icon
  416.                     var s = 0;
  417.                     var multiple = $(this).parent().parent().find('._aap0 ._acaz').length;
  418.                     var pathname = window.location.pathname;
  419.                     var fullpathname = "/"+pathname.split('/')[1]+"/"+pathname.split('/')[2]+"/";
  420.  
  421.                     // If posts have more than one images or videos.
  422.                     if(multiple){
  423.                         var blob = false;
  424.                         $(this).parent().find('._aap0 ._acaz').each(function(){
  425.                             let element_videos = $(this).parent().parent().find('video._ab1d');
  426.                             if(element_videos && element_videos.attr('src') && element_videos.attr('src').match(/^blob:/ig)){
  427.                                 blob = true;
  428.                             }
  429.                         });
  430.  
  431.  
  432.                         if(blob){
  433.                             createMediaCacheDOM(GL_postPath,".IG_SN_DIG .IG_SN_DIG_MAIN .IG_SN_DIG_BODY",style,_i18n("LOAD_BLOB_MULTIPLE"));
  434.                         }
  435.                         else{
  436.                             let blob = false;
  437.                             $(this).parent().find('._aap0 ._acaz').each(function(){
  438.                                 s++;
  439.                                 let element_videos = $(this).find('video._ab1d');
  440.                                 let element_images = $(this).find('._aagv img');
  441.                                 let imgLink = (element_images.attr('srcset'))?element_images.attr('srcset').split(" ")[0]:element_images.attr('src');
  442.  
  443.                                 if(element_videos && element_videos.attr('src')){
  444.                                     let video_image = element_videos.attr('poster');
  445.                                     let video_url = element_videos.attr('src');
  446.  
  447.                                     $('.IG_SN_DIG .IG_SN_DIG_MAIN .IG_SN_DIG_BODY').append(`<a data-needed="direct" data-name="IGTV" data-type="mp4" data-globalIndex="${s}" style="${style}" href="javascript:;" data-href="${video_url}"><img width="100" src="${video_image}" /><br/>- ${_i18n("VID")} ${s} -</a>`);
  448.  
  449.                                     if(video_url.match(/^blob:/ig)) blob = true;
  450.                                 }
  451.                                 if(element_images && imgLink){
  452.                                     $('.IG_SN_DIG .IG_SN_DIG_MAIN .IG_SN_DIG_BODY').append(`<a data-needed="direct" data-name="photo" data-type="jpg" data-globalIndex="${s}" style="${style}" href="javascript:;" data-href="${imgLink}"><img width="100" src="${imgLink}" /><br/>- ${_i18n("IMG")} ${s} -</a>`);
  453.                                 }
  454.  
  455.                             });
  456.  
  457.                             if(blob){
  458.                                 createMediaCacheDOM(GL_postPath,".IG_SN_DIG .IG_SN_DIG_MAIN .IG_SN_DIG_BODY",style,_i18n("LOAD_BLOB_RELOAD"));
  459.                             }
  460.                         }
  461.                     }
  462.                     else{
  463.                         s++;
  464.                         let element_videos = $(this).parent().parent().find('video._ab1d');
  465.                         let element_images = $(this).parent().parent().find('._aagv img');
  466.                         let imgLink = (element_images.attr('srcset'))?element_images.attr('srcset').split(" ")[0]:element_images.attr('src');
  467.  
  468.  
  469.                         if(element_videos && element_videos.attr('src')){
  470.                             let video_image = element_videos.attr('poster');
  471.                             let video_url = element_videos.attr('src');
  472.  
  473.                             if(element_videos.attr('src').match(/^blob:/ig)){
  474.                                 createMediaCacheDOM(GL_postPath,".IG_SN_DIG .IG_SN_DIG_MAIN .IG_SN_DIG_BODY",style,_i18n("LOAD_BLOB_ONE"));
  475.                             }
  476.                             else{
  477.                                 $('.IG_SN_DIG .IG_SN_DIG_MAIN .IG_SN_DIG_BODY').append(`<a data-needed="direct" data-name="video" data-type="mp4" data-globalIndex="${s}" style="${style}" href="javascript:;" data-href="${video_url}"><img width="100" src="${video_image}" /><br/>- ${_i18n("VID")} ${s} -</a>`);
  478.                             }
  479.                         }
  480.                         if(element_images && imgLink){
  481.                             $('.IG_SN_DIG .IG_SN_DIG_MAIN .IG_SN_DIG_BODY').append(`<a data-needed="direct" data-name="photo" data-type="jpg" data-globalIndex="${s}" style="${style}" href="javascript:;" href="" data-href="${imgLink}"><img width="100" src="${imgLink}" /><br/>- ${_i18n("IMG")} ${s} -</a>`);
  482.                         }
  483.                     }
  484.  
  485.  
  486.                     if(GM_getValue('AutoDownload')){
  487.                         var autoTimer = setInterval(()=>{
  488.                             if($('a[data-type]').length > 0){
  489.                                 var GB_Index = 1;
  490.  
  491.                                 if(!$('a[data-blob="true"]').length){
  492.                                     let selectionArr = [...$(this).parent().find('._aamk').children('._acnb')];
  493.  
  494.                                     let LeftButton = $(this).parent().parent().find('button._aahh').length;
  495.                                     let RightButton = $(this).parent().parent().find('button._aahi').length;
  496.  
  497.                                     if(LeftButton && !RightButton){ // Left Only
  498.                                         GB_Index = 2;
  499.                                         console.log('Left Only');
  500.                                     }
  501.                                     else if(!LeftButton && RightButton){ // Right Only
  502.                                         GB_Index = 1;
  503.                                         console.log('Right Only');
  504.                                     }
  505.                                     else if(!LeftButton && !RightButton){ // Both Not Exist
  506.                                         GB_Index = 1;
  507.                                         console.log('Both Not Exist');
  508.                                     }
  509.                                     else{ // Both Exist
  510.                                         GB_Index = 2;
  511.                                         console.log('Both Exist');
  512.                                     }
  513.                                 }
  514.                                 else{
  515.                                     console.log('Blob Media');
  516.                                     let selectionArr = ($(this).parent().find('._aamk').children('._acnb').length)?[...$(this).parent().find('._aamk').children('._acnb')]:[...$(this).parent().find('._aamj').children('._acnb')];
  517.                                     let idx = 0;
  518.  
  519.                                     for(let element of selectionArr){
  520.                                         idx++;
  521.                                         if($(element).attr('class').match(/_acnf/g)){
  522.                                             GB_Index = idx;
  523.                                         }
  524.                                     }
  525.                                 }
  526.  
  527.                                 let downloadLink = $('.IG_SN_DIG').find('a[data-globalindex="'+GB_Index+'"]').attr('data-href');
  528.                                 let date = new Date().getTime();
  529.                                 let timestamp = Math.floor(date / 1000);
  530.                                 let type = $('.IG_SN_DIG').find('a[data-globalindex="'+GB_Index+'"]').attr('data-type');
  531.                                 let name = $('.IG_SN_DIG').find('a[data-globalindex="'+GB_Index+'"]').attr('data-name');
  532.  
  533.                                 saveFiles(downloadLink,GL_username,name,timestamp,type);
  534.                                 $('.IG_SN_DIG').remove();
  535.                                 clearInterval(autoTimer);
  536.                             }
  537.                         },500);
  538.                     }
  539.                 });
  540.  
  541.                 // Add the mark that download is ready
  542.                 var username = $(this).find("header > div:last-child > div:first-child span > a").first().text();
  543.  
  544.                 $(this).attr('data-snig','canDownload');
  545.                 $(this).attr('data-username',username);
  546.             }
  547.         });
  548.     }
  549.  
  550.     // Create media element from blob media
  551.     async function createMediaCacheDOM(postURL,selector,style,message){
  552.         $(`${selector} a`).remove();
  553.         $(selector).append('<p style="text-align:center;font-size:20px;" id="_SNLOAD">'+ message +'</p>');
  554.         let media = await getBlobMedia(postURL);
  555.         let idx = 1;
  556.         let resource = media.shortcode_media;
  557.  
  558.         // GraphVideo
  559.         if(resource.__typename == "GraphVideo" && resource.video_url){
  560.             $(selector).append(`<a data-blob="true" data-needed="direct" data-name="video" data-type="mp4" data-username="${resource.owner.username}" data-globalIndex="${idx}" style="${style}" href="javascript:;" data-href="${resource.video_url}"><img width="100" src="${resource.display_resources[1].src}" /><br/>- ${_i18n("VID")} ${idx} -</a>`);
  561.             idx++;
  562.         }
  563.         // GraphSidecar
  564.         if(resource.__typename == "GraphSidecar" && resource.edge_sidecar_to_children){
  565.             for(let e of resource.edge_sidecar_to_children.edges){
  566.                 if(e.node.__typename == "GraphVideo"){
  567.                     $(selector).append(`<a data-blob="true" data-needed="direct" data-name="video" data-type="mp4" data-username="${resource.owner.username}" data-globalIndex="${idx}" style="${style}" href="javascript:;" data-href="${e.node.video_url}"><img width="100" src="${e.node.display_resources[1].src}" /><br/>- ${_i18n("VID")} ${idx} -</a>`);
  568.                 }
  569.  
  570.                 if(e.node.__typename == "GraphImage"){
  571.                     $(selector).append(`<a data-blob="true" data-needed="direct" data-name="photo" data-type="jpg" data-username="${resource.owner.username}" data-globalIndex="${idx}" style="${style}" href="javascript:;" data-href="${e.node.display_resources[e.node.display_resources.length - 1].src}"><img width="100" src="${e.node.display_resources[1].src}" /><br/>- ${_i18n("IMG")} ${idx} -</a>`);
  572.                 }
  573.                 idx++;
  574.             }
  575.         }
  576.         $("#_SNLOAD").remove();
  577.     }
  578.  
  579.     // Create the download dialog element funcion
  580.     function IG_createDM(a){
  581.         let style = (!a)?"position: fixed;left: 0px;right: 0px;bottom: 0px;top: 0px;":"display:none;";
  582.         $('body').append('<div class="IG_SN_DIG" style="'+style+';z-index: 500;"><div class="IG_SN_DIG_BG" style="'+style+'z-index:502;background: rgba(0,0,0,.75);"></div><div class="IG_SN_DIG_MAIN" style="z-index: 510;padding:10px 15px;top:7%;position: absolute;left: 50%;transform: translateX(-50%);width: 500px;background:#fff;border-radius: 7px;"><div class="IG_SN_DIG_TITLE"></div><div style="min-height: 100px;max-height: 80vh;overflow-y:auto;" class="IG_SN_DIG_BODY"></div></div></div>');
  583.         $('.IG_SN_DIG .IG_SN_DIG_MAIN .IG_SN_DIG_TITLE').append('<div style="position:relative;height:36px;text-align:center;"><div style="position:absolute;left:0px;line-height: 18px;">Alt+Q ['+_i18n("CLOSE")+']</div><div style="line-height: 18px;">IG Helper</div><div style="line-height: 14px;font-size:14px;">Article: <span id="article-id"></span></div><svg width="26" height="26" class="IG_SN_DIG_BTN" style="cursor:pointer;position:absolute;right:0px;top:0px;" xmlns="http://www.w3.org/2000/svg" id="bold" enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512"><path d="m14.828 12 5.303-5.303c.586-.586.586-1.536 0-2.121l-.707-.707c-.586-.586-1.536-.586-2.121 0l-5.303 5.303-5.303-5.304c-.586-.586-1.536-.586-2.121 0l-.708.707c-.586.586-.586 1.536 0 2.121l5.304 5.304-5.303 5.303c-.586.586-.586 1.536 0 2.121l.707.707c.586.586 1.536.586 2.121 0l5.303-5.303 5.303 5.303c.586.586 1.536.586 2.121 0l.707-.707c.586-.586.586-1.536 0-2.121z"/></svg></div>');
  584.     }
  585.  
  586.     // Download and rename files
  587.     function saveFiles(downloadLink,username,index,timestamp,type){
  588.         fetch(downloadLink).then(res => {
  589.             return res.blob().then(dwel => {
  590.                 const a = document.createElement("a");
  591.                 const name = username+'-'+index+'-'+timestamp+'.'+type;
  592.                 a.href = URL.createObjectURL(dwel);
  593.                 a.setAttribute("download", name);
  594.                 a.click();
  595.                 a.remove();
  596.             });
  597.         });
  598.     }
  599.  
  600.     // Supported language list
  601.     function translateText(lang){
  602.         return {
  603.             "zh-TW": {
  604.                 "CLOSE": "關閉",
  605.                 "IMG": "相片",
  606.                 "VID": "影片",
  607.                 "DDL": "快速下載",
  608.                 "DDL_INTRO": "勾選後將直接下載點選當下位置的相片/影片",
  609.                 "DW": "下載",
  610.                 "THUMBNAIL_INTRO": "下載影片縮圖",
  611.                 "LOAD_BLOB_ONE": "正在載入二進位大型物件...",
  612.                 "LOAD_BLOB_MULTIPLE": "正在載入多個二進位大型物件...",
  613.                 "LOAD_BLOB_RELOAD": "正在重新載入二進位大型物件...",
  614.                 "NO_VID_URL": "找不到影片網址"
  615.             },
  616.             "zh-CN": {
  617.                 "CLOSE": "关闭",
  618.                 "IMG": "图像",
  619.                 "VID": "视频",
  620.                 "DDL": "便捷下载",
  621.                 "DDL_INTRO": "勾选后将直接下载點擊當下位置的图像/视频",
  622.                 "DW": "下载",
  623.                 "THUMBNAIL_INTRO": "下载视频缩略图",
  624.                 "LOAD_BLOB_ONE": "正在载入大型媒体对象...",
  625.                 "LOAD_BLOB_MULTIPLE": "正在载入多个大型媒体对象...",
  626.                 "LOAD_BLOB_RELOAD": "正在重新载入大型媒体对象...",
  627.                 "NO_VID_URL": "找不到视频网址"
  628.             },
  629.             "en-US": {
  630.                 "CLOSE": "Close",
  631.                 "IMG": "Image",
  632.                 "VID": "Video",
  633.                 "DDL": "Quick Download",
  634.                 "DDL_INTRO": "Checking it will direct download current photo/media in the posts.",
  635.                 "DW": "Download",
  636.                 "THUMBNAIL_INTRO": "Download video thumbnail.",
  637.                 "LOAD_BLOB_ONE": "Loading Blob Media...",
  638.                 "LOAD_BLOB_MULTIPLE": "Loading Blob Media and others...",
  639.                 "LOAD_BLOB_RELOAD": "Detect Blob Media, now reloading...",
  640.                 "NO_VID_URL": "Can not find video url."
  641.             }
  642.         };
  643.     }
  644.  
  645.     // Translate display text to user country
  646.     function _i18n(text){
  647.         let userLang = (lang)?lang:"en-US";
  648.         let translate = {
  649.             "zh-TW": function(){
  650.                 return translateText()["zh-TW"];
  651.             },
  652.             "zh-HK": function(){
  653.                 return translateText()["zh-TW"];
  654.             },
  655.             "zh-MO": function(){
  656.                 return translateText()["zh-TW"];
  657.             },
  658.             "zh-CN": function(){
  659.                 return translateText()["zh-CN"];
  660.             },
  661.             "en-US": function(){
  662.                 return translateText()["en-US"];
  663.             }
  664.         }
  665.  
  666.         try{
  667.             return translate[lang]()[text];
  668.         }
  669.         catch{
  670.             return translate["en-US"]()[text];
  671.         }
  672.     }
  673.  
  674.     // Running if document is ready
  675.     $(function(){
  676.         // Ready~? GO!!
  677.         onReadyMyDW();
  678.  
  679.         // Close the download dialog if user click the close icon
  680.         $('body').on('click','.IG_SN_DIG_BTN,.IG_SN_DIG_BG',function(){
  681.             $('.IG_SN_DIG').remove();
  682.         });
  683.  
  684.         // Hot key [Alt+Q] to close the download dialog
  685.         $(window).keydown(function(e){
  686.             if (e.keyCode == '81' && e.altKey){
  687.                 $('.IG_SN_DIG').remove();
  688.                 e.preventDefault();
  689.             }
  690.         });
  691.         $('body').on('click','.AutoDownload',function(){
  692.             if($('.AutoDownload:checked').length){
  693.                 GM_setValue('AutoDownload',true);
  694.             }
  695.             else{
  696.                 GM_setValue('AutoDownload',false);
  697.             }
  698.         });
  699.  
  700.         $('body').on('click','a[data-needed="direct"]',function(){
  701.             let date = new Date().getTime();
  702.             let timestamp = Math.floor(date / 1000);
  703.             let username = ($(this).attr('data-username')) ? $(this).attr('data-username') : GL_username;
  704.  
  705.             saveFiles($(this).attr('data-href'),username,$(this).attr('data-name'),timestamp,$(this).attr('data-type'));
  706.         });
  707.  
  708.         // Running if user left-click download icon in stories
  709.         $('body').on('click','.IG_DWSTORY',function(){
  710.             onStoryDW(true);
  711.         });
  712.  
  713.         // Running if user left-click download icon in stories
  714.         $('body').on('click','.IG_DWSTORY_THUMBNAIL',function(){
  715.             onStoryThumbnailDW(true);
  716.         });
  717.  
  718.         // Running if user left-click download icon in profile
  719.         $('body').on('click','.IG_DWPROFILE',function(e){
  720.             e.stopPropagation();
  721.             onProfileDW(true);
  722.         });
  723.  
  724.         // Running if user left-click download icon in highlight stories
  725.         $('body').on('click','.IG_DWHISTORY',function(){
  726.             onHighlightsStoryDW(true);
  727.         });
  728.  
  729.         // Running if user left-click download icon in highlight stories
  730.         $('body').on('click','.IG_DWHISTORY_THUMBNAIL',function(){
  731.             onHighlightsStoryThumbnailDW(true);
  732.         });
  733.     });
  734.  
  735. })(jQuery);