IG小助手

一键下载对方 Instagram 帖子中的相片、视频甚至是他们的快拍、Reels及头像图片!

当前为 2024-02-01 提交的版本,查看 最新版本

  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.14.2
  9. // @description Downloading is possible for both photos and videos from posts, as well as for stories, reels or profile picture.
  10. // @description:zh-TW 一鍵下載對方 Instagram 貼文中的相片、影片甚至是他們的限時動態、連續短片及大頭貼圖片!
  11. // @description:zh-CN 一键下载对方 Instagram 帖子中的相片、视频甚至是他们的快拍、Reels及头像图片!
  12. // @description:ja 投稿された写真や動画だけでなく、ストーリーズやリール動画からもダウンロードが可能です。
  13. // @description:ko 게시물에 게시된 사진과 동영상 뿐만 아니라 스토리나 릴스에서도 다운로드가 가능합니다.
  14. // @author SN-Koarashi (5026)
  15. // @match https://*.instagram.com/*
  16. // @grant GM_addStyle
  17. // @grant GM_setValue
  18. // @grant GM_getValue
  19. // @grant GM_xmlhttpRequest
  20. // @grant GM_registerMenuCommand
  21. // @grant GM_getResourceText
  22. // @connect i.instagram.com
  23. // @require https://code.jquery.com/jquery-3.6.3.min.js#sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=
  24. // @resource INTERNAL_CSS https://raw.githubusercontent.com/SN-Koarashi/ig-helper/master/style.css
  25. // @supportURL https://github.com/SN-Koarashi/ig-helper/
  26. // @contributionURL https://ko-fi.com/snkoarashi
  27. // @icon https://www.google.com/s2/favicons?domain=www.instagram.com
  28. // @compatible firefox >= 87
  29. // @compatible chrome >= 90
  30. // @compatible edge >= 90
  31. // @license GPL-3.0-only
  32. // ==/UserScript==
  33.  
  34. (function($) {
  35. 'use strict';
  36. // Icon download by https://www.flaticon.com/authors/pixel-perfect
  37.  
  38. /******** USER SETTINGS ********/
  39. // !!! DO NOT CHANGE THIS AREA !!!
  40. // PLEASE CHANGE SETTING WITH MENU
  41. const USER_SETTING = {
  42. 'AUTO_RENAME': (GM_getValue('AUTO_RENAME'))?GM_getValue('AUTO_RENAME'):true,
  43. 'RENAME_SHORTCODE': (GM_getValue('RENAME_SHORTCODE'))?GM_getValue('RENAME_SHORTCODE'):true,
  44. 'DISABLE_VIDEO_LOOPING': (GM_getValue('DISABLE_VIDEO_LOOPING'))?GM_getValue('DISABLE_VIDEO_LOOPING'):false,
  45. 'REDIRECT_RIGHT_CLICK_USER_STORY_PICTURE': (GM_getValue('REDIRECT_RIGHT_CLICK_USER_STORY_PICTURE'))?GM_getValue('REDIRECT_RIGHT_CLICK_USER_STORY_PICTURE'):false,
  46. 'FORCE_FETCH_ALL_RESOURCES': (GM_getValue('FORCE_FETCH_ALL_RESOURCES'))?GM_getValue('FORCE_FETCH_ALL_RESOURCES'):false,
  47. 'DIRECT_DOWNLOAD_WHEN_SINGLE': (GM_getValue('DIRECT_DOWNLOAD_WHEN_SINGLE'))?GM_getValue('DIRECT_DOWNLOAD_WHEN_SINGLE'):false,
  48. 'DIRECT_DOWNLOAD_ALL': (GM_getValue('DIRECT_DOWNLOAD_ALL'))?GM_getValue('DIRECT_DOWNLOAD_ALL'):false
  49. };
  50. /*******************************/
  51.  
  52. const checkInterval = 250;
  53. const lang = navigator.language || navigator.userLanguage;
  54. const style = GM_getResourceText("INTERNAL_CSS");
  55.  
  56. GM_addStyle(style);
  57. GM_registerMenuCommand(_i18n('SETTING'), () => {
  58. showSetting();
  59. });
  60. GM_registerMenuCommand(_i18n('DEBUG'), () => {
  61. showDebugDOM();
  62. });
  63.  
  64. var currentURL = location.href;
  65. var currentHeight = $(document).height();
  66. var firstStarted = false;
  67. var pageLoaded = false;
  68.  
  69. var GL_postPath;
  70. var GL_username;
  71. var GL_repeat;
  72. var GL_dataCache = {
  73. stories: {},
  74. highlights: {}
  75. };
  76.  
  77. // Main Timer
  78. var timer = setInterval(function(){
  79. currentHeight = $(document).height();
  80. // Call Instagram dialog function if url changed.
  81. if(currentURL != location.href || !firstStarted || !pageLoaded){
  82. clearInterval(GL_repeat);
  83. pageLoaded = false;
  84. firstStarted = true;
  85. currentURL = location.href;
  86.  
  87. if(location.href.startsWith("https://www.instagram.com/p/") || location.href.startsWith("https://www.instagram.com/reel/")){
  88. GL_dataCache.stories = {};
  89.  
  90. console.log('isDialog');
  91. setTimeout(()=>{
  92. onReadyMyDW(false);
  93. },150);
  94. pageLoaded = true;
  95. }
  96.  
  97. if(location.href.startsWith("https://www.instagram.com/reels/")){
  98. console.log('isReels');
  99. setTimeout(()=>{
  100. onReels(false);
  101. },150);
  102. pageLoaded = true;
  103. }
  104.  
  105. if(location.href.split("?")[0] == "https://www.instagram.com/"){
  106. GL_dataCache.stories = {};
  107.  
  108. console.log('isHomepage');
  109. setTimeout(()=>{
  110. onReadyMyDW(false);
  111. },150);
  112. pageLoaded = true;
  113. }
  114. if($('div[id^="mount"] > div > div > div').first().is(':hidden') && $('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)){
  115. console.log('isProfile');
  116. setTimeout(()=>{
  117. onProfileAvatar(false);
  118. },150);
  119. pageLoaded = true;
  120. }
  121.  
  122. if(!pageLoaded){
  123. // Call Instagram stories function
  124. if(location.href.match(/^(https:\/\/www\.instagram\.com\/stories\/highlights\/)/ig)){
  125. GL_dataCache.highlights = {};
  126.  
  127. console.log('isHighlightsStory');
  128. onHighlightsStory(false);
  129. GL_repeat = setInterval(()=>{
  130. onHighlightsStoryThumbnail(false);
  131. },checkInterval);
  132.  
  133. if($(".IG_DWHISTORY").length) setTimeout(()=>{pageLoaded = true;},150);
  134. }
  135. else if(location.href.match(/^(https:\/\/www\.instagram\.com\/stories\/)/ig)){
  136. console.log('isStory');
  137. onStory(false);
  138. onStoryThumbnail(false);
  139.  
  140. if($(".IG_DWSTORY").length) setTimeout(()=>{pageLoaded = true;},150);
  141. }
  142. else{
  143. pageLoaded = false;
  144. // Remove the download icon
  145. $('.IG_DWSTORY').remove();
  146. $('.IG_DWSTORY_THUMBNAIL').remove();
  147. }
  148. }
  149.  
  150. }
  151. },checkInterval);
  152.  
  153. // Call general function when user scroll the page
  154. $(document).scroll(function(){
  155. if(currentHeight != $(this).height() && location.href.split("?")[0] == "https://www.instagram.com/"){
  156. onReadyMyDW();
  157. }
  158. });
  159.  
  160. /**
  161. * onProfileAvatar
  162. * Trigger user avatar download event or button display event.
  163. *
  164. * @param {Boolean} isDownload - Check if it is a download operation
  165. * @return {void}
  166. */
  167. async function onProfileAvatar(isDownload){
  168. if(isDownload){
  169. let date = new Date().getTime();
  170. let timestamp = Math.floor(date / 1000);
  171. let username = location.href.replace(/\/$/ig,'').split('/').at(-1);
  172. let userInfo = await getUserId(username);
  173. try{
  174. let dataURL = await getUserHighSizeProfile(userInfo.user.pk);
  175. saveFiles(dataURL,username,"avatar",timestamp,'jpg');
  176. }
  177. catch(err){
  178. saveFiles(userInfo.user.profile_pic_url,username,"avatar",timestamp,'jpg');
  179. }
  180. }
  181. else{
  182. // Add the profile download button
  183. if(!$('.IG_DWPROFILE').length){
  184. let profileTimer = setInterval(()=>{
  185. if($('.IG_DWPROFILE').length) clearInterval(profileTimer);
  186.  
  187. $('body > div main canvas._aarh').parent().append(`<div title="${_i18n("DW")}" class="IG_DWPROFILE"><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>`);
  188. },150);
  189. }
  190. }
  191. }
  192.  
  193. /**
  194. * onHighlightsStory
  195. * Trigger user's highlight download event or button display event.
  196. *
  197. * @param {Boolean} isDownload - Check if it is a download operation
  198. * @return {void}
  199. */
  200. async function onHighlightsStory(isDownload){
  201. if(isDownload){
  202. let date = new Date().getTime();
  203. let timestamp = Math.floor(date / 1000);
  204. let highlightId = location.href.replace(/\/$/ig,'').split('/').at(-1);
  205. let nowIndex = $("body > div section._ac0a header._ac0k > ._ac3r ._ac3n ._ac3p[style]").length ||
  206. $('body > div section:visible > div > div:not([class]) > div > div div.x1ned7t2.x78zum5 div.x1caxmr6').length ||
  207. $('body > div div:not([hidden]) section:visible > div div[style]:not([class]) > div').find('div div.x1ned7t2.x78zum5 div.x1caxmr6').length;
  208. let username = "";
  209. let target = 0;
  210.  
  211. if(GL_dataCache.highlights[highlightId]){
  212. console.log('Fetch from memory cache:', highlightId);
  213.  
  214. let totIndex = GL_dataCache.highlights[highlightId].data.reels_media[0].items.length;
  215. username = GL_dataCache.highlights[highlightId].data.reels_media[0].owner.username;
  216. target = GL_dataCache.highlights[highlightId].data.reels_media[0].items[totIndex-nowIndex];
  217. }
  218. else{
  219. let highStories = await getHighlightStories(highlightId);
  220. let totIndex = highStories.data.reels_media[0].items.length;
  221. username = highStories.data.reels_media[0].owner.username;
  222. target = highStories.data.reels_media[0].items[totIndex-nowIndex];
  223.  
  224. GL_dataCache.highlights[highlightId] = highStories;
  225. }
  226.  
  227.  
  228.  
  229. if(target.is_video){
  230. saveFiles(target.video_resources.at(-1).src,username,"highlights",timestamp,'mp4', highlightId);
  231. }
  232. else{
  233. saveFiles(target.display_resources.at(-1).src,username,"highlights",timestamp,'jpg', highlightId);
  234. }
  235. }
  236. else{
  237. // Add the stories download button
  238. if(!$('.IG_DWHISTORY').length){
  239. let $element = null;
  240.  
  241. // Default detecter (section layout mode)
  242. if($('body > div section._ac0a').length > 0){
  243. $element = $('body > div section:visible._ac0a');
  244. }
  245. else{
  246. $element = $('body > div section:visible > div > div[style]:not([class])');
  247. $element.css('position','relative');
  248. }
  249.  
  250. // Detecter for div layout mode
  251. // GitHub issue #3: DiceMast3r
  252. if($element.length === 0){
  253. let $$element = $('body > div div:not([hidden]) section:visible > div div[style]:not([class]) > div');
  254. let nowSize = 0;
  255.  
  256. $$element.each(function(){
  257. if($(this).width() > nowSize){
  258. nowSize = $(this).width();
  259. $element = $(this);
  260. }
  261. });
  262. }
  263.  
  264.  
  265. if($element != null){
  266. //$element.css('position','relative');
  267. $element.append(`<div title="${_i18n("DW")}" class="IG_DWHISTORY"><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>`);
  268. }
  269. }
  270. }
  271. }
  272.  
  273. /**
  274. * onHighlightsStoryThumbnail
  275. * Trigger user's highlight video thumbnail download event or button display event.
  276. *
  277. * @param {Boolean} isDownload - Check if it is a download operation
  278. * @return {void}
  279. */
  280. async function onHighlightsStoryThumbnail(isDownload){
  281. if(isDownload){
  282. let date = new Date().getTime();
  283. let timestamp = Math.floor(date / 1000);
  284. let highlightId = location.href.replace(/\/$/ig,'').split('/').at(-1);
  285. let username = "";
  286. let nowIndex = $("body > div section._ac0a header._ac0k > ._ac3r ._ac3n ._ac3p[style]").length ||
  287. $('body > div section:visible > div > div:not([class]) > div > div div.x1ned7t2.x78zum5 div.x1caxmr6').length ||
  288. $('body > div div:not([hidden]) section:visible > div div[style]:not([class]) > div').find('div div.x1ned7t2.x78zum5 div.x1caxmr6').length;
  289. let target = "";
  290.  
  291. if(GL_dataCache.highlights[highlightId]){
  292. console.log('Fetch from memory cache:', highlightId);
  293.  
  294. let totIndex = GL_dataCache.highlights[highlightId].data.reels_media[0].items.length;
  295. username = GL_dataCache.highlights[highlightId].data.reels_media[0].owner.username;
  296. target = GL_dataCache.highlights[highlightId].data.reels_media[0].items[totIndex-nowIndex];
  297. }
  298. else{
  299. let highStories = await getHighlightStories(highlightId);
  300. let totIndex = highStories.data.reels_media[0].items.length;
  301. username = highStories.data.reels_media[0].owner.username;
  302. target = highStories.data.reels_media[0].items[totIndex-nowIndex];
  303.  
  304. GL_dataCache.highlights[highlightId] = highStories;
  305. }
  306.  
  307. saveFiles(target.display_resources.at(-1).src,username,"highlights",timestamp,'jpg', highlightId);
  308. }
  309. else{
  310. if($('body > div section video.xh8yej3').length){
  311. // Add the stories download button
  312. if(!$('.IG_DWHISTORY_THUMBNAIL').length){
  313. let $element = null;
  314.  
  315. // Default detecter (section layout mode)
  316. if($('body > div section._ac0a').length > 0){
  317. $element = $('body > div section:visible._ac0a');
  318. }
  319. else{
  320. $element = $('body > div section:visible > div > div[style]:not([class])');
  321. $element.css('position','relative');
  322. }
  323.  
  324. // Detecter for div layout mode
  325. // GitHub issue #3: DiceMast3r
  326. if($element.length === 0){
  327. let $$element = $('body > div div:not([hidden]) section:visible > div div[style]:not([class]) > div');
  328. let nowSize = 0;
  329.  
  330. $$element.each(function(){
  331. if($(this).width() > nowSize){
  332. nowSize = $(this).width();
  333. $element = $(this);
  334. }
  335. });
  336. }
  337.  
  338. if($element != null){
  339. $element.append(`<div title="${_i18n("THUMBNAIL_INTRO")}" class="IG_DWHISTORY_THUMBNAIL"><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>`);
  340. }
  341. }
  342. }
  343. else{
  344. $('.IG_DWHISTORY_THUMBNAIL').remove();
  345. }
  346. }
  347. }
  348.  
  349. /**
  350. * onStory
  351. * Trigger user's story download event or button display event.
  352. *
  353. * @param {Boolean} isDownload - Check if it is a download operation
  354. * @return {void}
  355. */
  356. async function onStory(isDownload,isForce){
  357. if(isDownload){
  358. let date = new Date().getTime();
  359. let timestamp = Math.floor(date / 1000);
  360. let username = $("body > div section._ac0a header._ac0k ._ac0l a + div a").first().text() || location.pathname.split('/').at(2);
  361.  
  362. if($('body > div section:visible video[playsinline]').length > 0){
  363. // Download stories if it is video
  364. let type = "mp4";
  365. let videoURL = "";
  366. let targetURL = location.pathname.replace(/\/$/ig,'').split("/").at(-1);
  367.  
  368. if(GL_dataCache.stories[username] && !isForce){
  369. console.log('Fetch from memory cache:', username);
  370. GL_dataCache.stories[username].data.reels_media[0].items.forEach(item => {
  371. if(item.id == targetURL){
  372. videoURL = item.video_resources[0].src;
  373. }
  374. });
  375.  
  376. if(videoURL.length == 0){
  377. console.log('Memory cache not found, try fetch from API:', username);
  378. onStory(true,true);
  379. return;
  380. }
  381. }
  382. else{
  383. let userInfo = await getUserId(username);
  384. let userId = userInfo.user.pk;
  385. let stories = await getStories(userId);
  386.  
  387. stories.data.reels_media[0].items.forEach(item => {
  388. if(item.id == targetURL){
  389. videoURL = item.video_resources[0].src;
  390. }
  391. });
  392.  
  393. // GitHub issue #4: thinkpad4
  394. if(videoURL.length == 0){
  395. $('body > div section:visible div.x1ned7t2.x78zum5 > div').each(function(index){
  396. if($(this).hasClass('x1lix1fw')){
  397. if($(this).children().length > 0){
  398. videoURL = stories.data.reels_media[0].items[index].video_resources[0].src;
  399. }
  400. }
  401. });
  402. }
  403.  
  404. GL_dataCache.stories[username] = stories;
  405. }
  406.  
  407. if(videoURL.length == 0){
  408. alert(_i18n("NO_VID_URL"));
  409. }
  410. else{
  411. saveFiles(videoURL,username,"stories",timestamp,type);
  412. }
  413.  
  414. }
  415. else{
  416. // Download stories if it is image
  417. let srcset = $('body > div section:visible img[referrerpolicy][class], body > div section:visible img[crossorigin][class]:not([alt])').attr('srcset')?.split(',')[0]?.split(' ')[0];
  418. let link = (srcset)?srcset:$('body > div section:visible img[referrerpolicy][class], body > div section:visible img[crossorigin][class]:not([alt])').attr('src');
  419.  
  420. if(!link){
  421. // _aa63 mean stories picture in stories page (not avatar)
  422. let $element = $('body > div section:visible img._aa63');
  423. link = ($element.attr('srcset'))?$element.attr('srcset')?.split(',')[0]?.split(' ')[0]:$element.attr('src');
  424. }
  425.  
  426. let downloadLink = link;
  427. let type = 'jpg';
  428.  
  429. saveFiles(downloadLink,username,"stories",timestamp,type);
  430. }
  431. }
  432. else{
  433. // Add the stories download button
  434. let style = "position: absolute;right:-40px;top:15px;padding:5px;line-height:1;background:#fff;border-radius: 5px;cursor:pointer;";
  435. if(!$('.IG_DWSTORY').length){
  436. GL_dataCache.stories = {};
  437. let $element = null;
  438. // Default detecter (section layout mode)
  439. if($('body > div section._ac0a').length > 0){
  440. $element = $('body > div section:visible._ac0a');
  441. }
  442. // detecter (single story layout mode)
  443. else{
  444. $element = $('body > div section:visible > div > div[style]:not([class])');
  445. $element.css('position','relative');
  446. }
  447.  
  448.  
  449. // Detecter for div layout mode
  450. // GitHub issue #3: DiceMast3r
  451. if($element.length === 0){
  452. let $$element = $('body > div div:not([hidden]) section:visible > div div[style]:not([class]) > div');
  453. let nowSize = 0;
  454.  
  455. $$element.each(function(){
  456. if($(this).width() > nowSize){
  457. nowSize = $(this).width();
  458. $element = $(this);
  459. }
  460. });
  461. }
  462.  
  463.  
  464. if($element != null){
  465. $element.css('position','relative');
  466. $element.append(`<div title="${_i18n("DW")}" class="IG_DWSTORY"><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>`);
  467. }
  468. }
  469. }
  470. }
  471.  
  472. /**
  473. * onStoryThumbnail
  474. * Trigger user's story video thumbnail download event or button display event.
  475. *
  476. * @param {Boolean} isDownload - Check if it is a download operation
  477. * @return {void}
  478. */
  479. async function onStoryThumbnail(isDownload,isForce){
  480. if(isDownload){
  481. // Download stories if it is video
  482. let date = new Date().getTime();
  483. let timestamp = Math.floor(date / 1000);
  484. let type = 'jpg';
  485. let username = $("body > div section._ac0a header._ac0k ._ac0l a + div a").first().text() || location.pathname.split('/').at(2);
  486. 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;';
  487. // Download thumbnail
  488. let targetURL = location.pathname.replace(/\/$/ig,'').split("/").at(-1);
  489. let videoThumbnailURL = "";
  490.  
  491.  
  492. if(GL_dataCache.stories[username] && !isForce){
  493. console.log('Fetch from memory cache:', username);
  494. GL_dataCache.stories[username].data.reels_media[0].items.forEach(item => {
  495. if(item.id == targetURL){
  496. videoThumbnailURL = item.display_url;
  497. }
  498. });
  499.  
  500. if(videoThumbnailURL.length == 0){
  501. console.log('Memory cache not found, try fetch from API:', username);
  502. onStoryThumbnail(true,true);
  503. return;
  504. }
  505. }
  506. else{
  507. let userInfo = await getUserId(username);
  508. let userId = userInfo.user.pk;
  509. let stories = await getStories(userId);
  510.  
  511. stories.data.reels_media[0].items.forEach(item => {
  512. if(item.id == targetURL){
  513. videoThumbnailURL = item.display_url;
  514. }
  515. });
  516.  
  517. // GitHub issue #4: thinkpad4
  518. if(videoThumbnailURL.length == 0){
  519. $('body > div section:visible div.x1ned7t2.x78zum5 > div').each(function(index){
  520. if($(this).hasClass('x1lix1fw')){
  521. if($(this).children().length > 0){
  522. videoThumbnailURL = stories.data.reels_media[0].items[index].display_url;
  523. }
  524. }
  525. });
  526. }
  527. }
  528.  
  529. saveFiles(videoThumbnailURL,username,"thumbnail",timestamp,type);
  530. }
  531. else{
  532. if($('body > div section video.xh8yej3').length){
  533. // Add the stories download button
  534. if(!$('.IG_DWSTORY_THUMBNAIL').length){
  535. let $element = null;
  536. // Default detecter (section layout mode)
  537. if($('body > div section._ac0a').length > 0){
  538. $element = $('body > div section:visible._ac0a');
  539. }
  540. // detecter (single story layout mode)
  541. else{
  542. $element = $('body > div section:visible > div > div[style]:not([class])');
  543. $element.css('position','relative');
  544. }
  545.  
  546. // Detecter for div layout mode
  547. // GitHub issue #3: DiceMast3r
  548. if($element.length === 0){
  549. let $$element = $('body > div div:not([hidden]) section:visible > div div[style]:not([class]) > div');
  550. let nowSize = 0;
  551.  
  552. $$element.each(function(){
  553. if($(this).width() > nowSize){
  554. nowSize = $(this).width();
  555. $element = $(this);
  556. }
  557. });
  558. }
  559.  
  560.  
  561. if($element != null){
  562. $element.css('position','relative');
  563. $element.append(`<div title="${_i18n("THUMBNAIL_INTRO")}" class="IG_DWSTORY_THUMBNAIL"><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>`);
  564. }
  565. }
  566. }
  567. else{
  568. $('.IG_DWSTORY_THUMBNAIL').remove();
  569. }
  570. }
  571. }
  572.  
  573. /**
  574. * onReels
  575. * Trigger user's reels download event or button display event.
  576. *
  577. * @param {Boolean} isDownload - Check if it is a download operation
  578. * @param {Boolean} isVideo - Check if reel is a video element
  579. * @return {void}
  580. */
  581. async function onReels(isDownload, isVideo){
  582. if(isDownload){
  583. let reelsPath = location.href.split('?').at(0).split('instagram.com/reels/').at(-1).replaceAll('/','');
  584. let data = await getBlobMedia(reelsPath);
  585. let timestamp = new Date().getTime();
  586.  
  587. if(isVideo && data.shortcode_media.is_video){
  588. let type = 'mp4';
  589. saveFiles(data.shortcode_media.video_url,data.shortcode_media.owner.username,"reels",timestamp,type,reelsPath);
  590. }
  591. else{
  592. let type = 'jpg';
  593. saveFiles(data.shortcode_media.display_resources.at(-1).src,data.shortcode_media.owner.username,"reels",timestamp,type,reelsPath);
  594. }
  595. }
  596. else{
  597. //$('.IG_REELS_THUMBNAIL, .IG_REELS').remove();
  598. var timer = setInterval(()=>{
  599. if($('section > main[role="main"] > div div.x1qjc9v5 video').length > 0){
  600. clearInterval(timer);
  601. $('section > main[role="main"] > div').children('div').each(function(){
  602. if($(this).children().length > 0){
  603. if(!$(this).children().find('.IG_REELS').length){
  604. $(this).children().css('position','relative');
  605.  
  606. $(this).children().append(`<div title="${_i18n("DW")}" class="IG_REELS"><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>`);
  607. $(this).children().append(`<div title="${_i18n("THUMBNAIL_INTRO")}" class="IG_REELS_THUMBNAIL"><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>`);
  608.  
  609. // Disable video autoplay
  610. if(USER_SETTING.DISABLE_VIDEO_LOOPING){
  611. $(this).find('video').each(function(){
  612. if(!$(this).data('loop')){
  613. console.log('Added video event listener');
  614. $(this).on('ended',function(){
  615. $(this).attr('data-loop', true);
  616. $(this).parent().find('.xpgaw4o').removeAttr('style');
  617. console.log('paused');
  618.  
  619. this.pause();
  620. });
  621. }
  622. });
  623. }
  624. }
  625. }
  626. });
  627. }
  628. },250);
  629. }
  630. }
  631.  
  632. /**
  633. * getHighlightStories
  634. * Get a list of all stories in highlight Id.
  635. *
  636. * @param {Integer} highlightId
  637. * @return {Object}
  638. */
  639. function getHighlightStories(highlightId){
  640. return new Promise((resolve,reject)=>{
  641. 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`;
  642.  
  643. GM_xmlhttpRequest({
  644. method: "GET",
  645. url: getURL,
  646. onload: function(response) {
  647. let obj = JSON.parse(response.response);
  648. resolve(obj);
  649. },
  650. onerror: function(err){
  651. reject(err);
  652. }
  653. });
  654. });
  655. }
  656.  
  657. /**
  658. * getStories
  659. * Get a list of all stories in user Id.
  660. *
  661. * @param {Integer} userId
  662. * @return {Object}
  663. */
  664. function getStories(userId){
  665. return new Promise((resolve,reject)=>{
  666. 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`;
  667.  
  668. GM_xmlhttpRequest({
  669. method: "GET",
  670. url: getURL,
  671. onload: function(response) {
  672. let obj = JSON.parse(response.response);
  673. resolve(obj);
  674. },
  675. onerror: function(err){
  676. reject(err);
  677. }
  678. });
  679. });
  680. }
  681.  
  682. /**
  683. * getUserId
  684. * Get user's id with username
  685. *
  686. * @param {String} username
  687. * @return {Integer}
  688. */
  689. function getUserId(username){
  690. return new Promise((resolve,reject)=>{
  691. let getURL = `https://www.instagram.com/web/search/topsearch/?query=${username}`;
  692.  
  693. GM_xmlhttpRequest({
  694. method: "GET",
  695. url: getURL,
  696. onload: function(response) {
  697. let obj = JSON.parse(response.response);
  698. resolve(obj.users[0]);
  699. },
  700. onerror: function(err){
  701. reject(err);
  702. }
  703. });
  704. });
  705. }
  706.  
  707. /**
  708. * getUserHighSizeProfile
  709. * Get user's high quality avatar image.
  710. *
  711. * @param {Integer} userId
  712. * @return {String}
  713. */
  714. function getUserHighSizeProfile(userId){
  715. return new Promise((resolve,reject)=>{
  716. let getURL = `https://i.instagram.com/api/v1/users/${userId}/info/`;
  717.  
  718. GM_xmlhttpRequest({
  719. method: "GET",
  720. url: getURL,
  721. headers: {
  722. 'User-Agent': 'Mozilla/5.0 (Linux; Android 10; Pixel 7 XL)Build/RP1A.20845.002; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/5.0 Chrome/117.0.5938.60 Mobile Safari/537.36 Instagram 307.0.0.34.111'
  723. },
  724. onload: function(response) {
  725. let obj = JSON.parse(response.response);
  726. if(obj.status !== 'ok'){
  727. reject('faild');
  728. }
  729. else{
  730. resolve(obj.user.hd_profile_pic_url_info?.url);
  731. }
  732. },
  733. onerror: function(err){
  734. reject(err);
  735. }
  736. });
  737. });
  738. }
  739.  
  740. /**
  741. * getPostOwner
  742. * Get post's author with post shortcode
  743. *
  744. * @param {String} postPath
  745. * @return {String}
  746. */
  747. function getPostOwner(postPath){
  748. return new Promise((resolve,reject)=>{
  749. if(!postPath) reject("NOPATH");
  750. let postShortCode = postPath;
  751. let getURL = `https://www.instagram.com/graphql/query/?query_hash=2c4c2e343a8f64c625ba02b2aa12c7f8&variables=%7B%22shortcode%22:%22${postShortCode}%22}`;
  752.  
  753. GM_xmlhttpRequest({
  754. method: "GET",
  755. url: getURL,
  756. onload: function(response) {
  757. let obj = JSON.parse(response.response);
  758. resolve(obj.data.shortcode_media.owner.username);
  759. },
  760. onerror: function(err){
  761. reject(err);
  762. }
  763. });
  764. });
  765. }
  766.  
  767. /**
  768. * getBlobMedia
  769. * Get list of all media files in post with post shortcode
  770. *
  771. * @param {String} postPath
  772. * @return {Object}
  773. */
  774. function getBlobMedia(postPath){
  775. return new Promise((resolve,reject)=>{
  776. if(!postPath) reject("NOPATH");
  777. let postShortCode = postPath;
  778. let getURL = `https://www.instagram.com/graphql/query/?query_hash=2c4c2e343a8f64c625ba02b2aa12c7f8&variables=%7B%22shortcode%22:%22${postShortCode}%22}`;
  779.  
  780. GM_xmlhttpRequest({
  781. method: "GET",
  782. url: getURL,
  783. onload: function(response) {
  784. let obj = JSON.parse(response.response);
  785. console.log(obj);
  786. resolve(obj.data);
  787. },
  788. onerror: function(err){
  789. reject(err);
  790. }
  791. });
  792. });
  793. }
  794.  
  795. /**
  796. * onReadyMyDW
  797. * Create an event entry point for the download button for the post
  798. *
  799. * @param {Boolean} NoDialog - Check if it not showing the dialog
  800. * @return {void}
  801. */
  802. function onReadyMyDW(NoDialog){
  803. // Whether is Instagram dialog?
  804. if(!NoDialog){
  805. // Running if it is dialog
  806. $('article, main > div > div.xdt5ytf > div').each(function(){
  807. $(this).removeAttr('data-snig');
  808. $(this).unbind('click');
  809. });
  810. $('.SNKMS_IG_DW_MAIN,.SNKMS_IG_DW_MAIN_VIDEO').remove();
  811. }
  812. if(NoDialog == false){
  813. var repeat = setInterval(() => {
  814. // div.xdt5ytf << (sigle post in top, not floating) >>
  815. if($('article[data-snig="canDownload"], section:visible > main > div > div.xdt5ytf[data-snig="canDownload"], div[id^="mount"] > div > div > div.x1n2onr6.x1vjfegm div[data-snig="canDownload"]').length > 0) clearInterval(repeat);
  816. createDownloadButton();
  817. },250);
  818. }
  819. else{
  820. createDownloadButton();
  821. }
  822. }
  823.  
  824. /**
  825. * createDownloadButton
  826. * Create a download button in the upper right corner of each post
  827. *
  828. * @return {void}
  829. */
  830. function createDownloadButton(){
  831. // Add download icon per each posts
  832. $('article, section:visible > main > div > div.xdt5ytf, div._aap0[role="presentation"]').each(function(index){
  833. // If it is have not download icon
  834. // class x1iyjqo2 mean user profile pages post list container
  835. if(!$(this).attr('data-snig') && !$(this).hasClass('x1iyjqo2') && !$(this).children('article')?.hasClass('x1iyjqo2')){
  836. console.log("Found article");
  837. var rightPos = 15;
  838. var topPos = 15;
  839. var $mainElement = $(this);
  840.  
  841. // not loop each in single top post
  842. if(this.tagName === "DIV" && index != 0){
  843. return;
  844. }
  845.  
  846. // New post UI by Discord: ken
  847. if(this.tagName === "DIV" && $(this).attr('role') === "presentation"){
  848. rightPos = 28;
  849. topPos = 75;
  850. $mainElement = $('div._aap0[role="presentation"]').parents('div._aamm').parent().parent().parent().parent().parent();
  851. }
  852.  
  853.  
  854. // Add the download icon
  855. let $childElement = $mainElement.children("div").children("div");
  856. $childElement.eq((this.tagName === "DIV")? 0 : $childElement.length - 2).append(`<div title="${_i18n("DW")}" class="SNKMS_IG_DW_MAIN" style="right:${rightPos}px;top:${topPos}px;"><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>`);
  857. $childElement.css('position','relative');
  858.  
  859. // Disable video autoplay
  860. if(USER_SETTING.DISABLE_VIDEO_LOOPING){
  861. $(this).find('video').each(function(){
  862. if(!$(this).data('loop')){
  863. console.log('Added video event listener');
  864. $(this).on('ended',function(){
  865. $(this).attr('data-loop', true);
  866. this.pause();
  867. });
  868. }
  869. });
  870. }
  871.  
  872. // Running if user click the download icon
  873. $(this).on('click','.SNKMS_IG_DW_MAIN', async function(e){
  874. GL_username = $(this).parent().parent().parent().attr('data-username');
  875. GL_postPath = location.pathname.replace(/\/$/,'').split('/').at(-1) || $(this).parent().parent().children("div:last-child").children("div").children("div:last-child").find('a[href^="/p/"]').last().attr("href").split("/").at(2);
  876.  
  877. // Create element that download dailog
  878. IG_createDM(USER_SETTING.DIRECT_DOWNLOAD_ALL, true);
  879.  
  880. $("#article-id").html(`<a href="https://www.instagram.com/p/${GL_postPath}">${GL_postPath}</a>`);
  881.  
  882. if(!USER_SETTING.DIRECT_DOWNLOAD_ALL){
  883. // Find video/image element and add the download icon
  884. var s = 0;
  885. var multiple = $(this).parent().parent().find('._aap0 ._acaz').length;
  886. var pathname = window.location.pathname;
  887. var fullpathname = "/"+pathname.split('/')[1]+"/"+pathname.split('/')[2]+"/";
  888. var blob = USER_SETTING.FORCE_FETCH_ALL_RESOURCES;
  889.  
  890. // If posts have more than one images or videos.
  891. if(multiple){
  892. $(this).parent().find('._aap0 ._acaz').each(function(){
  893. let element_videos = $(this).parent().parent().find('video');
  894. //if(element_videos && element_videos.attr('src') && element_videos.attr('src').match(/^blob:/ig)){
  895. if(element_videos && element_videos.attr('src')){
  896. blob = true;
  897. }
  898. });
  899.  
  900.  
  901. if(blob){
  902. createMediaListDOM(GL_postPath,".IG_SN_DIG .IG_SN_DIG_MAIN .IG_SN_DIG_BODY",_i18n("LOAD_BLOB_MULTIPLE"));
  903. }
  904. else{
  905. $(this).parent().find('._aap0 ._acaz').each(function(){
  906. s++;
  907. let element_videos = $(this).find('video');
  908. let element_images = $(this).find('._aagv img');
  909. let imgLink = (element_images.attr('srcset'))?element_images.attr('srcset').split(" ")[0]:element_images.attr('src');
  910.  
  911. if(element_videos && element_videos.attr('src')){
  912. blob = true;
  913. }
  914. if(element_images && imgLink){
  915. $('.IG_SN_DIG .IG_SN_DIG_MAIN .IG_SN_DIG_BODY').append(`<a data-needed="direct" data-path="${GL_postPath}" data-name="photo" data-type="jpg" data-globalIndex="${s}" href="javascript:;" data-href="${imgLink}"><img width="100" src="${imgLink}" /><br/>- ${_i18n("IMG")} ${s} -</a>`);
  916. }
  917.  
  918. });
  919.  
  920. if(blob){
  921. createMediaListDOM(GL_postPath,".IG_SN_DIG .IG_SN_DIG_MAIN .IG_SN_DIG_BODY",_i18n("LOAD_BLOB_RELOAD"));
  922. }
  923. }
  924. }
  925. else{
  926. s++;
  927. let element_videos = $(this).parent().parent().find('video');
  928. let element_images = $(this).parent().parent().find('._aagv img');
  929. let imgLink = (element_images.attr('srcset'))?element_images.attr('srcset').split(" ")[0]:element_images.attr('src');
  930.  
  931.  
  932. if(element_videos && element_videos.attr('src')){
  933. createMediaListDOM(GL_postPath,".IG_SN_DIG .IG_SN_DIG_MAIN .IG_SN_DIG_BODY",_i18n("LOAD_BLOB_ONE"));
  934. }
  935. if(element_images && imgLink){
  936. $('.IG_SN_DIG .IG_SN_DIG_MAIN .IG_SN_DIG_BODY').append(`<a data-needed="direct" data-path="${GL_postPath}" data-name="photo" data-type="jpg" data-globalIndex="${s}" href="javascript:;" href="" data-href="${imgLink}"><img width="100" src="${imgLink}" /><br/>- ${_i18n("IMG")} ${s} -</a>`);
  937. }
  938. }
  939. }
  940.  
  941. $('.IG_SN_DIG .IG_SN_DIG_MAIN .IG_SN_DIG_BODY a').each(function(){
  942. $(this).wrap('<div></div>');
  943. $(this).before('<label class="inner_box_wrapper"><input class="inner_box" type="checkbox"><span></span></label>');
  944. });
  945.  
  946. if(USER_SETTING.DIRECT_DOWNLOAD_ALL){
  947. createMediaListDOM(GL_postPath,".IG_SN_DIG .IG_SN_DIG_MAIN .IG_SN_DIG_BODY",_i18n("LOAD_BLOB_MULTIPLE"));
  948. let checkBlob = setInterval(()=>{
  949. if($('.IG_SN_DIG .IG_SN_DIG_MAIN .IG_SN_DIG_BODY a').length > 0){
  950. clearInterval(checkBlob);
  951. $('.IG_SN_DIG .IG_SN_DIG_MAIN .IG_SN_DIG_BODY a').each(function(){
  952. $(this).click();
  953. });
  954.  
  955. $('.IG_SN_DIG').remove();
  956. }
  957. },250);
  958. }
  959. else if(s === 1 && USER_SETTING.DIRECT_DOWNLOAD_WHEN_SINGLE){
  960. IG_setDM(true);
  961. let checkBlob = setInterval(()=>{
  962. if($('.IG_SN_DIG .IG_SN_DIG_MAIN .IG_SN_DIG_BODY a').length > 0){
  963. clearInterval(checkBlob);
  964. $('.IG_SN_DIG .IG_SN_DIG_MAIN .IG_SN_DIG_BODY a').first()?.click();
  965. $('.IG_SN_DIG').remove();
  966. }
  967. },250);
  968. }
  969. });
  970.  
  971. // Add the mark that download is ready
  972. var username = $(this).find("header > div:last-child > div:first-child span a").first().text();
  973.  
  974. $(this).attr('data-snig','canDownload');
  975. $(this).attr('data-username',username);
  976. }
  977. });
  978. }
  979.  
  980. /**
  981. * createMediaListDOM
  982. * Create a list of media elements from post URLs
  983. *
  984. * @param {String} postURL
  985. * @param {String} selector - Use CSS element selectors to choose where it appears.
  986. * @param {String} message - i18n display loading message
  987. * @return {void}
  988. */
  989. async function createMediaListDOM(postURL,selector,message){
  990. $(`${selector} a`).remove();
  991. $(selector).append('<p id="_SNLOAD">'+ message +'</p>');
  992. let media = await getBlobMedia(postURL);
  993. let idx = 1;
  994. let resource = media.shortcode_media;
  995.  
  996. // GraphVideo
  997. if(resource.__typename == "GraphVideo" && resource.video_url){
  998. $(selector).append(`<a data-blob="true" data-needed="direct" data-path="${resource.shortcode}" data-name="video" data-type="mp4" data-username="${resource.owner.username}" data-globalIndex="${idx}" href="javascript:;" data-href="${resource.video_url}"><img width="100" src="${resource.display_resources[1].src}" /><br/>- ${_i18n("VID")} ${idx} -</a>`);
  999. idx++;
  1000. }
  1001. // GraphImage
  1002. if(resource.__typename == "GraphImage"){
  1003. $(selector).append(`<a data-blob="true" data-needed="direct" data-path="${resource.shortcode}" data-name="photo" data-type="jpg" data-username="${resource.owner.username}" data-globalIndex="${idx}" href="javascript:;" data-href="${resource.display_resources[resource.display_resources.length - 1].src}"><img width="100" src="${resource.display_resources[1].src}" /><br/>- ${_i18n("IMG")} ${idx} -</a>`);
  1004. idx++;
  1005. }
  1006. // GraphSidecar
  1007. if(resource.__typename == "GraphSidecar" && resource.edge_sidecar_to_children){
  1008. for(let e of resource.edge_sidecar_to_children.edges){
  1009. if(e.node.__typename == "GraphVideo"){
  1010. $(selector).append(`<a data-blob="true" data-needed="direct" data-path="${resource.shortcode}" data-name="video" data-type="mp4" data-username="${resource.owner.username}" data-globalIndex="${idx}" href="javascript:;" data-href="${e.node.video_url}"><img width="100" src="${e.node.display_resources[1].src}" /><br/>- ${_i18n("VID")} ${idx} -</a>`);
  1011. }
  1012.  
  1013. if(e.node.__typename == "GraphImage"){
  1014. $(selector).append(`<a data-blob="true" data-needed="direct" data-path="${resource.shortcode}" data-name="photo" data-type="jpg" data-username="${resource.owner.username}" data-globalIndex="${idx}" 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>`);
  1015. }
  1016. idx++;
  1017. }
  1018. }
  1019.  
  1020. $("#_SNLOAD").remove();
  1021. $('.IG_SN_DIG .IG_SN_DIG_MAIN .IG_SN_DIG_BODY a').each(function(){
  1022. $(this).wrap('<div></div>');
  1023. $(this).before('<label class="inner_box_wrapper"><input class="inner_box" type="checkbox"><span></span></label>');
  1024. });
  1025. }
  1026.  
  1027. /**
  1028. * IG_createDM
  1029. * A dialog showing a list of all media files in the post
  1030. *
  1031. * @param {Boolean} hasHidden
  1032. * @param {Boolean} hasCheckbox
  1033. * @return {void}
  1034. */
  1035. function IG_createDM(hasHidden, hasCheckbox){
  1036. let isHidden = (hasHidden)?"hidden":"";
  1037. $('body').append('<div class="IG_SN_DIG '+isHidden+'"><div class="IG_SN_DIG_BG"></div><div class="IG_SN_DIG_MAIN"><div class="IG_SN_DIG_TITLE"></div><div class="IG_SN_DIG_BODY"></div></div></div>');
  1038. $('.IG_SN_DIG .IG_SN_DIG_MAIN .IG_SN_DIG_TITLE').append('<div style="position:relative;height:36px;text-align:center;margin-bottom: 7px;"><div style="position:absolute;left:0px;line-height: 18px;"><kbd>Alt</kbd>+<kbd>Q</kbd> ['+_i18n("CLOSE")+']</div><div style="line-height: 18px;">IG Helper</div><div id="post_info" style="line-height: 14px;font-size:14px;">Post ID: <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;fill: rgb(var(--ig-primary-text));" 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>');
  1039.  
  1040. if(hasCheckbox){
  1041. $('.IG_SN_DIG .IG_SN_DIG_MAIN .IG_SN_DIG_TITLE').append(`<div style="text-align: center;" id="button_group"></div>`);
  1042. $('.IG_SN_DIG .IG_SN_DIG_MAIN .IG_SN_DIG_TITLE > div#button_group').append(`<button id="batch_download_selected">${_i18n('BATCH_DOWNLOAD_SELECTED')}</button>`);
  1043. $('.IG_SN_DIG .IG_SN_DIG_MAIN .IG_SN_DIG_TITLE > div#button_group').append(`<button id="batch_download_direct">${_i18n('BATCH_DOWNLOAD_DIRECT')}</button>`);
  1044. $('.IG_SN_DIG .IG_SN_DIG_MAIN .IG_SN_DIG_TITLE').append(`<br/><label class="checkbox"><input value="yes" type="checkbox" />${_i18n('ALL_CHECK')}</label>`);
  1045. }
  1046. }
  1047.  
  1048. /**
  1049. * IG_setDM
  1050. * Set a dialog status
  1051. *
  1052. * @param {Boolean} hasHidden
  1053. * @return {void}
  1054. */
  1055. function IG_setDM(hasHidden){
  1056. if($('.IG_SN_DIG').length){
  1057. if(hasHidden){
  1058. $('.IG_SN_DIG').addClass("hidden");
  1059. }
  1060. else{
  1061. $('.IG_SN_DIG').removeClass("hidden");
  1062. }
  1063. }
  1064. }
  1065.  
  1066. /**
  1067. * saveFiles
  1068. * Download the specified media URL to the computer
  1069. *
  1070. * @param {String} downloadLink
  1071. * @param {String} username
  1072. * @param {String} sourceType
  1073. * @param {Integer} timestamp
  1074. * @param {String} filetype
  1075. * @param {String} shortcode
  1076. * @return {void}
  1077. */
  1078. function saveFiles(downloadLink,username,sourceType,timestamp,filetype,shortcode){
  1079. $('div[id^="mount"] > div > div > div:first').removeClass('x1s85apg');
  1080. $('div[id^="mount"] > div > div > div:first').css('z-index','20000');
  1081. fetch(downloadLink).then(res => {
  1082. return res.blob().then(dwel => {
  1083. $('div[id^="mount"] > div > div > div:first').addClass('x1s85apg');
  1084. $('div[id^="mount"] > div > div > div:first').css('z-index','');
  1085. createSaveFileElement(downloadLink,dwel,username,sourceType,timestamp,filetype,shortcode);
  1086. });
  1087. });
  1088. }
  1089.  
  1090. /**
  1091. * createSaveFileElement
  1092. * Download the specified media with link element
  1093. *
  1094. * @param {String} downloadLink
  1095. * @param {Object} object
  1096. * @param {String} username
  1097. * @param {String} sourceType
  1098. * @param {Integer} timestamp
  1099. * @param {String} filetype
  1100. * @param {String} shortcode
  1101. * @return {void}
  1102. */
  1103. function createSaveFileElement(downloadLink,object,username,sourceType,timestamp,filetype,shortcode) {
  1104. const a = document.createElement("a");
  1105. const name = username+'-'+sourceType+'-'+((USER_SETTING.RENAME_SHORTCODE && shortcode)?shortcode+'-':'')+timestamp+'.'+filetype;
  1106. const originally = username + '_' + downloadLink.split('/').at(-1).split('?').at(0);
  1107.  
  1108. a.href = URL.createObjectURL(object);
  1109. a.setAttribute("download", (USER_SETTING.AUTO_RENAME)?name:originally);
  1110. a.click();
  1111. a.remove();
  1112. }
  1113.  
  1114. /**
  1115. * triggerLinkElement
  1116. * Trigger the link element to start downloading the resource
  1117. *
  1118. * @param {Object} element
  1119. * @return {void}
  1120. */
  1121. async function triggerLinkElement(element) {
  1122. let date = new Date().getTime();
  1123. let timestamp = Math.floor(date / 1000);
  1124. let username = ($(element).attr('data-username')) ? $(element).attr('data-username') : GL_username;
  1125.  
  1126. if(!username && $(element).attr('data-path')){
  1127. console.log('catching owner name from shortcode:',$(element).attr('data-href'));
  1128. username = await getPostOwner($(element).attr('data-path'));
  1129. }
  1130.  
  1131.  
  1132. saveFiles($(element).attr('data-href'),username,$(element).attr('data-name'),timestamp,$(element).attr('data-type'), $(element).attr('data-path'));
  1133. }
  1134.  
  1135. /**
  1136. * translateText
  1137. * i18n translation text
  1138. *
  1139. * @param {String} lang
  1140. * @return {void}
  1141. */
  1142. function translateText(lang){
  1143. return {
  1144. "zh-TW": {
  1145. "SHOW_DOM_TREE": "顯示 DOM Tree",
  1146. "SELECT_AND_COPY": "全選並複製輸入框的內容",
  1147. "DOWNLOAD_DOM_TREE": "將 DOM Tree 下載為文字文件",
  1148. "REPORT_GITHUB": "在 GitHub 上回報問題",
  1149. "REPORT_DISCORD": "在 Discord 支援伺服器上回報問題",
  1150. "DEBUG": "偵錯視窗",
  1151. "CLOSE": "關閉",
  1152. "ALL_CHECK": "全選",
  1153. "BATCH_DOWNLOAD_SELECTED": "批次下載已勾選資源",
  1154. "BATCH_DOWNLOAD_DIRECT": "批次下載全部資源",
  1155. "IMG": "相片",
  1156. "VID": "影片",
  1157. "DDL": "快速下載",
  1158. "DDL_INTRO": "勾選後將直接下載點選當下位置的相片/影片",
  1159. "DW": "下載",
  1160. "THUMBNAIL_INTRO": "下載影片縮圖",
  1161. "LOAD_BLOB_ONE": "正在載入二進位大型物件...",
  1162. "LOAD_BLOB_MULTIPLE": "正在載入多個二進位大型物件...",
  1163. "LOAD_BLOB_RELOAD": "正在重新載入二進位大型物件...",
  1164. "NO_CHECK_RESOURCE": "您需要勾選資源才能下載。",
  1165. "NO_VID_URL": "找不到影片網址",
  1166. "SETTING": "設定",
  1167. "AUTO_RENAME": "自動重新命名檔案",
  1168. "RENAME_SHORTCODE": "重新命名檔案並包含 Shortcode",
  1169. "DISABLE_VIDEO_LOOPING": "關閉影片自動循環播放",
  1170. "REDIRECT_RIGHT_CLICK_USER_STORY_PICTURE": "右鍵點擊使用者限時動態區域頭貼時重定向",
  1171. "FORCE_FETCH_ALL_RESOURCES": "強制提取貼文中所有資源",
  1172. "DIRECT_DOWNLOAD_WHEN_SINGLE": "直接下載貼文中的單一資源",
  1173. "DIRECT_DOWNLOAD_ALL": "直接下載貼文中的所有資源",
  1174. "AUTO_RENAME_INTRO": "將檔案自動重新命名為以下格式:\n使用者名稱-類型-時間戳.檔案類型\n例如:instagram-photo-1670350000.jpg\n\n若設為 false,則檔案名稱將保持原始樣貌。 \n例如:instagram_321565527_679025940443063_4318007696887450953_n.jpg",
  1175. "RENAME_SHORTCODE_INTRO": "將檔案自動重新命名為以下格式:\n使用者名稱-類型-Shortcode-時間戳.檔案類型\n示例:instagram-photo-CwkxyiVynpW-1670350000.jpg\n\n此功能僅在[自動重新命名檔案]設定為 TRUE 時有效。",
  1176. "DISABLE_VIDEO_LOOPING_INTRO": "關閉連續短片和貼文中影片自動循環播放。",
  1177. "REDIRECT_RIGHT_CLICK_USER_STORY_PICTURE_INTRO": "右鍵點選首頁限時動態區域中的使用者頭貼時,重新導向到使用者的個人資料頁面。",
  1178. "FORCE_FETCH_ALL_RESOURCES_INTRO": "透過 Instagram API 強制取得貼文中的所有資源(照片和影片),以取消每個貼文單次提取三個資源的限制。",
  1179. "DIRECT_DOWNLOAD_WHEN_SINGLE_INTRO": "當貼文僅有單一資源時直接下載。",
  1180. "DIRECT_DOWNLOAD_ALL_INTRO": "按下下載按鈕時將直接強制提取貼文中的所有資源並下載。"
  1181. },
  1182. "zh-CN": {
  1183. "SHOW_DOM_TREE": "显示 DOM Tree",
  1184. "SELECT_AND_COPY": "全选并复制输入框的内容",
  1185. "DOWNLOAD_DOM_TREE": "将 DOM Tree 下载为文本文件",
  1186. "REPORT_GITHUB": "在 GitHub 上报告问题",
  1187. "REPORT_DISCORD": "在 Discord 支援服务器上报告问题",
  1188. "DEBUG": "调试窗口",
  1189. "CLOSE": "关闭",
  1190. "ALL_CHECK": "全选",
  1191. "BATCH_DOWNLOAD_SELECTED": "批量下载已勾选资源",
  1192. "BATCH_DOWNLOAD_DIRECT": "批量下载全部资源",
  1193. "IMG": "图像",
  1194. "VID": "视频",
  1195. "DDL": "便捷下载",
  1196. "DDL_INTRO": "勾选后将直接下载點擊當下位置的图像/视频",
  1197. "DW": "下载",
  1198. "THUMBNAIL_INTRO": "下载视频缩略图",
  1199. "LOAD_BLOB_ONE": "正在载入大型媒体对象...",
  1200. "LOAD_BLOB_MULTIPLE": "正在载入多个大型媒体对象...",
  1201. "LOAD_BLOB_RELOAD": "正在重新载入大型媒体对象...",
  1202. "NO_CHECK_RESOURCE": "您需要勾選资源才能下載。",
  1203. "NO_VID_URL": "找不到视频网址",
  1204. "SETTING": "设置",
  1205. "AUTO_RENAME": "自动重命名文件",
  1206. "RENAME_SHORTCODE": "重命名文件并包含物件短码",
  1207. "DISABLE_VIDEO_LOOPING": "禁用视频自动循环",
  1208. "REDIRECT_RIGHT_CLICK_USER_STORY_PICTURE": "右键单击用户故事区域头像时重定向",
  1209. "FORCE_FETCH_ALL_RESOURCES": "强制抓取帖子中所有资源",
  1210. "DIRECT_DOWNLOAD_WHEN_SINGLE": "直接下载帖子中的单个资源",
  1211. "DIRECT_DOWNLOAD_ALL": "直接下载帖子中的所有资源",
  1212. "AUTO_RENAME_INTRO": "将文件自动重新命名为以下格式类型:\n用户名-类型-时间戳.文件类型\n例如:instagram-photo-1670350000.jpg\n\n若设为false,则文件名将保持原样。 \n例如:instagram_321565527_679025940443063_4318007696887450953_n.jpg",
  1213. "RENAME_SHORTCODE_INTRO": "自动重命名文件为以下格式类型:\n用户名-类型-短码-时间戳.文件类型\n示例:instagram-photo-CwkxyiVynpW-1670350000.jpg\n\n它仅在[自动重命名文件]设置为 TRUE 时有效。",
  1214. "DISABLE_VIDEO_LOOPING_INTRO": "禁用 Reels 和帖子中的视频自动播放。",
  1215. "REDIRECT_RIGHT_CLICK_USER_STORY_PICTURE_INTRO": "右键单击主页故事区域中的用户头像,重定向到用户的个人资料页面。",
  1216. "FORCE_FETCH_ALL_RESOURCES_INTRO": "通过 Instagram API 强制获取帖子中的所有资源(照片和视频),以取消每个帖子单次抓取三个资源的限制。",
  1217. "DIRECT_DOWNLOAD_WHEN_SINGLE_INTRO": "当帖子只有单一资源时直接下载。",
  1218. "DIRECT_DOWNLOAD_ALL": "当您点击下载按钮时,帖子中的所有资源将被直接强制抓取并下载。"
  1219. },
  1220. "en-US": {
  1221. "SHOW_DOM_TREE": "Show DOM Tree",
  1222. "SELECT_AND_COPY": "Select All and Copy of the Input Box",
  1223. "DOWNLOAD_DOM_TREE": "Download DOM Tree as Text File",
  1224. "REPORT_GITHUB": "Report Issue On GitHub",
  1225. "REPORT_DISCORD": "Report Issue On Discord Support Server",
  1226. "DEBUG": "Debug Window",
  1227. "CLOSE": "Close",
  1228. "ALL_CHECK": "Select All",
  1229. "BATCH_DOWNLOAD_SELECTED": "Download Selected Resources",
  1230. "BATCH_DOWNLOAD_DIRECT": "Download All Resources",
  1231. "IMG": "Image",
  1232. "VID": "Video",
  1233. "DDL": "Quick Download",
  1234. "DDL_INTRO": "Checking it will direct download current photo/media in the posts.",
  1235. "DW": "Download",
  1236. "THUMBNAIL_INTRO": "Download video thumbnail.",
  1237. "LOAD_BLOB_ONE": "Loading Blob Media...",
  1238. "LOAD_BLOB_MULTIPLE": "Loading Blob Media and others...",
  1239. "LOAD_BLOB_RELOAD": "Detect Blob Media, now reloading...",
  1240. "NO_CHECK_RESOURCE": "You need to check resource to download.",
  1241. "NO_VID_URL": "Can not find video url.",
  1242. "SETTING": "Settings",
  1243. "AUTO_RENAME": "Automatically Rename Files",
  1244. "RENAME_SHORTCODE": "Rename The File and Include Shortcode",
  1245. "DISABLE_VIDEO_LOOPING": "Disable Video Auto-looping",
  1246. "REDIRECT_RIGHT_CLICK_USER_STORY_PICTURE": "Redirect When Right-Clicking User Story Picture",
  1247. "FORCE_FETCH_ALL_RESOURCES": "Forcing Fetch All Resources In the Post",
  1248. "DIRECT_DOWNLOAD_WHEN_SINGLE": "Directly Download Single Resource In the Post",
  1249. "DIRECT_DOWNLOAD_ALL": "Directly Download All Resources In the Post",
  1250. "AUTO_RENAME_INTRO": "Auto rename file to format type following:\nUSERNAME-TYPE-TIMESTAMP.FILETYPE\nExample: instagram-photo-1670350000.jpg\n\nIf set to false, the file name will remain as it is.\nExample: instagram_321565527_679025940443063_4318007696887450953_n.jpg",
  1251. "RENAME_SHORTCODE_INTRO": "Auto rename file to format type following:\nUSERNAME-TYPE-SHORTCODE-TIMESTAMP.FILETYPE\nExample: instagram-photo-CwkxyiVynpW-1670350000.jpg\n\nIt will ONLY work in [Automatically Rename Files] setting to TRUE.",
  1252. "DISABLE_VIDEO_LOOPING_INTRO": "Disable video auto-looping in reels and posts.",
  1253. "REDIRECT_RIGHT_CLICK_USER_STORY_PICTURE_INTRO": "Redirect to a user's profile page when right-clicking on their user avatar in the story area on the homepage.",
  1254. "FORCE_FETCH_ALL_RESOURCES_INTRO": "Force fetching of all resources (photos and videos) in a post via the Instagram API to remove the limit of three resources per post.",
  1255. "DIRECT_DOWNLOAD_WHEN_SINGLE_INTRO": "Download directly when the post only has a single resource.",
  1256. "DIRECT_DOWNLOAD_ALL_INTRO": "When you click the download button, all resources in the post will be directly forced to be fetched and downloaded."
  1257. }
  1258. };
  1259. }
  1260.  
  1261. /**
  1262. * _i18n
  1263. * Perform i18n translation
  1264. *
  1265. * @param {String} text
  1266. * @return {void}
  1267. */
  1268. function _i18n(text){
  1269. let userLang = (lang)?lang:"en-US";
  1270. let translate = {
  1271. "zh-TW": function(){
  1272. return translateText()["zh-TW"];
  1273. },
  1274. "zh-HK": function(){
  1275. return translateText()["zh-TW"];
  1276. },
  1277. "zh-MO": function(){
  1278. return translateText()["zh-TW"];
  1279. },
  1280. "zh-CN": function(){
  1281. return translateText()["zh-CN"];
  1282. },
  1283. "en-US": function(){
  1284. return translateText()["en-US"];
  1285. }
  1286. }
  1287.  
  1288. try{
  1289. return translate[lang]()[text];
  1290. }
  1291. catch{
  1292. return translate["en-US"]()[text];
  1293. }
  1294. }
  1295.  
  1296. /**
  1297. * showSetting
  1298. * Show script settings window
  1299. *
  1300. * @return {void}
  1301. */
  1302. function showSetting(){
  1303. $('.IG_SN_DIG').remove();
  1304. IG_createDM();
  1305. $('.IG_SN_DIG #post_info').text('IG Helper Settings');
  1306.  
  1307.  
  1308. for(let name in USER_SETTING){
  1309. $('.IG_SN_DIG .IG_SN_DIG_BODY').append(`<label class="globalSettings" title="${_i18n(name+'_INTRO')}"><span>${_i18n(name)}</span> <input id="${name}" value="box" type="checkbox" ${(USER_SETTING[name])?'checked':''}><div class="chbtn"><div class="rounds"></div></div></label>`);
  1310. }
  1311. }
  1312.  
  1313. /**
  1314. * showDebugDOM
  1315. * Show full DOM tree
  1316. *
  1317. * @return {void}
  1318. */
  1319. function showDebugDOM(){
  1320. $('.IG_SN_DIG').remove();
  1321. IG_createDM();
  1322. $('.IG_SN_DIG #post_info').text('IG Debug DOM Tree');
  1323.  
  1324. $('.IG_SN_DIG .IG_SN_DIG_BODY').append(`<textarea style="width:100%;box-sizing: border-box;height:300px;" readonly></textarea>`);
  1325. $('.IG_SN_DIG .IG_SN_DIG_BODY').append(`<span style="display:block;text-align:center;">`);
  1326. $('.IG_SN_DIG .IG_SN_DIG_BODY span').append(`<button class="IG_DISPLAY_DOM_TREE"><a>${_i18n('SHOW_DOM_TREE')}</a></button>`);
  1327. $('.IG_SN_DIG .IG_SN_DIG_BODY span').append(`<button class="IG_SELECT_DOM_TREE"><a>${_i18n('SELECT_AND_COPY')}</a></button>`);
  1328. $('.IG_SN_DIG .IG_SN_DIG_BODY span').append(`<button class="IG_DOWNLOAD_DOM_TREE"><a>${_i18n('DOWNLOAD_DOM_TREE')}</a></button><br/>`);
  1329. $('.IG_SN_DIG .IG_SN_DIG_BODY span').append(`<button class="IG_REPORT_GITHUB"><a href="https://github.com/SN-Koarashi/ig-helper/issues" target="_blank">${_i18n('REPORT_GITHUB')}</a></button>`);
  1330. $('.IG_SN_DIG .IG_SN_DIG_BODY span').append(`<button class="IG_REPORT_DISCORD"><a href="https://discord.gg/Sh8HJ4d" target="_blank">${_i18n('REPORT_DISCORD')}</a></button>`);
  1331. }
  1332.  
  1333. // Running if document is ready
  1334. $(function(){
  1335. $('body').on('click','.IG_SN_DIG .IG_SN_DIG_BODY .IG_DISPLAY_DOM_TREE',function(){
  1336. let text = $('div[id^="mount"]')[0];
  1337. $('.IG_SN_DIG .IG_SN_DIG_BODY textarea').text("Location: " + location.pathname + "\nDOM Tree:\n" + text.innerHTML);
  1338. });
  1339.  
  1340. $('body').on('click','.IG_SN_DIG .IG_SN_DIG_BODY .IG_SELECT_DOM_TREE',function(){
  1341. $('.IG_SN_DIG .IG_SN_DIG_BODY textarea').select();
  1342. document.execCommand('copy');
  1343. });
  1344.  
  1345. $('body').on('click','.IG_SN_DIG .IG_SN_DIG_BODY .IG_DOWNLOAD_DOM_TREE',function(){
  1346. var text = ($('.IG_SN_DIG .IG_SN_DIG_BODY textarea').text().length > 0)?$('.IG_SN_DIG .IG_SN_DIG_BODY textarea').text():"Location: " + location.pathname + "\nDOM Tree:\n" +$('div[id^="mount"]')[0].innerHTML;
  1347. var a = document.createElement("a");
  1348. var file = new Blob([text], {type: "text/plain"});
  1349. a.href = URL.createObjectURL(file);
  1350. a.download = "DOMTree.txt";
  1351.  
  1352. document.body.appendChild(a);
  1353. a.click();
  1354. a.remove();
  1355. });
  1356.  
  1357. // Close the download dialog if user click the close icon
  1358. $('body').on('click','.IG_SN_DIG_BTN,.IG_SN_DIG_BG',function(){
  1359. $('.IG_SN_DIG').remove();
  1360. });
  1361.  
  1362. $(window).keydown(function(e){
  1363. // Hot key [Alt+Q] to close the download dialog
  1364. if (e.keyCode == '81' && e.altKey){
  1365. $('.IG_SN_DIG').remove();
  1366. e.preventDefault();
  1367. }
  1368. // Hot key [Alt+W] to open the settings dialog
  1369. if (e.keyCode == '87' && e.altKey){
  1370. showSetting();
  1371. e.preventDefault();
  1372. }
  1373.  
  1374. // Hot key [Alt+Z] to open the settings dialog
  1375. if (e.keyCode == '90' && e.altKey){
  1376. showDebugDOM();
  1377. e.preventDefault();
  1378. }
  1379. });
  1380.  
  1381. $('body').on('change', '.IG_SN_DIG input',function(){
  1382. var name = $(this).attr('id');
  1383.  
  1384. if(name && USER_SETTING[name] !== undefined){
  1385. let isChecked = $(this).prop('checked');
  1386. GM_setValue(name, isChecked);
  1387. USER_SETTING[name] = isChecked;
  1388. }
  1389. });
  1390.  
  1391. $('body').on('click','a[data-needed="direct"]',async function(){
  1392. triggerLinkElement(this);
  1393. });
  1394.  
  1395. // Running if user left-click download icon in stories
  1396. $('body').on('click','.IG_DWSTORY',function(){
  1397. onStory(true);
  1398. });
  1399.  
  1400. // Running if user left-click download icon in stories
  1401. $('body').on('click','.IG_DWSTORY_THUMBNAIL',function(){
  1402. onStoryThumbnail(true);
  1403. });
  1404.  
  1405. // Running if user left-click download icon in profile
  1406. $('body').on('click','.IG_DWPROFILE',function(e){
  1407. e.stopPropagation();
  1408. onProfileAvatar(true);
  1409. });
  1410.  
  1411. // Running if user left-click download icon in highlight stories
  1412. $('body').on('click','.IG_DWHISTORY',function(){
  1413. onHighlightsStory(true);
  1414. });
  1415.  
  1416. // Running if user left-click download icon in highlight stories
  1417. $('body').on('click','.IG_DWHISTORY_THUMBNAIL',function(){
  1418. onHighlightsStoryThumbnail(true);
  1419. });
  1420.  
  1421. // Running if user left-click download icon in reels
  1422. $('body').on('click','.IG_REELS',function(){
  1423. onReels(true,true);
  1424. });
  1425.  
  1426. // Running if user left-click download icon in reels
  1427. $('body').on('click','.IG_REELS_THUMBNAIL',function(){
  1428. onReels(true,false);
  1429. });
  1430.  
  1431. // Running if user right-click profile picture in stories area
  1432. $('body').on('contextmenu','button[role="menuitem"]',function(){
  1433. if(location.href === 'https://www.instagram.com/' && USER_SETTING.REDIRECT_RIGHT_CLICK_USER_STORY_PICTURE){
  1434. if($(this).find('canvas._aarh').length > 0){
  1435. location.href = 'https://www.instagram.com/'+$(this).children('div').last().text();
  1436. }
  1437. }
  1438. });
  1439.  
  1440. $('body').on('change', '.IG_SN_DIG_TITLE .checkbox', function(){
  1441. var isChecked = $(this).find('input').prop('checked');
  1442. $('.IG_SN_DIG_BODY .inner_box').each(function(){
  1443. $(this).prop('checked', isChecked);
  1444. });
  1445. });
  1446.  
  1447. $('body').on('change', '.IG_SN_DIG_BODY .inner_box', function(){
  1448. var checked = $('.IG_SN_DIG_BODY .inner_box:checked').length;
  1449. var total = $('.IG_SN_DIG_BODY .inner_box').length;
  1450.  
  1451.  
  1452. $('.IG_SN_DIG_TITLE .checkbox').find('input').prop('checked', checked == total);
  1453. });
  1454.  
  1455. $('body').on('click', '.IG_SN_DIG_TITLE #batch_download_selected', function(){
  1456. let index = 0;
  1457. $('.IG_SN_DIG_BODY a[data-needed="direct"]').each(function(){
  1458. if($(this).prev().children('input').prop('checked')){
  1459. $(this).click();
  1460. index++;
  1461. }
  1462. });
  1463.  
  1464. if(index == 0){
  1465. alert(_i18n('NO_CHECK_RESOURCE'));
  1466. }
  1467. });
  1468.  
  1469. $('body').on('click', '.IG_SN_DIG_TITLE #batch_download_direct', function(){
  1470. $('.IG_SN_DIG_BODY a[data-needed="direct"]').each(function(){
  1471. $(this).click();
  1472. });
  1473. });
  1474. });
  1475. })(jQuery);