☰

Twitter Media Downloader

Save Video/Photo by One-Click.

当前为 2021-03-13 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        Twitter Media Downloader
  3. // @name:ja     Twitter Media Downloader
  4. // @name:zh-cn  Twitter 媒体下载
  5. // @name:zh-tw  Twitter 媒體下載
  6. // @description    Save Video/Photo by One-Click.
  7. // @description:ja ワンクリックで動画・画像を保存する。
  8. // @description:zh-cn 一键保存视频/图片
  9. // @description:zh-tw 一鍵保存視頻/圖片
  10. // @version     0.52
  11. // @author      AMANE
  12. // @namespace   none
  13. // @match       https://twitter.com/*
  14. // @grant       GM_setValue
  15. // @grant       GM_getValue
  16. // @grant       GM_download
  17. // ==/UserScript==
  18. /* jshint esversion: 8 */
  19.  
  20. (function () {
  21.   'use strict';
  22.  
  23.   const preset_filename = 'twitter_{user-name}(@{user-id})_{date-time}_{status-id}_{file-type}';
  24.  
  25.   const language = {
  26.     en: {download: 'Download', completed: 'Download Completed', settings: 'Download Settings', save: 'Save', confirm: 'Confirm Save As Dialog', record: 'Remember Download History', clear: '(Clear)', clear_confirm: 'Clear download history?', pattern: 'File Name Pattern'},
  27.     ja: {download: 'ダウンロード', completed: 'ダウンロード完了', settings: 'ダウンロード設定', save: '保存', confirm: '保存場所を確認する', record: 'ダウンロード履歴を保存する', clear: '(クリア)', clear_confirm: 'ダウンロード履歴を削除する？', pattern: 'ファイル名パターン'},
  28.     zh: {download: '下载', completed: '下载完成', settings: '下载设置', save: '保存', confirm: '确认文件名和保存位置', record: '保存下载记录', clear: '(清除)', clear_confirm: '确认要清除下载记录？', pattern: '文件名格式'},
  29.     'zh-Hant': {download: '下載', completed: '下載完成', settings: '下載設置', save: '保存', confirm: '確認文件名和保存位置', record: '保存下載記錄', clear: '(清除)', clear_confirm: '確認要清除下載記錄？', pattern: '文件名規則'},
  30.   };
  31.   const str = language[document.querySelector('html').lang] || language.en;
  32.  
  33.   const svg = `
  34. <g class="download"><path d="M3,14 v5 q0,2 2,2 h14 q2,0 2,-2 v-5 M7,10 l4,4 q1,1 2,0 l4,-4 M12,3 v11" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" /></g>
  35. <g class="completed"><path d="M3,14 v5 q0,2 2,2 h14 q2,0 2,-2 v-5 M7,10 l3,4 q1,1 2,0 l8,-11" fill="none" stroke="#1DA1F2" stroke-width="2" stroke-linecap="round" /></g>
  36. <g class="loading"><circle cx="12" cy="12" r="10" fill="none" stroke="#1DA1F2" stroke-width="4" opacity="0.4" /><path d="M12,2 a10,10 0 0 1 10,10" fill="none" stroke="#1DA1F2" stroke-width="4" stroke-linecap="round" /></g>
  37. <g class="failed"><circle cx="12" cy="12" r="11" fill="#f33" stroke="currentColor" stroke-width="2" opacity="0.8" /><path d="M14,5 a1,1 0 0 0 -4,0 l0.5,9.5 a1.5,1.5 0 0 0 3,0 z M12,17 a2,2 0 0 0 0,4 a2,2 0 0 0 0,-4" fill="#fff" stroke="none" /></g>
  38. `;
  39.  
  40.   const css = `<style>
  41. .tmd-down:hover > div> div {color: rgba(29, 161, 242, 1.0);}
  42. .tmd-down:hover > div> div > div > div {background-color: rgba(29, 161, 242, 0.1);}
  43. .tmd-down:active > div> div > div > div {background-color: rgba(29, 161, 242, 0.2);}
  44. .tmd-down.loading svg {animation: spin 1s linear infinite;}
  45. .tmd-down g {display: none;}
  46. .tmd-down.download g.download, .tmd-down.completed g.completed, .tmd-down.loading g.loading,.tmd-down.failed g.failed {display: unset;}
  47. @keyframes spin {0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}}
  48. .tmd-btn {display: inline-block; background-color: #1DA1F2; color: #FFFFFF; padding: 0 20px; border-radius: 99px;}
  49. .tmd-tag {display: inline-block; background-color: #FFFFFF; color: #1DA1F2; padding: 0 10px; border-radius: 10px; border: 1px solid #1DA1F2;  font-weight: bold; margin: 5px;}
  50. .tmd-btn:hover {background-color: rgba(29, 161, 242, 0.9);}
  51. .tmd-tag:hover {background-color: rgba(29, 161, 242, 0.1);}
  52. </style>`;
  53.  
  54.   let history = storage('history');
  55.   document.head.insertAdjacentHTML('beforeend', css);
  56.   new MutationObserver(mutations => mutations.forEach(mutation => {
  57.     mutation.addedNodes.forEach(node => {
  58.       btn_inject(node.tagName == 'DIV' && node.querySelector('article'));
  59.     });
  60.   })).observe(document.body, {childList: true, subtree: true});
  61.  
  62.   function btn_inject(article) {
  63.     if (article && article.querySelector('div[role="progressbar"], div[data-testid="playButton"], a[href*="/photo/1"], a[href="/settings/safety"]')) {
  64.       let status_id = article.querySelector('a[href*="/status/"]').href.split('/status/').pop().split('/').shift();
  65.       let is_exist = history.indexOf(status_id) >= 0;
  66.       let group = article.querySelector('div[role="group"]');
  67.       let btn = group.querySelector(':scope>:first-child').cloneNode(true);
  68.       btn.querySelector('svg').innerHTML = svg;
  69.       group.appendChild(btn);
  70.       btn_status(btn, is_exist ? 'completed' : 'download', is_exist ? str.completed : str.download);
  71.       btn.onclick = () => btn_click(btn, status_id, is_exist);
  72.       btn.oncontextmenu = e => {
  73.         e.preventDefault();
  74.         down_settings();
  75.       };
  76.     }
  77.   }
  78.  
  79.   async function btn_click(btn, status_id, is_exist) {
  80.     if (btn.classList.contains('loading')) return;
  81.     btn_status(btn, 'loading');
  82.     let filename = (await GM_getValue('filename', preset_filename)).split('\n').join('');
  83.     let confirm = await GM_getValue('confirm', false);
  84.     let record = await GM_getValue('record', true);
  85.     let json = await fetch_json(status_id);
  86.     let tweet = json.globalObjects.tweets[status_id];
  87.     let user = json.globalObjects.users[tweet.user_id_str];
  88.     let info = {
  89.       'status-id': status_id,
  90.       'user-name': user.name,
  91.       'user-id': user.screen_name,
  92.       'date-time': formatDate(tweet.created_at, 'YYYYMMDD-hhmmss')
  93.     };
  94.     let medias = tweet.extended_entities && tweet.extended_entities.media;
  95.     if (medias) {
  96.       let tasks = medias.length;
  97.       medias.forEach((media, i) => {
  98.         info.url = media.type == 'photo' ? media.media_url + ':orig' : media.video_info.variants.filter(n => n.content_type == 'video/mp4').sort((a, b) => b.bitrate - a.bitrate)[0].url;
  99.         info.file = info.url.split('/').pop().split(/[:?]/).shift();
  100.         info['file-name'] = info.file.split('.').shift();
  101.         info['file-ext'] = info.file.split('.').pop();
  102.         info['file-type'] = media.type.replace('animated_', '');
  103.         info.out = (filename.replace(/\.?{file-ext}/, '') + (medias.length > 1 && !filename.match('{file-name}') ? '-' + i : '') + '.{file-ext}').replace(/{([^{}]+)}/g, (match, name) => info[name]);
  104.         GM_download({
  105.           url: info.url,
  106.           name: info.out,
  107.           // saveAs: confirm,
  108.           onload: () => {
  109.             tasks -= 1;
  110.             if (tasks === 0) {
  111.               btn_status(btn, 'completed', str.completed);
  112.               if (record && !is_exist) {
  113.                 history.push(status_id);
  114.                 storage('history', status_id);
  115.               }
  116.             }
  117.           },
  118.           onerror: result => {
  119.             tasks = - 1;
  120.             btn_status(btn, 'failed', result.details.current);
  121.           }
  122.         });
  123.       });
  124.     } else {
  125.       btn_status(btn, 'failed', 'MEDIA_NOT_FOUND');
  126.     }
  127.   }
  128.  
  129.   function btn_status(btn, css, title) {
  130.     btn.classList.remove('tmd-down', 'download', 'completed', 'loading', 'failed');
  131.     btn.classList.add('tmd-down', css);
  132.     if (title) btn.title = title;
  133.   }
  134.  
  135.   async function down_settings() {
  136.     const $element = (parent, tag, style, content, css) => {
  137.       let el = document.createElement(tag);
  138.       if (style) el.style.cssText = style;
  139.       if (typeof content !== 'undefined') {
  140.         if (tag == 'input') {
  141.           if (content == 'checkbox') el.type = content;
  142.           else el.value = content;
  143.         } else el.innerHTML = content;
  144.       }
  145.       if (css) css.split(' ').forEach(c => el.classList.add(c));
  146.       parent.appendChild(el);
  147.       return el;
  148.     };
  149.     let wapper = $element(document.body, 'div', 'position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background-color: #0009; z-index: 10;');
  150.     let wapper_close;
  151.     wapper.onmousedown = e => {
  152.       wapper_close = e.target == wapper;
  153.     };
  154.     wapper.onmouseup = e => {
  155.       if (wapper_close && e.target == wapper) wapper.remove();
  156.     };
  157.     let dialog = $element(wapper, 'div', 'position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); width: fit-content; width: -moz-fit-content; background-color: #f3f3f3; border: 1px solid #ccc; border-radius: 10px;');
  158.     let title = $element(dialog, 'h3', 'margin: 10px 20px;', str.settings);
  159.     let options = $element(dialog, 'div', 'margin: 10px; border: 1px solid #ccc; border-radius: 5px;');
  160.     // let confirm_input = $element($element(options, 'label', 'display: block; margin: 10px;', str.confirm), 'input', 'float: left;', 'checkbox');
  161.     // confirm_input.checked = await GM_getValue('confirm', false);
  162.     // confirm_input.onchange = () => GM_setValue('confirm', confirm_input.checked);
  163.     let record_label = $element(options, 'label', 'display: block; margin: 10px;', str.record);
  164.     let record_input = $element(record_label, 'input', 'float: left;', 'checkbox');
  165.     record_input.checked = await GM_getValue('history', true);
  166.     record_input.onchange = () => GM_setValue('history', record_input.checked);
  167.     $element(record_label, 'label', 'margin: 10px; color: blue;', str.clear).onclick = () => {
  168.       if (confirm(str.clear_confirm)) {
  169.         history = [];
  170.         localStorage.removeItem('history');
  171.       }
  172.     };
  173.     let filename_div = $element(dialog, 'div', 'margin: 10px; border: 1px solid #ccc; border-radius: 5px;');
  174.     let filename_label = $element(filename_div, 'label', 'display: block; margin: 10px 15px;', str.pattern);
  175.     let filename_input = $element(filename_label, 'textarea', 'display: block; min-width: 500px; max-width: 500px; min-height: 100px; font-size: inherit;', await GM_getValue('filename', preset_filename));
  176.     let filename_tags = $element(filename_div, 'label', 'display: table; margin: 10px;', `
  177. <span class="tmd-tag" title="user name">{user-name}</span>
  178. <span class="tmd-tag" title="The user name after @ sign.">{user-id}</span>
  179. <span class="tmd-tag" title="example: 1234567890987654321">{status-id}</span>
  180. <span class="tmd-tag" title="YYYYMMDD-hhmmss\nexample: 20201231-235959">{date-time}</span><br>
  181. <span class="tmd-tag" title="Type of &#34;video&#34; or &#34;photo&#34; or &#34;gif&#34;.">{file-type}</span>
  182. <span class="tmd-tag" title="Original filename from URL.">{file-name}</span>
  183. <span class="tmd-tag" title="Unnecessary. Will be added automatically.">{file-ext}</span>
  184. `);
  185.     filename_input.selectionStart = filename_input.value.length;
  186.     filename_tags.querySelectorAll('.tmd-tag').forEach(tag => {
  187.       tag.onclick = () => {
  188.         let ss = filename_input.selectionStart;
  189.         let se = filename_input.selectionEnd;
  190.         filename_input.value = filename_input.value.substring(0, ss) + tag.innerText + filename_input.value.substring(se);
  191.         filename_input.selectionStart = ss + tag.innerText.length;
  192.         filename_input.selectionEnd = ss + tag.innerText.length;
  193.         filename_input.focus();
  194.       };
  195.     });
  196.     let btn_save = $element(title, 'label', 'float: right;', str.save, 'tmd-btn');
  197.     btn_save.onclick = async() => {
  198.       await GM_setValue('filename', filename_input.value);
  199.       wapper.remove();
  200.     };
  201.   }
  202.  
  203.   function storage(name, value) {
  204.     let data = JSON.parse(localStorage.getItem(name) || '[]');
  205.     if (value) data.push(value);
  206.     else return data;
  207.     localStorage.setItem(name, JSON.stringify(data));
  208.   }
  209.  
  210.   async function fetch_json(status_id) {
  211.     let url = 'https://twitter.com/i/api/2/timeline/conversation/' + status_id + '.json?tweet_mode=extended&include_entities=false&include_user_entities=false';
  212.     let cookies = getCookie();
  213.     let headers = {
  214.       'authorization': 'Bearer AAAAAAAAAAAAAAAAAAAAANRILgAAAAAAnNwIzUejRCOuH5E6I8xnZz4puTs%3D1Zv7ttfk8LF81IUq16cHjhLTvJu4FA33AGWWjCpTnA',
  215.       'x-twitter-active-user': 'yes',
  216.       'x-twitter-client-language': cookies.lang,
  217.       'x-csrf-token': cookies.ct0
  218.     };
  219.     if (cookies.ct0.length == 32) headers['x-guest-token'] = cookies.gt;
  220.     return await fetch(url, {headers: headers}).then(result => result.json());
  221.   }
  222.  
  223.   function getCookie(name) {
  224.     let cookies = {};
  225.     document.cookie.split(';').filter(n => n.indexOf('=') > 0).forEach(n => {
  226.       n.replace(/^([^=]+)=(.+)$/, (match, name, value) => {
  227.         cookies[name.trim()] = value.trim();
  228.       });
  229.     });
  230.     return name ? cookies[name] : cookies;
  231.   }
  232.  
  233.   function formatDate(i, o) {
  234.     let d = new Date(i);
  235.     let v = {
  236.       YYYY: d.getUTCFullYear().toString(),
  237.       YY: d.getUTCFullYear().toString(),
  238.       MM: '0' + (d.getUTCMonth() + 1),
  239.       DD: '0' + d.getUTCDate(),
  240.       hh: '0' + d.getUTCHours(),
  241.       mm: '0' + d.getUTCMinutes(),
  242.       ss: '0' + d.getUTCSeconds()
  243.     };
  244.     return o.replace(/(YY(YY)?|MM|DD|hh|mm|ss)/g, n => v[n].substr( - n.length));
  245.   }
  246.  
  247. })();