IG小助手

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

当前为 2021-03-19 提交的版本,查看 最新版本

  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.2.5
  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. // @require https://code.jquery.com/jquery-3.5.1.min.js
  19. // @supportURL https://www.facebook.com/smileopwe/
  20. // @compatible firefox >=52
  21. // @compatible chrome >=55
  22. // @license GPLv3
  23. // ==/UserScript==
  24.  
  25. (function() {
  26. 'use strict';
  27.  
  28. // Icon download by https://www.flaticon.com/authors/pixel-perfect
  29.  
  30. // Global variable
  31. GM_setValue('dialog',true);
  32. GM_setValue('URLs',location.href);
  33. var $ = window.jQuery;
  34.  
  35. // Main Timer
  36. var timer = setInterval(function(){
  37.  
  38. // Record document height
  39. GM_setValue('oldHeight',$(document).height());
  40.  
  41. // Call Instagram dialog function if url changed.
  42. if(GM_getValue('URLs') != location.href && $('div.PdwC2.fXiEu.s2MYR').length && onChangeURL()){
  43. console.log('isDialog');
  44. onReadyMyDW(false);
  45. GM_setValue('URLs',location.href);
  46. }
  47.  
  48. // Call general function
  49. if($('article ._97aPb[data-snig="canDownload"]').length==0 && onChangeURL() && !$('div._2dDPU[role="dialog"]').length){
  50. onReadyMyDW(true);
  51. }
  52.  
  53. // Call Instagram stories function
  54. if($('div#react-root section._9eogI._01nki').length && onChangeStoryURL()){
  55. onStoryDW(false);
  56. onStoryThumbnailDW(false);
  57. }
  58. else{
  59. // Remove the download icon
  60. $('.IG_DWSTORY').remove();
  61. $('.IG_DWSTORY_THUMBNAIL').remove();
  62. }
  63.  
  64. // Direct Download Checkbox
  65. if(!$('.AutoDownload_dom').length){
  66. let ckValue = (GM_getValue('AutoDownload'))?'checked':'';
  67. $('body .ctQZg').append('<div class="AutoDownload_dom" style="position: absolute;left:15px;top:0px;padding:6px;line-height:1;background:#fff;border-radius: 50%;"><label title="Checking it will direct download current photos in the posts." style="cursor:help;"><input type="checkbox" value="1" class="AutoDownload" name="AutoDownload" '+ckValue+' />DDL</label></div>');
  68. }
  69.  
  70. },500);
  71.  
  72. // Call general function when user scroll the page
  73. $(document).scroll(function(){
  74. if(GM_getValue('oldHeight') != $(this).height()){
  75. onReadyMyDW();
  76. }
  77. });
  78.  
  79. // Stories funcion
  80. function onStoryDW(isDownload){
  81. if(isDownload){
  82. if($('video.y-yJ5').length){
  83. // Download stories if it is video
  84. let downloadLink = $('video.y-yJ5 source').attr('src')+'&dl=1';
  85. let date = new Date().getTime();
  86. let timestamp = Math.floor(date / 1000);
  87. let type = 'mp4';
  88. let username = $("div#react-root section._9eogI._01nki div section.szopg div.Cd8X1 header.C1rPk div.B7GUE div._295C2 > a").attr('href').replace('/','');
  89. 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;';
  90.  
  91. saveFiles(downloadLink,username,"stories",timestamp,type);
  92. }
  93. else{
  94. // Download stories if it is image
  95. let link = $('img.y-yJ5').attr('srcset').split(',')[0].split(' ')[0];
  96. let downloadLink = link+'&dl=1';
  97. let date = new Date().getTime();
  98. let timestamp = Math.floor(date / 1000);
  99. let type = 'jpg';
  100. let username = $("div#react-root section._9eogI._01nki div section.szopg div.Cd8X1 header.C1rPk div.B7GUE div._295C2 > a").attr('href').replace('/','');
  101.  
  102. saveFiles(downloadLink,username,"stories",timestamp,type);
  103. }
  104. }
  105. else{
  106. // Add the stories download button
  107. let style = "position: absolute;right:-40px;top:15px;padding:5px;line-height:1;background:#fff;border-radius: 5px;cursor:pointer;";
  108. if(!$('.IG_DWSTORY').length){
  109. $('div#react-root section._9eogI._01nki div section.szopg div.Cd8X1').append('<div title="Download" 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>');
  110. }
  111. }
  112. }
  113.  
  114. // Stories Thumbnail funcion
  115. function onStoryThumbnailDW(isDownload){
  116. if(isDownload){
  117. // Download stories if it is video
  118. let downloadLink = $('img.y-yJ5').attr('srcset').split(',')[0].split(' ')[0];
  119. let date = new Date().getTime();
  120. let timestamp = Math.floor(date / 1000);
  121. let type = 'jpg';
  122. let username = $("div#react-root section._9eogI._01nki div section.szopg div.Cd8X1 header.C1rPk div.B7GUE div._295C2 > a").attr('href').replace('/','');
  123. 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;';
  124.  
  125. // Download thumbnail
  126. saveFiles(downloadLink,username,"thumbnail",timestamp,type);
  127. }
  128. else{
  129. if($('video.y-yJ5').length){
  130. // Add the stories download button
  131. let style = "position: absolute;right:-40px;top:45px;padding:5px;line-height:1;background:#fff;border-radius: 5px;cursor:pointer;";
  132. if(!$('.IG_DWSTORY_THUMBNAIL').length){
  133. $('div#react-root section._9eogI._01nki div section.szopg div.Cd8X1').append('<div title="Download video thumbnail" 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>');
  134. }
  135. }
  136. else{
  137. $('.IG_DWSTORY_THUMBNAIL').remove();
  138. }
  139. }
  140. }
  141. // URL change function
  142. function onChangeURL(){
  143. let reA = /^(https:\/\/www.instagram.com\/p\/)/g;
  144. let reB = /^(https:\/\/www.instagram.com\/)$/g;
  145. let URLs = location.href;
  146. if(URLs.match(reA) || URLs.match(reB)){
  147. return true;
  148. }
  149. }
  150.  
  151. // URL change function if page in stories
  152. function onChangeStoryURL(){
  153. let re = /^(https:\/\/www.instagram.com\/stories\/)/g;
  154. let URLs = location.href;
  155. if(URLs.match(re)){
  156. return true;
  157. }
  158. }
  159.  
  160. // Main function
  161. function onReadyMyDW(NoDialog){
  162. // Whether is Instagram dialog?
  163. if(!NoDialog){
  164. // Running if it is dialog
  165. $('article ._97aPb').each(function(){
  166. $(this).removeAttr('data-snig');
  167. $(this).unbind('click');
  168. });
  169. $('.SNKMS_IG_DW_MAIN,.SNKMS_IG_DW_MAIN_VIDEO').remove();
  170. }
  171.  
  172. // Add download icon per each posts
  173. $('article ._97aPb').each(function(){
  174. // If it is have not download icon
  175. if(!$(this).attr('data-snig')){
  176. var style = "position: absolute;right:15px;top:15px;padding:6px;line-height:1;background:#fff;border-radius: 50%;cursor:pointer;";
  177.  
  178. // Add the download icon
  179. $(this).append('<div title="Download" 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>');
  180.  
  181. // Running if user click the download icon
  182. $(this).on('click','.SNKMS_IG_DW_MAIN',function(e){
  183. GM_setValue('username',$(this).parent().attr('data-username'));
  184. // Create element that download dailog
  185. IG_createDM(GM_getValue('AutoDownload'));
  186.  
  187. var 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;';
  188.  
  189. // Find video/image element and add the download icon
  190. var s = 0;
  191. var multiple = $(this).parent().find('.EcJQs .RzuR0').length;
  192. var pathname = window.location.pathname;
  193. var fullpathname = "/"+pathname.split('/')[1]+"/"+pathname.split('/')[2]+"/";
  194.  
  195. // If posts have more than one images or videos.
  196. if(multiple){
  197. $(this).parent().find('.EcJQs .RzuR0').each(function(){
  198. s++;
  199. let element_videos = $(this).parent().find('video.tWeCl');
  200. let element_images = $(this).parent().find('.FFVAD');
  201.  
  202. if(element_videos && element_videos.attr('src')){
  203. let video_image = (__additionalData[fullpathname])?__additionalData[fullpathname]["data"]["graphql"]["shortcode_media"]["display_url"]:element_videos.next().attr('src');
  204. let video_url = (__additionalData[fullpathname])?__additionalData[fullpathname]["data"]["graphql"]["shortcode_media"]["video_url"]:element_videos.attr('src');
  205.  
  206. if(element_videos.attr('src').match(/^blob:/ig)){
  207. if(video_url == element_videos.attr('src')){
  208. alert("Can not get the video url, please press F5 to refresh this page.");
  209. $('.IG_SN_DIG').remove();
  210. return false;
  211. }
  212. $('.IG_SN_DIG .IG_SN_DIG_MAIN').append('<a data-type="mp4" data-globalIndex="'+s+'" style="'+style+'" target="_blank" href="'+video_url+'&dl=1"><img width="100" src="'+video_image+'" /><br/>- IGTV '+s+' -</a>');
  213. }
  214. else{
  215. $('.IG_SN_DIG .IG_SN_DIG_MAIN').append('<a data-type="mp4" data-globalIndex="'+s+'" style="'+style+'" target="_blank" href="'+video_url+'&dl=1"><img width="100" src="'+video_image+'" /><br/>- Video '+s+' -</a>');
  216. }
  217. }
  218. if(element_images && element_images.attr('src')){
  219. $('.IG_SN_DIG .IG_SN_DIG_MAIN').append('<a data-type="jpg" data-globalIndex="'+s+'" style="'+style+'" target="_blank" href="'+element_images.attr('src')+'&dl=1"><img width="100" src="'+element_images.attr('src')+'" /><br/>- Image '+s+' -</a>');
  220. }
  221. });
  222. }
  223. else{
  224. s++;
  225. let element_videos = $(this).parent().find('video.tWeCl');
  226. let element_images = $(this).parent().find('.FFVAD');
  227.  
  228. if(element_videos && element_videos.attr('src')){
  229. let video_image = (__additionalData[fullpathname])?__additionalData[fullpathname]["data"]["graphql"]["shortcode_media"]["display_url"]:element_videos.next().attr('src');
  230. let video_url = (__additionalData[fullpathname])?__additionalData[fullpathname]["data"]["graphql"]["shortcode_media"]["video_url"]:element_videos.attr('src');
  231.  
  232. if(element_videos.attr('src').match(/^blob:/ig)){
  233. if(video_url == element_videos.attr('src')){
  234. alert("Can not get the video url, please press F5 to refresh this page.");
  235. $('.IG_SN_DIG').remove();
  236. return false;
  237. }
  238. $('.IG_SN_DIG .IG_SN_DIG_MAIN').append('<a data-type="mp4" data-globalIndex="'+s+'" style="'+style+'" target="_blank" href="'+video_url+'&dl=1"><img width="100" src="'+video_image+'" /><br/>- IGTV '+s+' -</a>');
  239. }
  240. else{
  241. $('.IG_SN_DIG .IG_SN_DIG_MAIN').append('<a data-type="mp4" data-globalIndex="'+s+'" style="'+style+'" target="_blank" href="'+video_url+'&dl=1"><img width="100" src="'+video_image+'" /><br/>- Video '+s+' -</a>');
  242. }
  243. }
  244. if(element_images && element_images.attr('src')){
  245. $('.IG_SN_DIG .IG_SN_DIG_MAIN').append('<a data-type="jpg" data-globalIndex="'+s+'" style="'+style+'" target="_blank" href="'+element_images.attr('src')+'&dl=1"><img width="100" src="'+element_images.attr('src')+'" /><br/>- Image '+s+' -</a>');
  246. }
  247. }
  248.  
  249.  
  250. if(GM_getValue('AutoDownload')){
  251. GM_setValue('GB_Index',0);
  252. let LeftButton = $(this).parent().find('button.POSa_').length;
  253. let RightButton = $(this).parent().find('button._6CZji').length;
  254.  
  255. if(LeftButton && !RightButton){ // Far Right
  256. GM_setValue('GB_Index',2);
  257. }
  258. else if(!LeftButton && RightButton){ // Far Left
  259. GM_setValue('GB_Index',1);
  260. }
  261. else if(!LeftButton && !RightButton){ // Both Not Exist
  262. GM_setValue('GB_Index',1);
  263. }
  264. else{ // Both Exist
  265. GM_setValue('GB_Index',2);
  266. }
  267.  
  268. let downloadLink = $('.IG_SN_DIG').find('a[data-globalindex="'+GM_getValue('GB_Index')+'"]').attr('href');
  269. let date = new Date().getTime();
  270. let timestamp = Math.floor(date / 1000);
  271. let type = $('.IG_SN_DIG').find('a[data-globalindex="'+GM_getValue('GB_Index')+'"]').attr('data-type');
  272.  
  273. saveFiles(downloadLink,GM_getValue('username'),GM_getValue('GB_Index'),timestamp,type);
  274. $('.IG_SN_DIG').remove();
  275. }
  276. });
  277.  
  278. // Add the mark that download is ready
  279. $(this).attr('data-snig','canDownload');
  280. $(this).attr('data-username',$(this).prev().prev().find(".o-MQd .RqtMr .e1e1d .Jv7Aj a").text());
  281. }
  282. });
  283. }
  284.  
  285. // Download and rename files
  286. function saveFiles(downloadLink,username,index,timestamp,type){
  287. fetch(downloadLink).then(res => {
  288. return res.blob().then(dwel => {
  289. const a = document.createElement("a");
  290. const name = username+'-'+index+'-'+timestamp+'.'+type;
  291. a.href = URL.createObjectURL(dwel);
  292. a.setAttribute("download", name);
  293. a.click();
  294. a.remove();
  295. });
  296. });
  297. }
  298.  
  299. // Create the download dialog element funcion
  300. function IG_createDM(a){
  301. let style = (!a)?"position: fixed;left: 0px;right: 0px;bottom: 0px;top: 0px;":"display:none;";
  302. $('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;min-height: 200px;background:#fff;border-radius: 15px;"></div></div>');
  303. $('.IG_SN_DIG .IG_SN_DIG_MAIN').append('<div style="position:relative;height:36px;line-height:36px;">Alt+Q [Close]<svg width="26" height="26" class="IG_SN_DIG_BTN" style="cursor:pointer;position:absolute;right: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>');
  304. }
  305.  
  306. // Running if document is ready
  307. $(function(){
  308. // Ready~? GO!!
  309. onReadyMyDW();
  310.  
  311. // Close the download dialog if user click the close icon
  312. $('body').on('click','.IG_SN_DIG_BTN,.IG_SN_DIG_BG',function(){
  313. $('.IG_SN_DIG').remove();
  314. });
  315.  
  316. // Hot key [Alt+Q] to close the download dialog
  317. $(window).keydown(function(e){
  318. if (e.keyCode == '81' && e.altKey){
  319. $('.IG_SN_DIG').remove();
  320. e.preventDefault();
  321. }
  322. });
  323. $('body').on('click','.AutoDownload',function(){
  324. if($('.AutoDownload:checked').length){
  325. GM_setValue('AutoDownload',true);
  326. }
  327. else{
  328. GM_setValue('AutoDownload',false);
  329. }
  330. });
  331.  
  332. // Running if user left-click download icon in stories
  333. $('body').on('click','.IG_DWSTORY',function(){
  334. onStoryDW(true);
  335. });
  336.  
  337. // Running if user left-click download icon in stories
  338. $('body').on('click','.IG_DWSTORY_THUMBNAIL',function(){
  339. onStoryThumbnailDW(true);
  340. });
  341. });
  342.  
  343. })();