☰

【Mod】Twitter 媒体下载

一键保存视频/图片

目前为 2024-04-08 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        【Mod】Twitter Media Downloader
  3. // @name:ja     【Mod】Twitter Media Downloader
  4. // @name:zh-cn  【Mod】Twitter 媒体下载
  5. // @name:zh-tw  【Mod】Twitter 媒體下載
  6. // @description    Save Video/Photo by One-Click.【Mod】1.变更日期格式
  7. // @description:ja ワンクリックで動画・画像を保存する。
  8. // @description:zh-cn 一键保存视频/图片
  9. // @description:zh-tw 一鍵保存視頻/圖片
  10. // @version     1.27
  11. // @author      AMANE【Mod by heckles】
  12. // @namespace   none
  13. // @match       https://twitter.com/*
  14. // @match       https://mobile.twitter.com/*
  15. // @grant       GM_registerMenuCommand
  16. // @grant       GM_setValue
  17. // @grant       GM_getValue
  18. // @grant       GM_download
  19. // @compatible  Chrome
  20. // @compatible  Firefox
  21. // @license     MIT
  22. // ==/UserScript==
  23. /* jshint esversion: 8 */
  24.  
  25. const filename =
  26.   "{date-time}_twitter_{user-name}(@{user-id})_{status-id}_{file-type}";
  27.  
  28. const TMD = (function () {
  29.   let lang, host, history, show_sensitive, is_tweetdeck;
  30.   return {
  31.     init: async function () {
  32.       GM_registerMenuCommand(
  33.         (this.language[navigator.language] || this.language.en).settings,
  34.         this.settings
  35.       );
  36.       lang =
  37.         this.language[document.querySelector("html").lang] || this.language.en;
  38.       host = location.hostname;
  39.       is_tweetdeck = host.indexOf("tweetdeck") >= 0;
  40.       history = this.storage_obsolete();
  41.       if (history.length) {
  42.         this.storage(history);
  43.         this.storage_obsolete(true);
  44.       } else history = await this.storage();
  45.       show_sensitive = GM_getValue("show_sensitive", false);
  46.       document.head.insertAdjacentHTML(
  47.         "beforeend",
  48.         "<style>" + this.css + (show_sensitive ? this.css_ss : "") + "</style>"
  49.       );
  50.       let observer = new MutationObserver((ms) =>
  51.         ms.forEach((m) => m.addedNodes.forEach((node) => this.detect(node)))
  52.       );
  53.       observer.observe(document.body, { childList: true, subtree: true });
  54.     },
  55.     detect: function (node) {
  56.       let article =
  57.         (node.tagName == "ARTICLE" && node) ||
  58.         (node.tagName == "DIV" &&
  59.           (node.querySelector("article") || node.closest("article")));
  60.       if (article) this.addButtonTo(article);
  61.       let listitems =
  62.         (node.tagName == "LI" &&
  63.           node.getAttribute("role") == "listitem" && [node]) ||
  64.         (node.tagName == "DIV" && node.querySelectorAll('li[role="listitem"]'));
  65.       if (listitems) this.addButtonToMedia(listitems);
  66.     },
  67.     addButtonTo: function (article) {
  68.       if (article.dataset.detected) return;
  69.       article.dataset.detected = "true";
  70.       let media_selector = [
  71.         'a[href*="/photo/1"]',
  72.         'div[role="progressbar"]',
  73.         'div[data-testid="playButton"]',
  74.         'a[href="/settings/content_you_see"]', //hidden content
  75.         "div.media-image-container", // for tweetdeck
  76.         "div.media-preview-container", // for tweetdeck
  77.         'div[aria-labelledby]>div:first-child>div[role="button"][tabindex="0"]', //for audio (experimental)
  78.       ];
  79.       let media = article.querySelector(media_selector.join(","));
  80.       if (media) {
  81.         let status_id = article
  82.           .querySelector('a[href*="/status/"]')
  83.           .href.split("/status/")
  84.           .pop()
  85.           .split("/")
  86.           .shift();
  87.         let btn_group = article.querySelector(
  88.           'div[role="group"]:last-of-type, ul.tweet-actions, ul.tweet-detail-actions'
  89.         );
  90.         let btn_share = Array.from(
  91.           btn_group.querySelectorAll(
  92.             ":scope>div>div, li.tweet-action-item>a, li.tweet-detail-action-item>a"
  93.           )
  94.         ).pop().parentNode;
  95.         let btn_down = btn_share.cloneNode(true);
  96.         if (is_tweetdeck) {
  97.           btn_down.firstElementChild.innerHTML =
  98.             '<svg viewBox="0 0 24 24" style="width: 18px; height: 18px;">' +
  99.             this.svg +
  100.             "</svg>";
  101.           btn_down.firstElementChild.removeAttribute("rel");
  102.           btn_down.classList.replace("pull-left", "pull-right");
  103.         } else {
  104.           btn_down.querySelector("svg").innerHTML = this.svg;
  105.         }
  106.         let is_exist = history.indexOf(status_id) >= 0;
  107.         this.status(btn_down, "tmd-down");
  108.         this.status(
  109.           btn_down,
  110.           is_exist ? "completed" : "download",
  111.           is_exist ? lang.completed : lang.download
  112.         );
  113.         btn_group.insertBefore(btn_down, btn_share.nextSibling);
  114.         btn_down.onclick = () => this.click(btn_down, status_id, is_exist);
  115.         if (show_sensitive) {
  116.           let btn_show = article.querySelector(
  117.             'div[aria-labelledby] div[role="button"][tabindex="0"]:not([data-testid]) > div[dir] > span > span'
  118.           );
  119.           if (btn_show) btn_show.click();
  120.         }
  121.       }
  122.       let imgs = article.querySelectorAll('a[href*="/photo/"]');
  123.       if (imgs.length > 1) {
  124.         let status_id = article
  125.           .querySelector('a[href*="/status/"]')
  126.           .href.split("/status/")
  127.           .pop()
  128.           .split("/")
  129.           .shift();
  130.         let btn_group = article.querySelector('div[role="group"]:last-of-type');
  131.         let btn_share = Array.from(
  132.           btn_group.querySelectorAll(":scope>div>div")
  133.         ).pop().parentNode;
  134.         imgs.forEach((img) => {
  135.           let index = img.href.split("/status/").pop().split("/").pop();
  136.           let is_exist = history.indexOf(status_id) >= 0;
  137.           let btn_down = document.createElement("div");
  138.           btn_down.innerHTML =
  139.             '<div><div><svg viewBox="0 0 24 24" style="width: 18px; height: 18px;">' +
  140.             this.svg +
  141.             "</svg></div></div>";
  142.           btn_down.classList.add("tmd-down", "tmd-img");
  143.           this.status(btn_down, "download");
  144.           img.parentNode.appendChild(btn_down);
  145.           btn_down.onclick = (e) => {
  146.             e.preventDefault();
  147.             this.click(btn_down, status_id, is_exist, index);
  148.           };
  149.         });
  150.       }
  151.     },
  152.     addButtonToMedia: function (listitems) {
  153.       listitems.forEach((li) => {
  154.         if (li.dataset.detected) return;
  155.         li.dataset.detected = "true";
  156.         let status_id = li
  157.           .querySelector('a[href*="/status/"]')
  158.           .href.split("/status/")
  159.           .pop()
  160.           .split("/")
  161.           .shift();
  162.         let is_exist = history.indexOf(status_id) >= 0;
  163.         let btn_down = document.createElement("div");
  164.         btn_down.innerHTML =
  165.           '<div><div><svg viewBox="0 0 24 24" style="width: 18px; height: 18px;">' +
  166.           this.svg +
  167.           "</svg></div></div>";
  168.         btn_down.classList.add("tmd-down", "tmd-media");
  169.         this.status(
  170.           btn_down,
  171.           is_exist ? "completed" : "download",
  172.           is_exist ? lang.completed : lang.download
  173.         );
  174.         li.appendChild(btn_down);
  175.         btn_down.onclick = () => this.click(btn_down, status_id, is_exist);
  176.       });
  177.     },
  178.     click: async function (btn, status_id, is_exist, index) {
  179.       if (btn.classList.contains("loading")) return;
  180.       this.status(btn, "loading");
  181.       let out = (await GM_getValue("filename", filename)).split("\n").join("");
  182.       let save_history = await GM_getValue("save_history", true);
  183.       let json = await this.fetchJson(status_id);
  184.       let tweet = json.legacy;
  185.       let user = json.core.user_results.result.legacy;
  186.       let invalid_chars = {
  187.         "\\": "＼",
  188.         "/": "／",
  189.         "|": "｜",
  190.         "<": "＜",
  191.         ">": "＞",
  192.         ":": "：",
  193.         "*": "＊",
  194.         "?": "？",
  195.         '"': "＂",
  196.         "\u200b": "",
  197.         "\u200c": "",
  198.         "\u200d": "",
  199.         "\u2060": "",
  200.         "\ufeff": "",
  201.         "🔞": "",
  202.       };
  203.       let datetime = out.match(/{date-time(-local)?:[^{}]+}/)
  204.         ? out
  205.           .match(/{date-time(?:-local)?:([^{}]+)}/)[1]
  206.           .replace(/[\\/|<>*?:"]/g, (v) => invalid_chars[v])
  207.         : "YYYY-MM-DD hh-mm-ss";
  208.       let info = {};
  209.       info["status-id"] = status_id;
  210.       info["user-name"] = user.name.replace(
  211.         /([\\/|*?:"]|[\u200b-\u200d\u2060\ufeff]|🔞)/g,
  212.         (v) => invalid_chars[v]
  213.       );
  214.       info["user-id"] = user.screen_name;
  215.       info["date-time"] = this.formatDate(tweet.created_at, datetime);
  216.       info["date-time-local"] = this.formatDate(
  217.         tweet.created_at,
  218.         datetime,
  219.         true
  220.       );
  221.       info["full-text"] = tweet.full_text
  222.         .split("\n")
  223.         .join(" ")
  224.         .replace(/\s*https:\/\/t\.co\/\w+/g, "")
  225.         .replace(
  226.           /[\\/|<>*?:"]|[\u200b-\u200d\u2060\ufeff]/g,
  227.           (v) => invalid_chars[v]
  228.         );
  229.       let medias = tweet.extended_entities && tweet.extended_entities.media;
  230.       if (index) medias = [medias[index - 1]];
  231.       if (medias.length > 0) {
  232.         let tasks = medias.length;
  233.         let tasks_result = [];
  234.         medias.forEach((media, i) => {
  235.           info.url =
  236.             media.type == "photo"
  237.               ? media.media_url_https + ":orig"
  238.               : media.video_info.variants
  239.                 .filter((n) => n.content_type == "video/mp4")
  240.                 .sort((a, b) => b.bitrate - a.bitrate)[0].url;
  241.           info.file = info.url.split("/").pop().split(/[:?]/).shift();
  242.           info["file-name"] = info.file.split(".").shift();
  243.           info["file-ext"] = info.file.split(".").pop();
  244.           info["file-type"] = media.type.replace("animated_", "");
  245.           info.out = (
  246.             out.replace(/\.?{file-ext}/, "") +
  247.             ((medias.length > 1 || index) && !out.match("{file-name}")
  248.               ? "-" + (index ? index - 1 : i)
  249.               : "") +
  250.             ".{file-ext}"
  251.           ).replace(/{([^{}:]+)(:[^{}]+)?}/g, (match, name) => info[name]);
  252.           this.downloader.add({
  253.             url: info.url,
  254.             name: info.out,
  255.             onload: () => {
  256.               tasks -= 1;
  257.               tasks_result.push(
  258.                 (medias.length > 1 || index
  259.                   ? (index ? index : i + 1) + ": "
  260.                   : "") + lang.completed
  261.               );
  262.               this.status(btn, null, tasks_result.sort().join("\n"));
  263.               if (tasks === 0) {
  264.                 this.status(btn, "completed", lang.completed);
  265.                 if (save_history && !is_exist) {
  266.                   history.push(status_id);
  267.                   this.storage(status_id);
  268.                 }
  269.               }
  270.             },
  271.             onerror: (result) => {
  272.               tasks = -1;
  273.               tasks_result.push(
  274.                 (medias.length > 1 ? i + 1 + ": " : "") + result.details.current
  275.               );
  276.               this.status(btn, "failed", tasks_result.sort().join("\n"));
  277.             },
  278.           });
  279.         });
  280.       } else {
  281.         this.status(btn, "failed", "MEDIA_NOT_FOUND");
  282.       }
  283.     },
  284.     status: function (btn, css, title, style) {
  285.       if (css) {
  286.         btn.classList.remove("download", "completed", "loading", "failed");
  287.         btn.classList.add(css);
  288.       }
  289.       if (title) btn.title = title;
  290.       if (style) btn.style.cssText = style;
  291.     },
  292.     settings: async function () {
  293.       const $element = (parent, tag, style, content, css) => {
  294.         let el = document.createElement(tag);
  295.         if (style) el.style.cssText = style;
  296.         if (typeof content !== "undefined") {
  297.           if (tag == "input") {
  298.             if (content == "checkbox") el.type = content;
  299.             else el.value = content;
  300.           } else el.innerHTML = content;
  301.         }
  302.         if (css) css.split(" ").forEach((c) => el.classList.add(c));
  303.         parent.appendChild(el);
  304.         return el;
  305.       };
  306.       let wapper = $element(
  307.         document.body,
  308.         "div",
  309.         "position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background-color: #0009; z-index: 10;"
  310.       );
  311.       let wapper_close;
  312.       wapper.onmousedown = (e) => {
  313.         wapper_close = e.target == wapper;
  314.       };
  315.       wapper.onmouseup = (e) => {
  316.         if (wapper_close && e.target == wapper) wapper.remove();
  317.       };
  318.       let dialog = $element(
  319.         wapper,
  320.         "div",
  321.         "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; color: black;"
  322.       );
  323.       let title = $element(
  324.         dialog,
  325.         "h3",
  326.         "margin: 10px 20px;",
  327.         lang.dialog.title
  328.       );
  329.       let options = $element(
  330.         dialog,
  331.         "div",
  332.         "margin: 10px; border: 1px solid #ccc; border-radius: 5px;"
  333.       );
  334.       let save_history_label = $element(
  335.         options,
  336.         "label",
  337.         "display: block; margin: 10px;",
  338.         lang.dialog.save_history
  339.       );
  340.       let save_history_input = $element(
  341.         save_history_label,
  342.         "input",
  343.         "float: left;",
  344.         "checkbox"
  345.       );
  346.       save_history_input.checked = await GM_getValue("save_history", true);
  347.       save_history_input.onchange = () => {
  348.         GM_setValue("save_history", save_history_input.checked);
  349.       };
  350.       let clear_history = $element(
  351.         save_history_label,
  352.         "label",
  353.         "display: inline-block; margin: 0 10px; color: blue;",
  354.         lang.dialog.clear_history
  355.       );
  356.       clear_history.onclick = () => {
  357.         if (confirm(lang.dialog.clear_confirm)) {
  358.           history = [];
  359.           GM_setValue("download_history", []);
  360.         }
  361.       };
  362.       let show_sensitive_label = $element(
  363.         options,
  364.         "label",
  365.         "display: block; margin: 10px;",
  366.         lang.dialog.show_sensitive
  367.       );
  368.       let show_sensitive_input = $element(
  369.         show_sensitive_label,
  370.         "input",
  371.         "float: left;",
  372.         "checkbox"
  373.       );
  374.       show_sensitive_input.checked = await GM_getValue("show_sensitive", false);
  375.       show_sensitive_input.onchange = () => {
  376.         show_sensitive = show_sensitive_input.checked;
  377.         GM_setValue("show_sensitive", show_sensitive);
  378.       };
  379.       let filename_div = $element(
  380.         dialog,
  381.         "div",
  382.         "margin: 10px; border: 1px solid #ccc; border-radius: 5px;"
  383.       );
  384.       let filename_label = $element(
  385.         filename_div,
  386.         "label",
  387.         "display: block; margin: 10px 15px;",
  388.         lang.dialog.pattern
  389.       );
  390.       let filename_input = $element(
  391.         filename_label,
  392.         "textarea",
  393.         "display: block; min-width: 500px; max-width: 500px; min-height: 100px; font-size: inherit; background: white; color: black;",
  394.         await GM_getValue("filename", filename)
  395.       );
  396.       let filename_tags = $element(
  397.         filename_div,
  398.         "label",
  399.         "display: table; margin: 10px;",
  400.         `
  401. <span class="tmd-tag" title="user name">{user-name}</span>
  402. <span class="tmd-tag" title="The user name after @ sign.">{user-id}</span>
  403. <span class="tmd-tag" title="example: 1234567890987654321">{status-id}</span>
  404. <span class="tmd-tag" title="{date-time} : Posted time in UTC.\n{date-time-local} : Your local time zone.\n\nDefault:\nYYYYMMDD-hhmmss => 20201231-235959\n\nExample of custom:\n{date-time:DD-MMM-YY hh.mm} => 31-DEC-21 23.59">{date-time}</span><br>
  405. <span class="tmd-tag" title="Text content in tweet.">{full-text}</span>
  406. <span class="tmd-tag" title="Type of &#34;video&#34; or &#34;photo&#34; or &#34;gif&#34;.">{file-type}</span>
  407. <span class="tmd-tag" title="Original filename from URL.">{file-name}</span>
  408. `
  409.       );
  410.       filename_input.selectionStart = filename_input.value.length;
  411.       filename_tags.querySelectorAll(".tmd-tag").forEach((tag) => {
  412.         tag.onclick = () => {
  413.           let ss = filename_input.selectionStart;
  414.           let se = filename_input.selectionEnd;
  415.           filename_input.value =
  416.             filename_input.value.substring(0, ss) +
  417.             tag.innerText +
  418.             filename_input.value.substring(se);
  419.           filename_input.selectionStart = ss + tag.innerText.length;
  420.           filename_input.selectionEnd = ss + tag.innerText.length;
  421.           filename_input.focus();
  422.         };
  423.       });
  424.       let btn_save = $element(
  425.         title,
  426.         "label",
  427.         "float: right;",
  428.         lang.dialog.save,
  429.         "tmd-btn"
  430.       );
  431.       btn_save.onclick = async () => {
  432.         await GM_setValue("filename", filename_input.value);
  433.         wapper.remove();
  434.       };
  435.     },
  436.     fetchJson: async function (status_id) {
  437.       let base_url = `https://${host}/i/api/graphql/NmCeCgkVlsRGS1cAwqtgmw/TweetDetail`;
  438.       let variables = {
  439.         focalTweetId: status_id,
  440.         with_rux_injections: false,
  441.         includePromotedContent: true,
  442.         withCommunity: true,
  443.         withQuickPromoteEligibilityTweetFields: true,
  444.         withBirdwatchNotes: true,
  445.         withVoice: true,
  446.         withV2Timeline: true,
  447.       };
  448.       let features = {
  449.         rweb_lists_timeline_redesign_enabled: true,
  450.         responsive_web_graphql_exclude_directive_enabled: true,
  451.         verified_phone_label_enabled: false,
  452.         creator_subscriptions_tweet_preview_api_enabled: true,
  453.         responsive_web_graphql_timeline_navigation_enabled: true,
  454.         responsive_web_graphql_skip_user_profile_image_extensions_enabled: false,
  455.         tweetypie_unmention_optimization_enabled: true,
  456.         responsive_web_edit_tweet_api_enabled: true,
  457.         graphql_is_translatable_rweb_tweet_is_translatable_enabled: true,
  458.         view_counts_everywhere_api_enabled: true,
  459.         longform_notetweets_consumption_enabled: true,
  460.         responsive_web_twitter_article_tweet_consumption_enabled: false,
  461.         tweet_awards_web_tipping_enabled: false,
  462.         freedom_of_speech_not_reach_fetch_enabled: true,
  463.         standardized_nudges_misinfo: true,
  464.         tweet_with_visibility_results_prefer_gql_limited_actions_policy_enabled: true,
  465.         longform_notetweets_rich_text_read_enabled: true,
  466.         longform_notetweets_inline_media_enabled: true,
  467.         responsive_web_media_download_video_enabled: false,
  468.         responsive_web_enhance_cards_enabled: false,
  469.       };
  470.       let url = encodeURI(
  471.         `${base_url}?variables=${JSON.stringify(
  472.           variables
  473.         )}&features=${JSON.stringify(features)}`
  474.       );
  475.       let cookies = this.getCookie();
  476.       let headers = {
  477.         authorization:
  478.           "Bearer AAAAAAAAAAAAAAAAAAAAANRILgAAAAAAnNwIzUejRCOuH5E6I8xnZz4puTs%3D1Zv7ttfk8LF81IUq16cHjhLTvJu4FA33AGWWjCpTnA",
  479.         "x-twitter-active-user": "yes",
  480.         "x-twitter-client-language": cookies.lang,
  481.         "x-csrf-token": cookies.ct0,
  482.       };
  483.       if (cookies.ct0.length == 32) headers["x-guest-token"] = cookies.gt;
  484.       let tweet_detail = await fetch(url, { headers: headers }).then((result) =>
  485.         result.json()
  486.       );
  487.       let tweet_entrie =
  488.         tweet_detail.data.threaded_conversation_with_injections_v2.instructions[0].entries.find(
  489.           (n) => n.entryId == `tweet-${status_id}`
  490.         );
  491.       let tweet_result = tweet_entrie.content.itemContent.tweet_results.result;
  492.       return tweet_result.tweet || tweet_result;
  493.     },
  494.     getCookie: function (name) {
  495.       let cookies = {};
  496.       document.cookie
  497.         .split(";")
  498.         .filter((n) => n.indexOf("=") > 0)
  499.         .forEach((n) => {
  500.           n.replace(/^([^=]+)=(.+)$/, (match, name, value) => {
  501.             cookies[name.trim()] = value.trim();
  502.           });
  503.         });
  504.       return name ? cookies[name] : cookies;
  505.     },
  506.     storage: async function (value) {
  507.       let data = await GM_getValue("download_history", []);
  508.       let data_length = data.length;
  509.       if (value) {
  510.         if (Array.isArray(value)) data = data.concat(value);
  511.         else if (data.indexOf(value) < 0) data.push(value);
  512.       } else return data;
  513.       if (data.length > data_length) GM_setValue("download_history", data);
  514.     },
  515.     storage_obsolete: function (is_remove) {
  516.       let data = JSON.parse(localStorage.getItem("history") || "[]");
  517.       if (is_remove) localStorage.removeItem("history");
  518.       else return data;
  519.     },
  520.     formatDate: function (i, o, tz) {
  521.       let d = new Date(i);
  522.       if (tz) d.setMinutes(d.getMinutes() - d.getTimezoneOffset());
  523.       let m = [
  524.         "JAN",
  525.         "FEB",
  526.         "MAR",
  527.         "APR",
  528.         "MAY",
  529.         "JUN",
  530.         "JUL",
  531.         "AUG",
  532.         "SEP",
  533.         "OCT",
  534.         "NOV",
  535.         "DEC",
  536.       ];
  537.       let v = {
  538.         YYYY: d.getUTCFullYear().toString(),
  539.         YY: d.getUTCFullYear().toString(),
  540.         MM: d.getUTCMonth() + 1,
  541.         MMM: m[d.getUTCMonth()],
  542.         DD: d.getUTCDate(),
  543.         hh: d.getUTCHours(),
  544.         mm: d.getUTCMinutes(),
  545.         ss: d.getUTCSeconds(),
  546.         h2: d.getUTCHours() % 12,
  547.         ap: d.getUTCHours() < 12 ? "AM" : "PM",
  548.       };
  549.       return o.replace(/(YY(YY)?|MMM?|DD|hh|mm|ss|h2|ap)/g, (n) =>
  550.         ("0" + v[n]).substr(-n.length)
  551.       );
  552.     },
  553.     downloader: (function () {
  554.       let tasks = [],
  555.         thread = 0,
  556.         max_thread = 2,
  557.         retry = 0,
  558.         max_retry = 2,
  559.         failed = 0,
  560.         notifier,
  561.         has_failed = false;
  562.       return {
  563.         add: function (task) {
  564.           tasks.push(task);
  565.           if (thread < max_thread) {
  566.             thread += 1;
  567.             this.next();
  568.           } else this.update();
  569.         },
  570.         next: async function () {
  571.           let task = tasks.shift();
  572.           await this.start(task);
  573.           if (tasks.length > 0 && thread <= max_thread) this.next();
  574.           else thread -= 1;
  575.           this.update();
  576.         },
  577.         start: function (task) {
  578.           this.update();
  579.           return new Promise((resolve) => {
  580.             GM_download({
  581.               url: task.url,
  582.               name: task.name,
  583.               onload: (result) => {
  584.                 task.onload();
  585.                 resolve();
  586.               },
  587.               onerror: (result) => {
  588.                 this.retry(task, result);
  589.                 resolve();
  590.               },
  591.               ontimeout: (result) => {
  592.                 this.retry(task, result);
  593.                 resolve();
  594.               },
  595.             });
  596.           });
  597.         },
  598.         retry: function (task, result) {
  599.           retry += 1;
  600.           if (retry == 3) max_thread = 1;
  601.           if (
  602.             (task.retry && task.retry >= max_retry) ||
  603.             (result.details && result.details.current == "USER_CANCELED")
  604.           ) {
  605.             task.onerror(result);
  606.             failed += 1;
  607.           } else {
  608.             if (max_thread == 1) task.retry = (task.retry || 0) + 1;
  609.             this.add(task);
  610.           }
  611.         },
  612.         update: function () {
  613.           if (!notifier) {
  614.             notifier = document.createElement("div");
  615.             notifier.title = "Twitter Media Downloader";
  616.             notifier.classList.add("tmd-notifier");
  617.             notifier.innerHTML = "<label>0</label>|<label>0</label>";
  618.             document.body.appendChild(notifier);
  619.           }
  620.           if (failed > 0 && !has_failed) {
  621.             has_failed = true;
  622.             notifier.innerHTML += "|";
  623.             let clear = document.createElement("label");
  624.             notifier.appendChild(clear);
  625.             clear.onclick = () => {
  626.               notifier.innerHTML = "<label>0</label>|<label>0</label>";
  627.               failed = 0;
  628.               has_failed = false;
  629.               this.update();
  630.             };
  631.           }
  632.           notifier.firstChild.innerText = thread;
  633.           notifier.firstChild.nextElementSibling.innerText = tasks.length;
  634.           if (failed > 0) notifier.lastChild.innerText = failed;
  635.           if (thread > 0 || tasks.length > 0 || failed > 0)
  636.             notifier.classList.add("running");
  637.           else notifier.classList.remove("running");
  638.         },
  639.       };
  640.     })(),
  641.     language: {
  642.       en: {
  643.         download: "Download",
  644.         completed: "Download Completed",
  645.         settings: "Settings",
  646.         dialog: {
  647.           title: "Download Settings",
  648.           save: "Save",
  649.           save_history: "Remember download history",
  650.           clear_history: "(Clear)",
  651.           clear_confirm: "Clear download history?",
  652.           show_sensitive: "Always show sensitive content",
  653.           pattern: "File Name Pattern",
  654.         },
  655.       },
  656.       ja: {
  657.         download: "ダウンロード",
  658.         completed: "ダウンロード完了",
  659.         settings: "設定",
  660.         dialog: {
  661.           title: "ダウンロード設定",
  662.           save: "保存",
  663.           save_history: "ダウンロード履歴を保存する",
  664.           clear_history: "(クリア)",
  665.           clear_confirm: "ダウンロード履歴を削除する？",
  666.           show_sensitive: "センシティブな内容を常に表示する",
  667.           pattern: "ファイル名パターン",
  668.         },
  669.       },
  670.       zh: {
  671.         download: "下载",
  672.         completed: "下载完成",
  673.         settings: "设置",
  674.         dialog: {
  675.           title: "下载设置",
  676.           save: "保存",
  677.           save_history: "保存下载记录",
  678.           clear_history: "(清除)",
  679.           clear_confirm: "确认要清除下载记录？",
  680.           show_sensitive: "自动显示敏感的内容",
  681.           pattern: "文件名格式",
  682.         },
  683.       },
  684.       "zh-Hant": {
  685.         download: "下載",
  686.         completed: "下載完成",
  687.         settings: "設置",
  688.         dialog: {
  689.           title: "下載設置",
  690.           save: "保存",
  691.           save_history: "保存下載記錄",
  692.           clear_history: "(清除)",
  693.           clear_confirm: "確認要清除下載記錄？",
  694.           show_sensitive: "自動顯示敏感的内容",
  695.           pattern: "文件名規則",
  696.         },
  697.       },
  698.     },
  699.     css: `
  700. .tmd-down {margin-left: 12px; order: 99;}
  701. .tmd-down:hover > div > div > div > div {color: rgba(29, 161, 242, 1.0);}
  702. .tmd-down:hover > div > div > div > div > div {background-color: rgba(29, 161, 242, 0.1);}
  703. .tmd-down:active > div > div > div > div > div {background-color: rgba(29, 161, 242, 0.2);}
  704. .tmd-down:hover svg {color: rgba(29, 161, 242, 1.0);}
  705. .tmd-down:hover div:first-child:not(:last-child) {background-color: rgba(29, 161, 242, 0.1);}
  706. .tmd-down:active div:first-child:not(:last-child) {background-color: rgba(29, 161, 242, 0.2);}
  707. .tmd-down.tmd-media {position: absolute; right: 0;}
  708. .tmd-down.tmd-media > div {display: flex; border-radius: 99px; margin: 2px;}
  709. .tmd-down.tmd-media > div > div {display: flex; margin: 6px; color: #fff;}
  710. .tmd-down.tmd-media:hover > div {background-color: rgba(255,255,255, 0.6);}
  711. .tmd-down.tmd-media:hover > div > div {color: rgba(29, 161, 242, 1.0);}
  712. .tmd-down.tmd-media:not(:hover) > div > div {filter: drop-shadow(0 0 1px #000);}
  713. .tmd-down g {display: none;}
  714. .tmd-down.download g.download, .tmd-down.completed g.completed, .tmd-down.loading g.loading,.tmd-down.failed g.failed {display: unset;}
  715. .tmd-down.loading svg {animation: spin 1s linear infinite;}
  716. @keyframes spin {0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}}
  717. .tmd-btn {display: inline-block; background-color: #1DA1F2; color: #FFFFFF; padding: 0 20px; border-radius: 99px;}
  718. .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;}
  719. .tmd-btn:hover {background-color: rgba(29, 161, 242, 0.9);}
  720. .tmd-tag:hover {background-color: rgba(29, 161, 242, 0.1);}
  721. .tmd-notifier {display: none; position: fixed; left: 16px; bottom: 16px; color: #000; background: #fff; border: 1px solid #ccc; border-radius: 8px; padding: 4px;}
  722. .tmd-notifier.running {display: flex; align-items: center;}
  723. .tmd-notifier label {display: inline-flex; align-items: center; margin: 0 8px;}
  724. .tmd-notifier label:before {content: " "; width: 32px; height: 16px; background-position: center; background-repeat: no-repeat;}
  725. .tmd-notifier label:nth-child(1):before {background-image:url("data:image/svg+xml;charset=utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 viewBox=%220 0 24 24%22><path d=%22M3,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%22 fill=%22none%22 stroke=%22%23666%22 stroke-width=%222%22 stroke-linecap=%22round%22 /></svg>");}
  726. .tmd-notifier label:nth-child(2):before {background-image:url("data:image/svg+xml;charset=utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 viewBox=%220 0 24 24%22><path d=%22M12,2 a1,1 0 0 1 0,20 a1,1 0 0 1 0,-20 M12,5 v7 h6%22 fill=%22none%22 stroke=%22%23999%22 stroke-width=%222%22 stroke-linejoin=%22round%22 stroke-linecap=%22round%22 /></svg>");}
  727. .tmd-notifier label:nth-child(3):before {background-image:url("data:image/svg+xml;charset=utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 viewBox=%220 0 24 24%22><path d=%22M12,0 a2,2 0 0 0 0,24 a2,2 0 0 0 0,-24%22 fill=%22%23f66%22 stroke=%22none%22 /><path d=%22M14.5,5 a1,1 0 0 0 -5,0 l0.5,9 a1,1 0 0 0 4,0 z M12,17 a2,2 0 0 0 0,5 a2,2 0 0 0 0,-5%22 fill=%22%23fff%22 stroke=%22none%22 /></svg>");}
  728. .tmd-down.tmd-img {position: absolute; right: 0; bottom: 0; display: none !important;}
  729. .tmd-down.tmd-img > div {display: flex; border-radius: 99px; margin: 2px; background-color: rgba(255,255,255, 0.6);}
  730. .tmd-down.tmd-img > div > div {display: flex; margin: 6px; color: #fff !important;}
  731. .tmd-down.tmd-img:not(:hover) > div > div {filter: drop-shadow(0 0 1px #000);}
  732. .tmd-down.tmd-img:hover > div > div {color: rgba(29, 161, 242, 1.0);}
  733. :hover > .tmd-down.tmd-img, .tmd-img.loading, .tmd-img.completed, .tmd-img.failed {display: block !important;}
  734. .tweet-detail-action-item {width: 20% !important;}
  735. `,
  736.     css_ss: `
  737. /* show sensitive in media tab */
  738. li[role="listitem"]>div>div>div>div:not(:last-child) {filter: none;}
  739. li[role="listitem"]>div>div>div>div+div:last-child {display: none;}
  740. `,
  741.     svg: `
  742. <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>
  743. <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>
  744. <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>
  745. <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>
  746. `,
  747.   };
  748. })();
  749.  
  750. TMD.init();