☰

Twitter Click'n'Save

Add buttons to download images and videos in Twitter, also does some other enhancements.

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

  1. // ==UserScript==
  2. // @name        Twitter Click'n'Save
  3. // @version     0.3.2
  4. // @namespace   gh.alttiri
  5. // @description Add buttons to download images and videos in Twitter, also does some other enhancements.
  6. // @match       https://twitter.com/*
  7. // @homepageURL https://github.com/AlttiRi/twitter-click-and-save
  8. // @supportURL  https://github.com/AlttiRi/twitter-click-and-save/issues
  9. // ==/UserScript==
  10. // ---------------------------------------------------------------------------------------------------------------------
  11. // ---------------------------------------------------------------------------------------------------------------------
  12.  
  13.  
  14. // --- Features to execute --- //
  15. function execFeaturesOnce() {
  16.     Features.addRequiredCSS();
  17.     Features.hideSignUpBottomBar();
  18.     Features.hideTrends();
  19.     Features.highlightVisitedLinks();
  20.     Features.hideTopicsToFollowInstantly();
  21. }
  22. function execFeaturesImmediately() {
  23.     Features.expandSpoilers();
  24. }
  25. function execFeatures() {
  26.     Features.imagesHandler();
  27.     Features.videoHandler();
  28.     Features.expandSpoilers();
  29.     Features.hideSignUpSection();
  30.     Features.hideTopicsToFollow();
  31.     Features.directLinks();
  32.     Features.handleTitle();
  33. }
  34.  
  35. // ---------------------------------------------------------------------------------------------------------------------
  36. // ---------------------------------------------------------------------------------------------------------------------
  37.  
  38.  
  39. // --- For debug --- //
  40. const verbose = false;
  41.  
  42.  
  43. // --- [Violentmonkey + Firefox 90 + Strict Tracking Protection] fix --- //
  44. const fetch = (globalThis.wrappedJSObject && typeof globalThis.wrappedJSObject.fetch === "function") ? function(resource, init) {
  45.     return globalThis.wrappedJSObject.fetch(resource, cloneInto(init, document));
  46. } : globalThis.fetch;
  47.  
  48.  
  49. // --- "Imports" --- //
  50. const {
  51.     sleep, fetchResource, download,
  52.     addCSS,
  53.     getCookie,
  54.     throttle,
  55.     xpath, xpathAll,
  56.     getNearestElementByType, getParentWithSiblingDataset,
  57. } = getUtils({verbose});
  58. const LS = hoistLS({verbose});
  59.  
  60. const API = hoistAPI();
  61. const Tweet = hoistTweet();
  62. const Features = hoistFeatures();
  63. const I18N = getLanguageConstants();
  64.  
  65.  
  66. // --- That to use for the image history --- //
  67. // "TWEET_ID" or "IMAGE_NAME"
  68. const imagesHistoryBy = LS.getItem("ujs-images-history-by", "IMAGE_NAME");
  69. // With "TWEET_ID" downloading of 1 image of 4 will mark all 4 images as "already downloaded"
  70. // on the next time when the tweet will appear.
  71. // "IMAGE_NAME" will count each image of a tweet, but it will take more data to store.
  72.  
  73.  
  74. // ---------------------------------------------------------------------------------------------------------------------
  75. // ---------------------------------------------------------------------------------------------------------------------
  76. // --- Script runner --- //
  77.  
  78. (function starter(feats) {
  79.     const {once, onChangeImmediate, onChange} = feats;
  80.  
  81.     once();
  82.     onChangeImmediate();
  83.     const onChangeThrottled = throttle(onChange, 250);
  84.     onChangeThrottled();
  85.  
  86.     const targetNode = document.querySelector("body");
  87.     const observerOptions = {
  88.         subtree: true,
  89.         childList: true,
  90.     };
  91.     const observer = new MutationObserver(callback);
  92.     observer.observe(targetNode, observerOptions);
  93.  
  94.     function callback(mutationList, observer) {
  95.         verbose && console.log(mutationList);
  96.         onChangeImmediate();
  97.         onChangeThrottled();
  98.     }
  99. })({
  100.     once: execFeaturesOnce,
  101.     onChangeImmediate: execFeaturesImmediately,
  102.     onChange: execFeatures
  103. });
  104.  
  105. // ---------------------------------------------------------------------------------------------------------------------
  106. // ---------------------------------------------------------------------------------------------------------------------
  107. // --- Twitter Specific code --- //
  108.  
  109.  
  110. const downloadedImages = new LS("ujs-twitter-downloaded-images-names");
  111. const downloadedImageTweetIds = new LS("ujs-twitter-downloaded-image-tweet-ids");
  112. const downloadedVideoTweetIds = new LS("ujs-twitter-downloaded-video-tweet-ids");
  113.  
  114. // --- Twitter.Features --- //
  115. function hoistFeatures() {
  116.     class Features {
  117.         static _ImageHistory = class {
  118.             static getImageNameFromUrl(url) {
  119.                 const _url = new URL(url);
  120.                 const {filename} = (_url.origin + _url.pathname).match(/(?<filename>[^\/]+$)/).groups;
  121.                 return filename.match(/^[^\.]+/)[0]; // remove extension
  122.             }
  123.             static isDownloaded({id, url}) {
  124.                 if (imagesHistoryBy === "TWEET_ID") {
  125.                     return downloadedImageTweetIds.hasItem(id);
  126.                 } else if (imagesHistoryBy === "IMAGE_NAME") {
  127.                     const name = Features._ImageHistory.getImageNameFromUrl(url);
  128.                     return downloadedImages.hasItem(name);
  129.                 }
  130.             }
  131.             static async markDownloaded({id, url}) {
  132.                 if (imagesHistoryBy === "TWEET_ID") {
  133.                     await downloadedImageTweetIds.pushItem(id);
  134.                 } else if (imagesHistoryBy === "IMAGE_NAME") {
  135.                     const name = Features._ImageHistory.getImageNameFromUrl(url);
  136.                     await downloadedImages.pushItem(name);
  137.                 }
  138.             }
  139.         }
  140.         static async imagesHandler() {
  141.             const images = document.querySelectorAll("img");
  142.             for (const img of images) {
  143.  
  144.                 if (img.width < 200 || img.dataset.handled) {
  145.                     continue;
  146.                 }
  147.                 verbose && console.log(img, img.width);
  148.  
  149.                 img.dataset.handled = "true";
  150.  
  151.                 const btn = document.createElement("div");
  152.                 btn.classList.add("ujs-btn-download");
  153.                 btn.dataset.url = img.src;
  154.  
  155.                 btn.addEventListener("click", Features._imageClickHandler);
  156.  
  157.                 let anchor = getNearestElementByType(img, "a");
  158.                 // if an image is _opened_ "https://twitter.com/UserName/status/1234567890123456789/photo/1" [fake-url]
  159.                 if (!anchor) {
  160.                     anchor = img.parentNode;
  161.                 }
  162.                 anchor.append(btn);
  163.  
  164.                 const downloaded = Features._ImageHistory.isDownloaded({
  165.                     id: Tweet.of(btn).id,
  166.                     url: btn.dataset.url
  167.                 });
  168.                 if (downloaded) {
  169.                     btn.classList.add("ujs-already-downloaded");
  170.                 }
  171.             }
  172.         }
  173.         static async _imageClickHandler(event) {
  174.             event.preventDefault();
  175.             event.stopImmediatePropagation();
  176.  
  177.             const btn = event.currentTarget;
  178.             const url = handleImgUrl(btn.dataset.url);
  179.             verbose && console.log(url);
  180.  
  181.             function handleImgUrl(url) {
  182.                 const urlObj = new URL(url);
  183.                 urlObj.searchParams.set("name", "orig");
  184.                 return urlObj.toString();
  185.             }
  186.  
  187.             const {id, author} = Tweet.of(btn);
  188.             verbose && console.log(id, author);
  189.  
  190.  
  191.             btn.classList.add("ujs-downloading");
  192.             const {blob, lastModifiedDate, extension, name} = await fetchResource(url);
  193.  
  194.             const filename = `[twitter] ${author}—${lastModifiedDate}—${id}—${name}.${extension}`;
  195.             download(blob, filename, url);
  196.  
  197.             const downloaded = btn.classList.contains("already-downloaded");
  198.             if (!downloaded) {
  199.                 await Features._ImageHistory.markDownloaded({id, url});
  200.             }
  201.             btn.classList.remove("ujs-downloading");
  202.             btn.classList.add("ujs-downloaded");
  203.         }
  204.  
  205.  
  206.         static async videoHandler() {
  207.             const videos = document.querySelectorAll("video");
  208.  
  209.             for (const vid of videos) {
  210.                 if (vid.dataset.handled) {
  211.                     continue;
  212.                 }
  213.                 verbose && console.log(vid);
  214.                 vid.dataset.handled = "true";
  215.  
  216.                 const btn = document.createElement("div");
  217.                 btn.classList.add("ujs-btn-download");
  218.                 btn.classList.add("ujs-video");
  219.                 btn.addEventListener("click", Features._videoClickHandler);
  220.  
  221.                 let elem = vid.parentNode.parentNode.parentNode;
  222.                 elem.after(btn);
  223.  
  224.                 const id = Tweet.of(btn).id;
  225.                 const downloaded = downloadedVideoTweetIds.hasItem(id);
  226.                 if (downloaded) {
  227.                     btn.classList.add("ujs-already-downloaded");
  228.                 }
  229.             }
  230.         }
  231.         static async _videoClickHandler(event) {
  232.             event.preventDefault();
  233.             event.stopImmediatePropagation();
  234.  
  235.             const btn = event.currentTarget;
  236.             const {id, author} = Tweet.of(btn);
  237.             const video = await API.getVideoInfo(id); // {bitrate, content_type, url}
  238.             verbose && console.log(video);
  239.  
  240.             btn.classList.add("ujs-downloading");
  241.             const url = video.url;
  242.             const {blob, lastModifiedDate, extension, name} = await fetchResource(url);
  243.  
  244.             const filename = `[twitter] ${author}—${lastModifiedDate}—${id}—${name}.${extension}`;
  245.             download(blob, filename, url);
  246.  
  247.             const downloaded = btn.classList.contains("ujs-already-downloaded");
  248.             if (!downloaded) {
  249.                 await downloadedVideoTweetIds.pushItem(id);
  250.             }
  251.             btn.classList.remove("ujs-downloading");
  252.             btn.classList.add("ujs-downloaded");
  253.         }
  254.  
  255.  
  256.         static addRequiredCSS() {
  257.             addCSS(getUserScriptCSS());
  258.         }
  259.  
  260.         // it depends of `directLinks()` // use only it after `directLinks()`
  261.         // it looks it sometimes does not work correctly, probably it executes before `directLinks`.
  262.         // todo: keep short urls and rerun this (Note: with the original title) after `directLinks` handled them.
  263.         static handleTitle() {
  264.             // if not a opened tweet
  265.             if (!location.href.match(/twitter\.com\/[^\/]+\/status\/\d+/)) {
  266.                 return;
  267.             }
  268.  
  269.             let titleText = document.title;
  270.             if (titleText === Features.lastHandledTitle) {
  271.                 return;
  272.             }
  273.  
  274.             const [OPEN_QUOTE, CLOSE_QUOTE] = I18N.QUOTES;
  275.             const urlsToReplace = [
  276.                 ...titleText.matchAll(new RegExp(`https:\\/\\/t\\.co\\/[^ ${CLOSE_QUOTE}]+`, "g"))
  277.             ].map(el => el[0]);
  278.             // the last one may be the URL to the tweet // or to an embedded shared URL
  279.  
  280.             const map = new Map();
  281.             const anchors = document.querySelectorAll(`a[data-redirect^="https://t.co/"]`);
  282.             for (const anchor of anchors) {
  283.                 if (urlsToReplace.includes(anchor.dataset.redirect)) {
  284.                     map.set(anchor.dataset.redirect, anchor.href);
  285.                 }
  286.             }
  287.  
  288.             const lastUrl = urlsToReplace.slice(-1)[0];
  289.             let lastUrlIsAttachment = false;
  290.             let attachmentDescription = "";
  291.             if (!map.has(lastUrl)) {
  292.                 const a = document.querySelector(`a[href="${lastUrl}?amp=1"]`);
  293.                 if (a) {
  294.                     lastUrlIsAttachment = true;
  295.                     attachmentDescription = document.querySelectorAll(`a[href="${lastUrl}?amp=1"]`)[1].innerText;
  296.                     attachmentDescription = attachmentDescription.replaceAll("\n", " — ");
  297.                 }
  298.             }
  299.  
  300.  
  301.             for (const [key, value] of map.entries()) {
  302.                 titleText = titleText.replaceAll(key, value + ` (${key})`);
  303.             }
  304.  
  305.             titleText = titleText.replace(new RegExp(` ${I18N.ON_TWITTER}(?=: ${OPEN_QUOTE})`), "");
  306.             titleText = titleText.replace(new RegExp(`(?<=${CLOSE_QUOTE}) \\\/ ${I18N.TWITTER}$`), "");
  307.             if (!lastUrlIsAttachment) {
  308.                 const regExp = new RegExp(`(?<short> https:\\/\\/t\\.co\\/.{6,14})${CLOSE_QUOTE}$`);
  309.                 titleText = titleText.replace(regExp, (match, p1, p2, offset, string) => `${CLOSE_QUOTE} —${p1}`);
  310.             } else {
  311.                 titleText = titleText.replace(lastUrl, `${lastUrl} (${attachmentDescription})`);
  312.             }
  313.             document.title = titleText; // Note: some characters will be removed automatically (`\n`, extra spaces)
  314.             Features.lastHandledTitle = document.title;
  315.         }
  316.         static lastHandledTitle = "";
  317.  
  318.  
  319.         static directLinks() {
  320.             const anchors = xpathAll(`.//a[@dir="ltr" and child::span and not(@data-handled)]`);
  321.             for (const anchor of anchors) {
  322.                 const redirectUrl = new URL(anchor.href);
  323.                 anchor.dataset.redirect = redirectUrl.origin + redirectUrl.pathname; // remove "?amp=1"
  324.                 anchor.dataset.handled = "true";
  325.  
  326.                 const nodes = xpathAll(`./span[text() != "…"]|./text()`, anchor);
  327.                 const url = nodes.map(node => node.textContent).join("");
  328.                 anchor.href = url;
  329.                 anchor.rel = "nofollow noopener noreferrer";
  330.             }
  331.         }
  332.  
  333.         // Do NOT throttle it
  334.         static expandSpoilers() {
  335.             const main = document.querySelector("main[role=main]");
  336.             if (!main) {
  337.                 return;
  338.             }
  339.  
  340.             const a = main.querySelectorAll("[data-testid=primaryColumn] [role=button]")
  341.             a && [...a]
  342.                 .find(el => el.textContent === I18N.YES_VIEW_PROFILE)
  343.                 ?.click();
  344.  
  345.             // todo: expand spoiler commentary in photo view mode (.../photo/1)
  346.             const b = main.querySelectorAll("article article[role=article] [role=button]");
  347.             b && [...b]
  348.                 .filter(el => el.textContent === I18N.VIEW)
  349.                 .forEach(el => el.click());
  350.         }
  351.  
  352.         static hideSignUpSection() { // "New to Twitter?"
  353.             if (!I18N.SIGNUP) { return; }
  354.             const elem = document.querySelector(`section[aria-label="${I18N.SIGNUP}"][role=region]`);
  355.             if (elem) {
  356.                 elem.parentNode.classList.add("ujs-hidden");
  357.             }
  358.         }
  359.  
  360.         // Call it once.
  361.         // "Don’t miss what’s happening" if you are not logged in.
  362.         // It looks that `#layers` is used only for this bar.
  363.         static hideSignUpBottomBar() {
  364.             addCSS(`
  365.                 #layers > div:nth-child(1) {
  366.                     display: none;
  367.                 }
  368.             `);
  369.         }
  370.  
  371.         // "Trends for you"
  372.         static hideTrends() {
  373.             if (!I18N.TRENDS) { return; }
  374.             addCSS(`
  375.                 [aria-label="${I18N.TRENDS}"]
  376.                 {
  377.                     display: none;
  378.                 }
  379.             `);
  380.         }
  381.         static highlightVisitedLinks() {
  382.             addCSS(`
  383.                 a:visited {
  384.                     color: darkorange;
  385.                 }
  386.             `);
  387.         }
  388.  
  389.  
  390.         // Use it once. To prevent blinking.
  391.         static hideTopicsToFollowInstantly() {
  392.             if (!I18N.TOPICS_TO_FOLLOW) { return; }
  393.             addCSS(`
  394.                 div[aria-label="${I18N.TOPICS_TO_FOLLOW}"] {
  395.                     display: none;
  396.                 }
  397.             `);
  398.         }
  399.         // Hides container and "separator line"
  400.         static hideTopicsToFollow() {
  401.             if (!I18N.TOPICS_TO_FOLLOW) { return; }
  402.             const elem = xpath(`.//section[@role="region" and child::div[@aria-label="${I18N.TOPICS_TO_FOLLOW}"]]/../..`);
  403.             if (!elem) {
  404.                 return;
  405.             }
  406.             elem.classList.add("ujs-hidden");
  407.  
  408.             elem.previousSibling.classList.add("ujs-hidden"); // a "separator line" (empty element of "TRENDS", for example)
  409.             // in fact it's a hack // todo rework // may hide "You might like" section [bug]
  410.         }
  411.  
  412.         // todo split to two methods
  413.         // todo fix it, currently it works questionably
  414.         // not tested with non eng langs
  415.         static footerHandled = false;
  416.         static hideAndMoveFooter() { // "Terms of Service   Privacy Policy   Cookie Policy"
  417.             let footer = document.querySelector(`main[role=main] nav[aria-label=${I18N.FOOTER}][role=navigation]`);
  418.             const nav  = document.querySelector("nav[aria-label=Primary][role=navigation]"); // I18N."Primary" [?]
  419.  
  420.             if (footer) {
  421.                 footer = footer.parentNode;
  422.                 const separatorLine = footer.previousSibling;
  423.  
  424.                 if (Features.footerHandled) {
  425.                     footer.remove();
  426.                     separatorLine.remove();
  427.                     return;
  428.                 }
  429.  
  430.                 nav.append(separatorLine);
  431.                 nav.append(footer);
  432.                 footer.classList.add("ujs-show-on-hover");
  433.                 separatorLine.classList.add("ujs-show-on-hover");
  434.  
  435.                 Features.footerHandled = true;
  436.             }
  437.         }
  438.     }
  439.     return Features;
  440. }
  441.  
  442. // --- Twitter.RequiredCSS --- //
  443. function getUserScriptCSS() {
  444.     const labelText = I18N.IMAGE || "Image";
  445.     const css = `
  446.         .ujs-hidden {
  447.             display: none;
  448.         }
  449.         
  450.         .ujs-show-on-hover:hover {
  451.             opacity: 1;
  452.             transition: opacity 1s ease-out 0.1s;
  453.         }
  454.         .ujs-show-on-hover {
  455.             opacity: 0;
  456.             transition: opacity 0.5s ease-out;
  457.         }
  458.         
  459.         .ujs-btn-download {
  460.             cursor: pointer;
  461.             top: 0.5em;
  462.             left: 0.5em;
  463.             width: 33px;
  464.             height: 33px;
  465.             background: #e0245e; /*red*/
  466.             opacity: 0;
  467.             position: absolute;
  468.             border-radius: 0.3em;
  469.             background-image: linear-gradient(to top, rgba(0,0,0,0.15), rgba(0,0,0,0.05));
  470.         }
  471.         article[role=article]:hover .ujs-btn-download {
  472.             opacity: 1;
  473.         }
  474.         div[aria-label="${labelText}"]:hover .ujs-btn-download {
  475.             opacity: 1;
  476.         }
  477.         
  478.         .ujs-btn-download.ujs-downloaded {
  479.             background: #4caf50; /*green*/
  480.             background-image: linear-gradient(to top, rgba(0,0,0,0.15), rgba(0,0,0,0.05));
  481.             opacity: 1;
  482.         }
  483.         .ujs-btn-download.ujs-video {
  484.             left: calc(0.5em + 33px + 3px);
  485.         }
  486.         article[role=article]:hover .ujs-already-downloaded:not(.ujs-downloaded) {
  487.             background: #1da1f2; /*blue*/
  488.             background-image: linear-gradient(to top, rgba(0,0,0,0.15), rgba(0,0,0,0.05));
  489.         }
  490.         div[aria-label="${labelText}"]:hover .ujs-already-downloaded:not(.ujs-downloaded) {
  491.             background: #1da1f2; /*blue*/
  492.             background-image: linear-gradient(to top, rgba(0,0,0,0.15), rgba(0,0,0,0.05));
  493.         }
  494.         
  495.         /* -------------------------------------------------------- */
  496.         /* Shadow the button on hover, active and while downloading */
  497.         .ujs-btn-download:hover {
  498.             background-image: linear-gradient(to top, rgba(0,0,0,0.25), rgba(0,0,0,0.05));
  499.         }
  500.         .ujs-btn-download:active {
  501.             background-image: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.25));
  502.         }
  503.         .ujs-btn-download.ujs-downloading {
  504.             background-image: linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0.15));
  505.         }
  506.         
  507.         article[role=article]:hover  .ujs-already-downloaded:not(.ujs-downloaded):hover {
  508.             background-image: linear-gradient(to top, rgba(0,0,0,0.25), rgba(0,0,0,0.05));
  509.         }
  510.         article[role=article]:hover  .ujs-already-downloaded:not(.ujs-downloaded):active {
  511.             background-image: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.25));
  512.         }
  513.         article[role=article]:hover  .ujs-already-downloaded:not(.ujs-downloaded).ujs-downloading {
  514.             background-image: linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0.15));
  515.         }
  516.         
  517.         div[aria-label="${labelText}"]:hover .ujs-already-downloaded:not(.ujs-downloaded):hover {
  518.             background-image: linear-gradient(to top, rgba(0,0,0,0.25), rgba(0,0,0,0.05));
  519.         }
  520.         div[aria-label="${labelText}"]:hover .ujs-already-downloaded:not(.ujs-downloaded):active {
  521.             background-image: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.25));
  522.         }
  523.         div[aria-label="${labelText}"]:hover .ujs-already-downloaded:not(.ujs-downloaded).ujs-downloading {
  524.             background-image: linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0.15));
  525.         }
  526.         
  527.         /* -------------------------------------------------------- */
  528.         
  529.         `;
  530.     return css.replaceAll(" ".repeat(8), "");
  531. }
  532.  
  533. // --- Twitter.LangConstants --- //
  534. function getLanguageConstants() { //todo: "ja", "zh", "de", "fr"
  535.     const defaultQuotes = [`"`, `"`];
  536.  
  537.     const SUPPORTED_LANGUAGES = ["en",                     "ru",                     "es",                                 "zh",               ];
  538.     const VIEW                = ["View",                   "Посмотреть",             "Ver",                                "查看",             ];
  539.     const YES_VIEW_PROFILE    = ["Yes, view profile",      "Да, посмотреть профиль", "Sí, ver perfil",                     "是，查看个人资料", ];
  540.     const SIGNUP              = ["Sign up",                "Зарегистрироваться",     "Regístrate",                         "注册",             ];
  541.     const TRENDS              = ["Timeline: Trending now", "Лента: Актуальные темы", "Cronología: Tendencias del momento", "时间线：当前趋势", ];
  542.     const TOPICS_TO_FOLLOW    = ["Timeline: ",             "Лента: ",                "Cronología: ",                       "时间线：",/*suggestion*/];
  543.     const WHO_TO_FOLLOW       = ["Who to follow",          "Кого читать",            "A quién seguir",                     "推荐关注",         ];
  544.     const FOOTER              = ["Footer",                 "Нижний колонтитул",      "Pie de página",                      "页脚",             ];
  545.     const QUOTES              = [defaultQuotes,            [`«`, `»`],               defaultQuotes,                        defaultQuotes,      ];
  546.     const ON_TWITTER          = ["on Twitter",             "в Твиттере",             "en Twitter",                         "在 Twitter",       ];
  547.     const TWITTER             = ["Twitter",                "Твиттер",                "Twitter",                            "Twitter",          ];
  548.     const IMAGE               = ["Image",                  "Изображение",            "Imagen",                             "图像",             ];
  549.  
  550.     const lang = document.querySelector("html").getAttribute("lang");
  551.     const langIndex = SUPPORTED_LANGUAGES.indexOf(lang);
  552.  
  553.     return {
  554.         SUPPORTED_LANGUAGES,
  555.         VIEW: VIEW[langIndex],
  556.         YES_VIEW_PROFILE: YES_VIEW_PROFILE[langIndex],
  557.         SIGNUP: SIGNUP[langIndex],
  558.         TRENDS: TRENDS[langIndex],
  559.         TOPICS_TO_FOLLOW: TOPICS_TO_FOLLOW[langIndex],
  560.         WHO_TO_FOLLOW: WHO_TO_FOLLOW[langIndex],
  561.         FOOTER: FOOTER[langIndex],
  562.         QUOTES: QUOTES[langIndex],
  563.         ON_TWITTER: ON_TWITTER[langIndex],
  564.         TWITTER: TWITTER[langIndex],
  565.         IMAGE: IMAGE[langIndex],
  566.     }
  567. }
  568.  
  569. // --- Twitter.Tweet --- //
  570. function hoistTweet() {
  571.     class Tweet {
  572.         constructor(elem) {
  573.             this.elem = elem;
  574.             this.url = Tweet.getUrl(elem);
  575.         }
  576.         static of(innerElem) {
  577.             const elem = getParentWithSiblingDataset(innerElem, "testid", "tweet");
  578.             if (!elem) { // opened image
  579.                 verbose && console.log("no-tweet elem");
  580.             }
  581.             return new Tweet(elem);
  582.         }
  583.         static getUrl(elem) {
  584.             if (!elem) { // if opened image
  585.                 return location.href;
  586.             }
  587.  
  588.             const tweetAnchor = [...elem.querySelectorAll("a")].find(el => {
  589.                 return el.childNodes[0]?.nodeName === "TIME";
  590.             });
  591.  
  592.             if (tweetAnchor) {
  593.                 return tweetAnchor.href;
  594.             }
  595.             // else if selected tweet
  596.             return location.href;
  597.         }
  598.  
  599.         get author() {
  600.             return this.url.match(/(?<=twitter\.com\/).+?(?=\/)/)?.[0];
  601.         }
  602.         get id() {
  603.             return this.url.match(/(?<=\/status\/)[^\/]+/)?.[0];
  604.         }
  605.     }
  606.     return Tweet;
  607. }
  608.  
  609. // --- Twitter.API --- //
  610. function hoistAPI() {
  611.     class API {
  612.         static guestToken = getCookie("gt");
  613.         static csrfToken  = getCookie("ct0");  // todo: lazy — not available at the first run
  614.         // Guest/Suspended account Bearer token
  615.         static guestAuthorization = "Bearer AAAAAAAAAAAAAAAAAAAAANRILgAAAAAAnNwIzUejRCOuH5E6I8xnZz4puTs%3D1Zv7ttfk8LF81IUq16cHjhLTvJu4FA33AGWWjCpTnA";
  616.  
  617.         static async _requestBearerToken() {
  618.             const scriptSrc = [...document.querySelectorAll("script")]
  619.                 .find(el => el.src.match(/https:\/\/abs\.twimg\.com\/responsive-web\/client-web\/main[\w\d\.]*\.js/)).src;
  620.             const text = await (await fetch(scriptSrc)).text();
  621.             const authorizationKey = text.match(/(?<=")AAAAAAAAAAAAAAAAAAAAANRILgAAAAAAnNwIzUejRCOuH5E6I8xnZz4puTs%3D.+?(?=")/)[0];
  622.             const authorization = `Bearer ${authorizationKey}`;
  623.  
  624.             return authorization;
  625.         }
  626.  
  627.         static async getAuthorization() {
  628.             if (!API.authorization) {
  629.                 API.authorization = await API._requestBearerToken();
  630.             }
  631.             return API.authorization;
  632.         }
  633.  
  634.         // @return {bitrate, content_type, url}
  635.         static async getVideoInfo(tweetId) {
  636.             // Hm... it always is the same. Even for a logged user.
  637.             // const authorization = API.guestToken ? API.guestAuthorization : await API.getAuthorization();
  638.             const authorization = API.guestAuthorization;
  639.  
  640.             // for debug
  641.             verbose && sessionStorage.setItem("guestAuthorization", API.guestAuthorization);
  642.             verbose && sessionStorage.setItem("authorization", API.authorization);
  643.             verbose && sessionStorage.setItem("x-csrf-token", API.csrfToken);
  644.             verbose && sessionStorage.setItem("x-guest-token", API.guestToken);
  645.  
  646.             // const url = new URL(`https://api.twitter.com/2/timeline/conversation/${tweetId}.json`); // only for suspended/anon
  647.             const url = new URL(`https://twitter.com/i/api/2/timeline/conversation/${tweetId}.json`);
  648.             url.searchParams.set("tweet_mode", "extended");
  649.  
  650.             const headers = new Headers({
  651.                 authorization,
  652.                 "x-csrf-token": API.csrfToken,
  653.             });
  654.             if (API.guestToken) {
  655.                 headers.append("x-guest-token", API.guestToken);
  656.             } else { // may be skipped
  657.                 headers.append("x-twitter-active-user", "yes");
  658.                 headers.append("x-twitter-auth-type", "OAuth2Session");
  659.             }
  660.  
  661.             const response = await fetch(url, {headers});
  662.             const json = await response.json();
  663.  
  664.             verbose && console.warn(JSON.stringify(json, null, " "));
  665.             // 429 - [{code: 88, message: "Rate limit exceeded"}] — for suspended accounts
  666.  
  667.  
  668.             const tweetData = json.globalObjects.tweets[tweetId];
  669.             const videoVariants = tweetData.extended_entities.media[0].video_info.variants;
  670.             verbose && console.log(videoVariants);
  671.  
  672.  
  673.             const video = videoVariants
  674.                 .filter(el => el.bitrate !== undefined) // if content_type: "application/x-mpegURL" // .m3u8
  675.                 .reduce((acc, cur) => cur.bitrate > acc.bitrate ? cur : acc);
  676.             return video;
  677.         }
  678.     }
  679.     return API;
  680. }
  681.  
  682. // ---------------------------------------------------------------------------------------------------------------------
  683. // ---------------------------------------------------------------------------------------------------------------------
  684. // --- Common Utils --- //
  685.  
  686. // --- LocalStorage util class --- //
  687. function hoistLS(settings = {}) {
  688.     const {
  689.         verbose, // debug "messages" in the document.title
  690.     } = settings;
  691.     class LS {
  692.         constructor(name) {
  693.             this.name = name;
  694.         }
  695.         getItem(defaultValue) {
  696.             return LS.getItem(this.name, defaultValue);
  697.         }
  698.         setItem(value) {
  699.             LS.setItem(this.name, value);
  700.         }
  701.         removeItem() {
  702.             LS.removeItem(this.name);
  703.         }
  704.         async pushItem(value) {  // array method
  705.             await LS.pushItem(this.name, value);
  706.         }
  707.         async popItem(value) {   // array method
  708.             await LS.popItem(this.name, value);
  709.         }
  710.         hasItem(value) {         // array method
  711.             return LS.hasItem(this.name, value);
  712.         }
  713.  
  714.         static getItem(name, defaultValue) {
  715.             const value = localStorage.getItem(name);
  716.             if (value === undefined) {
  717.                 return undefined;
  718.             }
  719.             if (value === null) { // when there is no such item
  720.                 LS.setItem(name, defaultValue);
  721.                 return defaultValue;
  722.             }
  723.             return JSON.parse(value);
  724.         }
  725.         static setItem(name, value) {
  726.             localStorage.setItem(name, JSON.stringify(value));
  727.         }
  728.         static removeItem(name) {
  729.             localStorage.removeItem(name);
  730.         }
  731.         static async pushItem(name, value) {
  732.             const array = LS.getItem(name, []);
  733.             array.push(value);
  734.             LS.setItem(name, array);
  735.  
  736.             //sanity check
  737.             await sleep(50);
  738.             if (!LS.hasItem(name, value)) {
  739.                 if (verbose) {
  740.                     document.title = "🟥" + document.title;
  741.                 }
  742.                 await LS.pushItem(name, value);
  743.             }
  744.         }
  745.         static async popItem(name, value) { // remove from an array
  746.             const array = LS.getItem(name, []);
  747.             if (array.indexOf(value) !== -1) {
  748.                 array.splice(array.indexOf(value), 1);
  749.                 LS.setItem(name, array);
  750.  
  751.                 //sanity check
  752.                 await sleep(50);
  753.                 if (LS.hasItem(name, value)) {
  754.                     if (verbose) {
  755.                         document.title = "🟨" + document.title;
  756.                     }
  757.                     await LS.popItem(name, value);
  758.                 }
  759.             }
  760.         }
  761.         static hasItem(name, value) { // has in array
  762.             const array = LS.getItem(name, []);
  763.             return array.indexOf(value) !== -1;
  764.         }
  765.     }
  766.     return LS;
  767. }
  768.  
  769. // --- Just groups them in a function for the convenient code looking --- //
  770. function getUtils({verbose}) {
  771.     function sleep(time) {
  772.         return new Promise(resolve => setTimeout(resolve, time));
  773.     }
  774.  
  775.     async function fetchResource(url) {
  776.         try {
  777.             const response = await fetch(url, {
  778.                 cache: "force-cache",
  779.             });
  780.             const lastModifiedDateSeconds = response.headers.get("last-modified");
  781.             const contentType = response.headers.get("content-type");
  782.  
  783.             const lastModifiedDate = dateToDayDateString(lastModifiedDateSeconds);
  784.             const extension = extensionFromMime(contentType);
  785.             const blob = await response.blob();
  786.  
  787.             // https://pbs.twimg.com/media/AbcdEFgijKL01_9?format=jpg&name=orig                                     -> AbcdEFgijKL01_9
  788.             // https://pbs.twimg.com/ext_tw_video_thumb/1234567890123456789/pu/img/Ab1cd2345EFgijKL.jpg?name=orig   -> Ab1cd2345EFgijKL.jpg
  789.             // https://video.twimg.com/ext_tw_video/1234567890123456789/pu/vid/946x720/Ab1cd2345EFgijKL.mp4?tag=10  -> Ab1cd2345EFgijKL.mp4
  790.             const _url = new URL(url);
  791.             const {filename} = (_url.origin + _url.pathname).match(/(?<filename>[^\/]+$)/).groups;
  792.  
  793.             const {name} = filename.match(/(?<name>^[^\.]+)/).groups;
  794.             return {blob, lastModifiedDate, contentType, extension, name};
  795.         } catch (error) {
  796.             verbose && console.error(url, error);
  797.             throw error;
  798.         }
  799.     }
  800.  
  801.     function extensionFromMime(mimeType) {
  802.         let extension = mimeType.match(/(?<=\/).+/)[0];
  803.         extension = extension === "jpeg" ? "jpg" : extension;
  804.         return extension;
  805.     }
  806.  
  807.     // the original download url will be posted as hash of the blob url, so you can check it in the download manager's history
  808.     function download(blob, name = "", url = "") {
  809.         const a = document.createElement("a");
  810.         a.href = URL.createObjectURL(blob) + "#" + url;
  811.         a.download = name;
  812.         a.click();
  813.  
  814.         setTimeout(_ => {
  815.             URL.revokeObjectURL(a.href);
  816.         }, 1000 * 30);
  817.     }
  818.  
  819.     // "Sun, 10 Jan 2021 22:22:22 GMT" -> "2021.01.10"
  820.     function dateToDayDateString(dateValue, utc = true) {
  821.         const _date = new Date(dateValue);
  822.         function pad(str) {
  823.             return str.toString().padStart(2, "0");
  824.         }
  825.         const _utc = utc ? "UTC" : "";
  826.         const year  = _date[`get${_utc}FullYear`]();
  827.         const month = _date[`get${_utc}Month`]() + 1;
  828.         const date  = _date[`get${_utc}Date`]();
  829.  
  830.         return year + "." + pad(month) + "." + pad(date);
  831.     }
  832.  
  833.  
  834.     function addCSS(css) {
  835.         const styleElem = document.createElement("style");
  836.         styleElem.textContent = css;
  837.         document.body.append(styleElem);
  838.         return styleElem;
  839.     }
  840.  
  841.  
  842.     function getCookie(name) {
  843.         verbose && console.log(document.cookie);
  844.         const regExp = new RegExp(`(?<=${name}=)[^;]+`);
  845.         return document.cookie.match(regExp)?.[0];
  846.     }
  847.  
  848.     function throttle(runnable, time = 50) {
  849.         let waiting = false;
  850.         let queued = false;
  851.         let context;
  852.         let args;
  853.  
  854.         return function() {
  855.             if (!waiting) {
  856.                 waiting = true;
  857.                 setTimeout(function() {
  858.                     if (queued) {
  859.                         runnable.apply(context, args);
  860.                         context = args = undefined;
  861.                     }
  862.                     waiting = queued = false;
  863.                 }, time);
  864.                 return runnable.apply(this, arguments);
  865.             } else {
  866.                 queued = true;
  867.                 context = this;
  868.                 args = arguments;
  869.             }
  870.         }
  871.     }
  872.     function throttleWithResult(func, time = 50) {
  873.         let waiting = false;
  874.         let args;
  875.         let context;
  876.         let timeout;
  877.         let promise;
  878.  
  879.         return async function() {
  880.             if (!waiting) {
  881.                 waiting = true;
  882.                 timeout = new Promise(async resolve => {
  883.                     await sleep(time);
  884.                     waiting = false;
  885.                     resolve();
  886.                 });
  887.                 return func.apply(this, arguments);
  888.             } else {
  889.                 args = arguments;
  890.                 context = this;
  891.             }
  892.  
  893.             if (!promise) {
  894.                 promise = new Promise(async resolve => {
  895.                     await timeout;
  896.                     const result = func.apply(context, args);
  897.                     args = context = promise = undefined;
  898.                     resolve(result);
  899.                 });
  900.             }
  901.             return promise;
  902.         }
  903.     }
  904.  
  905.  
  906.     function xpath(path, node = document) {
  907.         let xPathResult = document.evaluate(path, node, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
  908.         return xPathResult.singleNodeValue;
  909.     }
  910.     function xpathAll(path, node = document) {
  911.         let xPathResult = document.evaluate(path, node, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
  912.         const nodes = [];
  913.         try {
  914.             let node = xPathResult.iterateNext();
  915.  
  916.             while (node) {
  917.                 nodes.push(node);
  918.                 node = xPathResult.iterateNext();
  919.             }
  920.             return nodes;
  921.         }
  922.         catch (e) {
  923.             // todo need investigate it
  924.             console.error(e); // "The document has mutated since the result was returned."
  925.             return [];
  926.         }
  927.     }
  928.  
  929.  
  930.     function getNearestElementByType(elem, type) {
  931.         const parent = elem.parentNode;
  932.         if (parent === document) {
  933.             return null;
  934.         }
  935.         if (parent.nodeName === type.toUpperCase()) {
  936.             return parent;
  937.         }
  938.         return getNearestElementByType(parent, type);
  939.     }
  940.     function getParentWithSiblingDataset(node, name, value) {
  941.         const parent = node.parentNode;
  942.         if (parent === document) {
  943.             return null;
  944.         }
  945.         // console.log(parent, parent.childNodes);
  946.         const elem = [...parent.childNodes].find(el => {
  947.             if (el.dataset?.[name] === value) {
  948.                 return true;
  949.             }
  950.         });
  951.         if (!elem) {
  952.             return getParentWithSiblingDataset(parent, name, value);
  953.         }
  954.         return parent;
  955.     }
  956.  
  957.     return {
  958.         sleep, fetchResource, extensionFromMime, download, dateToDayDateString,
  959.         addCSS,
  960.         getCookie,
  961.         throttle, throttleWithResult,
  962.         xpath, xpathAll,
  963.         getNearestElementByType, getParentWithSiblingDataset,
  964.     }
  965. }
  966.  
  967.  
  968. // ---------------------------------------------------------------------------------------------------------------------
  969. // ---------------------------------------------------------------------------------------------------------------------