Twitter Click'n'Save

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

目前為 2023-07-07 提交的版本,檢視 最新版本

  1. // ==UserScript==
  2. // @name Twitter Click'n'Save
  3. // @version 1.5.0-2023.07.07
  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. // @license GPL-3.0
  10. // @grant GM_registerMenuCommand
  11. // ==/UserScript==
  12. // ---------------------------------------------------------------------------------------------------------------------
  13. // ---------------------------------------------------------------------------------------------------------------------
  14.  
  15. // Please, report bugs and suggestions on GitHub, not Greasyfork.
  16. // --> https://github.com/AlttiRi/twitter-click-and-save/issues <--
  17.  
  18. // ---------------------------------------------------------------------------------------------------------------------
  19. // ---------------------------------------------------------------------------------------------------------------------
  20. // --- "Imports" --- //
  21.  
  22. const {StorageNames, StorageNamesOld} = getStorageNames();
  23.  
  24. const {verbose, debugPopup} = getDebugSettings(); // --- For debug --- //
  25.  
  26.  
  27. const {
  28. sleep, fetchResource, downloadBlob,
  29. addCSS,
  30. getCookie,
  31. throttle,
  32. xpath, xpathAll,
  33. responseProgressProxy,
  34. dateToDayDateString,
  35. toLineJSON,
  36. isFirefox,
  37. getBrowserName,
  38. } = getUtils({verbose});
  39.  
  40. const LS = hoistLS({verbose});
  41.  
  42. const API = hoistAPI();
  43. const Tweet = hoistTweet();
  44. const Features = hoistFeatures();
  45. const I18N = getLanguageConstants();
  46.  
  47. // ---------------------------------------------------------------------------------------------------------------------
  48.  
  49. function getStorageNames() {
  50. // New LocalStorage key names 2023.07.05
  51. const StorageNames = {
  52. settings: "ujs-twitter-click-n-save-settings",
  53. settingsImageHistoryBy: "ujs-twitter-click-n-save-settings-image-history-by",
  54. downloadedImageNames: "ujs-twitter-click-n-save-downloaded-image-names",
  55. downloadedImageTweetIds: "ujs-twitter-click-n-save-downloaded-image-tweet-ids",
  56. downloadedVideoTweetIds: "ujs-twitter-click-n-save-downloaded-video-tweet-ids",
  57.  
  58. migrated: "ujs-twitter-click-n-save-migrated", // Currently unused
  59. browserName: "ujs-twitter-click-n-save-browser-name", // Hidden settings
  60. verbose: "ujs-twitter-click-n-save-verbose", // Hidden settings for debug
  61. debugPopup: "ujs-twitter-click-n-save-debug-popup", // Hidden settings for debug
  62. };
  63. const StorageNamesOld = {
  64. settings: "ujs-click-n-save-settings",
  65. settingsImageHistoryBy: "ujs-images-history-by",
  66. downloadedImageNames: "ujs-twitter-downloaded-images-names",
  67. downloadedImageTweetIds: "ujs-twitter-downloaded-image-tweet-ids",
  68. downloadedVideoTweetIds: "ujs-twitter-downloaded-video-tweet-ids",
  69. };
  70. return {StorageNames, StorageNamesOld};
  71. }
  72.  
  73. function getDebugSettings() {
  74. let verbose = false;
  75. let debugPopup = false;
  76. try {
  77. verbose = Boolean(JSON.parse(localStorage.getItem(StorageNames.verbose)));
  78. } catch (err) {}
  79. try {
  80. debugPopup = Boolean(JSON.parse(localStorage.getItem(StorageNames.debugPopup)));
  81. } catch (err) {}
  82.  
  83. return {verbose, debugPopup};
  84. }
  85.  
  86. const historyHelper = getHistoryHelper();
  87. historyHelper.migrateLocalStore();
  88.  
  89. // ---------------------------------------------------------------------------------------------------------------------
  90.  
  91.  
  92. // ---------------------------------------------------------------------------------------------------------------------
  93.  
  94. if (globalThis.GM_registerMenuCommand /* undefined in Firefox with VM */ || typeof GM_registerMenuCommand === "function") {
  95. GM_registerMenuCommand("Show settings", showSettings);
  96. }
  97.  
  98. const settings = loadSettings();
  99.  
  100. if (verbose) {
  101. console.log("[ujs][settings]", settings);
  102. }
  103. if (debugPopup) {
  104. showSettings();
  105. }
  106.  
  107. // ---------------------------------------------------------------------------------------------------------------------
  108.  
  109. const fetch = ujs_getGlobalFetch({verbose, strictTrackingProtectionFix: settings.strictTrackingProtectionFix});
  110.  
  111. function ujs_getGlobalFetch({verbose, strictTrackingProtectionFix} = {}) {
  112. const useFirefoxStrictTrackingProtectionFix = strictTrackingProtectionFix === undefined ? true : strictTrackingProtectionFix; // Let's use by default
  113. const useFirefoxFix = useFirefoxStrictTrackingProtectionFix && typeof wrappedJSObject === "object" && typeof wrappedJSObject.fetch === "function";
  114. // --- [VM/GM + Firefox ~90+ + Enabled "Strict Tracking Protection"] fix --- //
  115. function fixedFirefoxFetch(resource, init = {}) {
  116. verbose && console.log("[ujs][wrappedJSObject.fetch]", resource, init);
  117. if (init.headers instanceof Headers) {
  118. // Since `Headers` are not allowed for structured cloning.
  119. init.headers = Object.fromEntries(init.headers.entries());
  120. }
  121. return wrappedJSObject.fetch(cloneInto(resource, document), cloneInto(init, document));
  122. }
  123. return useFirefoxFix ? fixedFirefoxFetch : globalThis.fetch;
  124. }
  125.  
  126. // ---------------------------------------------------------------------------------------------------------------------
  127. // --- Features to execute --- //
  128.  
  129. const doNotPlayVideosAutomatically = false; // Hidden settings
  130.  
  131. function execFeaturesOnce() {
  132. settings.goFromMobileToMainSite && Features.goFromMobileToMainSite();
  133. settings.addRequiredCSS && Features.addRequiredCSS();
  134. settings.hideSignUpBottomBarAndMessages && Features.hideSignUpBottomBarAndMessages(doNotPlayVideosAutomatically);
  135. settings.hideTrends && Features.hideTrends();
  136. settings.highlightVisitedLinks && Features.highlightVisitedLinks();
  137. settings.hideLoginPopup && Features.hideLoginPopup();
  138. }
  139. function execFeaturesImmediately() {
  140. settings.expandSpoilers && Features.expandSpoilers();
  141. }
  142. function execFeatures() {
  143. settings.imagesHandler && Features.imagesHandler();
  144. settings.videoHandler && Features.videoHandler();
  145. settings.expandSpoilers && Features.expandSpoilers();
  146. settings.hideSignUpSection && Features.hideSignUpSection();
  147. settings.directLinks && Features.directLinks();
  148. settings.handleTitle && Features.handleTitle();
  149. }
  150.  
  151. // ---------------------------------------------------------------------------------------------------------------------
  152.  
  153. // ---------------------------------------------------------------------------------------------------------------------
  154. // --- Script runner --- //
  155.  
  156. (function starter(feats) {
  157. const {once, onChangeImmediate, onChange} = feats;
  158.  
  159. once();
  160. onChangeImmediate();
  161. const onChangeThrottled = throttle(onChange, 250);
  162. onChangeThrottled();
  163.  
  164. const targetNode = document.querySelector("body");
  165. const observerOptions = {
  166. subtree: true,
  167. childList: true,
  168. };
  169. const observer = new MutationObserver(callback);
  170. observer.observe(targetNode, observerOptions);
  171.  
  172. function callback(mutationList, observer) {
  173. verbose && console.log("[ujs][mutationList]", mutationList);
  174. onChangeImmediate();
  175. onChangeThrottled();
  176. }
  177. })({
  178. once: execFeaturesOnce,
  179. onChangeImmediate: execFeaturesImmediately,
  180. onChange: execFeatures
  181. });
  182.  
  183. // ---------------------------------------------------------------------------------------------------------------------
  184. // ---------------------------------------------------------------------------------------------------------------------
  185.  
  186. function loadSettings() {
  187. const defaultSettings = {
  188. hideTrends: true,
  189. hideSignUpSection: false,
  190. hideSignUpBottomBarAndMessages: false,
  191. doNotPlayVideosAutomatically: false,
  192. goFromMobileToMainSite: false,
  193.  
  194. highlightVisitedLinks: true,
  195. highlightOnlySpecialVisitedLinks: true,
  196. expandSpoilers: true,
  197.  
  198. directLinks: true,
  199. handleTitle: true,
  200.  
  201. imagesHandler: true,
  202. videoHandler: true,
  203. addRequiredCSS: true,
  204.  
  205. hideLoginPopup: false,
  206. addBorder: false,
  207.  
  208. downloadProgress: true,
  209. strictTrackingProtectionFix: false,
  210. };
  211.  
  212. let savedSettings;
  213. try {
  214. savedSettings = JSON.parse(localStorage.getItem(StorageNames.settings)) || {};
  215. } catch (err) {
  216. console.error("[ujs][parse-settings]", err);
  217. localStorage.removeItem(StorageNames.settings);
  218. savedSettings = {};
  219. }
  220. savedSettings = Object.assign(defaultSettings, savedSettings);
  221. return savedSettings;
  222. }
  223. function showSettings() {
  224. closeSetting();
  225. if (window.scrollY > 0) {
  226. document.querySelector("html").classList.add("ujs-scroll-initial");
  227. document.body.classList.add("ujs-scrollbar-width-margin-right");
  228. }
  229. document.body.classList.add("ujs-no-scroll");
  230.  
  231. const modalWrapperStyle = `
  232. width: 100%;
  233. height: 100%;
  234. position: fixed;
  235. display: flex;
  236. justify-content: center;
  237. align-items: center;
  238. z-index: 99999;
  239. backdrop-filter: blur(4px);
  240. background-color: rgba(255, 255, 255, 0.5);
  241. `;
  242. const modalSettingsStyle = `
  243. background-color: white;
  244. min-width: 320px;
  245. min-height: 320px;
  246. border: 1px solid darkgray;
  247. padding: 8px;
  248. box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  249. `;
  250. const s = settings;
  251. const downloadProgressFFTitle = `Disable the download progress if you use Firefox with "Enhanced Tracking Protection" set to "Strict" and ViolentMonkey, or GreaseMonkey extension`;
  252. const strictTrackingProtectionFixFFTitle = `Choose this if you use ViolentMonkey, or GreaseMonkey in Firefox with "Enhanced Tracking Protection" set to "Strict". It is not required in case you use TamperMonkey.`;
  253. document.body.insertAdjacentHTML("afterbegin", `
  254. <div class="ujs-modal-wrapper" style="${modalWrapperStyle}">
  255. <div class="ujs-modal-settings" style="${modalSettingsStyle}">
  256. <fieldset>
  257. <legend>Optional</legend>
  258. <label title="Makes the button more visible"><input type="checkbox" ${s.addBorder ? "checked" : ""} name="addBorder">Add a white border to the download button<br/></label>
  259. <label title="WARNING: It may broke the login page, but it works fine if you logged in and want to hide 'Messages'"><input type="checkbox" ${s.hideSignUpBottomBarAndMessages ? "checked" : ""} name="hideSignUpBottomBarAndMessages">Hide <strike><b>Sign Up Bar</b> and</strike> <b>Messages</b> (in the bottom). <span title="WARNING: It may broke the login page!">(beta)</span><br/></label>
  260. <label><input type="checkbox" ${s.hideTrends ? "checked" : ""} name="hideTrends">Hide <b>Trends</b> (in the right column)*<br/></label>
  261. <label hidden><input type="checkbox" ${s.doNotPlayVideosAutomatically ? "checked" : ""} name="doNotPlayVideosAutomatically">Do <i>Not</i> Play Videos Automatically</b><br/></label>
  262. <label hidden><input type="checkbox" ${s.goFromMobileToMainSite ? "checked" : ""} name="goFromMobileToMainSite">Redirect from Mobile version (beta)<br/></label>
  263. </fieldset>
  264. <fieldset>
  265. <legend>Recommended</legend>
  266. <label><input type="checkbox" ${s.highlightVisitedLinks ? "checked" : ""} name="highlightVisitedLinks">Highlight Visited Links<br/></label>
  267. <label title="In most cases absolute links are 3rd-party links"><input type="checkbox" ${s.highlightOnlySpecialVisitedLinks ? "checked" : ""} name="highlightOnlySpecialVisitedLinks">Highlight Only Absolute Visited Links<br/></label>
  268.  
  269. <label title="Note: since the recent update the most NSFW spoilers are impossible to expand without an account"><input type="checkbox" ${s.expandSpoilers ? "checked" : ""} name="expandSpoilers">Expand Spoilers (if possible)*<br/></label>
  270. </fieldset>
  271. <fieldset>
  272. <legend>Highly Recommended</legend>
  273. <label><input type="checkbox" ${s.directLinks ? "checked" : ""} name="directLinks">Direct Links</label><br/>
  274. <label><input type="checkbox" ${s.handleTitle ? "checked" : ""} name="handleTitle">Enchance Title*<br/></label>
  275. </fieldset>
  276. <fieldset ${isFirefox ? '': 'style="display: none"'}>
  277. <legend>Firefox only</legend>
  278. <label title='${downloadProgressFFTitle}'><input type="radio" ${s.downloadProgress ? "checked" : ""} name="firefoxDownloadProgress" value="downloadProgress">Download Progress<br/></label>
  279. <label title='${strictTrackingProtectionFixFFTitle}'><input type="radio" ${s.strictTrackingProtectionFix ? "checked" : ""} name="firefoxDownloadProgress" value="strictTrackingProtectionFix">Strict Tracking Protection Fix<br/></label>
  280. </fieldset>
  281. <fieldset>
  282. <legend>Main</legend>
  283. <label><input type="checkbox" ${s.imagesHandler ? "checked" : ""} name="imagesHandler">Image Download Button<br/></label>
  284. <label><input type="checkbox" ${s.videoHandler ? "checked" : ""} name="videoHandler">Video Download Button<br/></label>
  285. <label hidden><input type="checkbox" ${s.addRequiredCSS ? "checked" : ""} name="addRequiredCSS">Add Required CSS*<br/></label><!-- * Only for the image download button in /photo/1 mode -->
  286. </fieldset>
  287. <fieldset>
  288. <legend title="Outdated due to Twitter's updates, or impossible to reimplement">Outdated</legend>
  289. <strike>
  290.  
  291. <label><input type="checkbox" ${s.hideSignUpSection ? "checked" : ""} name="hideSignUpSection">Hide <b title='"New to Twitter?" (If yoy are not logged in)'>Sign Up</b> section (in the right column)*<br/></label>
  292. <label title="Hides the modal login pop up. Useful if you have no account. \nWARNING: Currently it will close any popup, not only the login one.\nIt's recommended to use only if you do not have an account to hide the annoiyng login popup."><input type="checkbox" ${s.hideLoginPopup ? "checked" : ""} name="hideLoginPopup">Hide <strike>Login</strike> Popups. (beta)<br/></label>
  293.  
  294. </strike>
  295. </fieldset>
  296. <hr>
  297. <div style="display: flex; justify-content: space-around;">
  298. <div>
  299. History:
  300. <button class="ujs-reload-export-button" style="padding: 5px" >Export</button>
  301. <button class="ujs-reload-import-button" style="padding: 5px" >Import</button>
  302. <button class="ujs-reload-merge-button" style="padding: 5px" >Merge</button>
  303. </div>
  304. <div>
  305. <button class="ujs-reload-setting-button" style="padding: 5px" title="Reload the web page to apply changes">Reload page</button>
  306. <button class="ujs-close-setting-button" style="padding: 5px" title="Just close this popup.\nNote: You need to reload the web page to apply changes.">Close popup</button>
  307. </div>
  308. </div>
  309. <hr>
  310. <h4 style="margin: 0; padding-left: 8px; color: #444;">Notes:</h4>
  311. <ul style="margin: 2px; padding-left: 16px; color: #444;">
  312. <li>Click on <b>Save Settings</b> and <b>reload the page</b> to apply changes.</li>
  313. <li><b>*</b>-marked settings are language dependent. Currently, the follow languages are supported:<br/> "en", "ru", "es", "zh", "ja".</li>
  314. <li hidden>The extension downloads only from twitter.com, not from <b>mobile</b>.twitter.com</li>
  315. </ul>
  316. </div>
  317. </div>`);
  318.  
  319. async function onDone(button) {
  320. button.classList.remove("ujs-btn-error");
  321. button.classList.add("ujs-btn-done");
  322. await sleep(900);
  323. button.classList.remove("ujs-btn-done");
  324. }
  325. async function onError(button, err) {
  326. button.classList.remove("ujs-btn-done");
  327. button.classList.add("ujs-btn-error");
  328. button.title = err.message;
  329. await sleep(1800);
  330. button.classList.remove("ujs-btn-error");
  331. }
  332.  
  333. const exportButton = document.querySelector("body > .ujs-modal-wrapper .ujs-reload-export-button");
  334. const importButton = document.querySelector("body > .ujs-modal-wrapper .ujs-reload-import-button");
  335. const mergeButton = document.querySelector("body > .ujs-modal-wrapper .ujs-reload-merge-button");
  336.  
  337. exportButton.addEventListener("click", (event) => {
  338. const button = event.currentTarget;
  339. historyHelper.exportHistory(() => onDone(button));
  340. });
  341. sleep(50).then(() => {
  342. const infoObj = getStoreInfo();
  343. exportButton.title = Object.entries(infoObj).reduce((acc, [key, value]) => {
  344. acc += `${key}: ${value}\n`;
  345. return acc;
  346. }, "");
  347. });
  348.  
  349. importButton.addEventListener("click", (event) => {
  350. const button = event.currentTarget;
  351. historyHelper.importHistory(
  352. () => onDone(button),
  353. (err) => onError(button, err)
  354. );
  355. });
  356. mergeButton.addEventListener("click", (event) => {
  357. const button = event.currentTarget;
  358. historyHelper.mergeHistory(
  359. () => onDone(button),
  360. (err) => onError(button, err)
  361. );
  362. });
  363.  
  364. document.querySelector("body > .ujs-modal-wrapper .ujs-reload-setting-button").addEventListener("click", () => {
  365. location.reload();
  366. });
  367.  
  368. const checkboxList = document.querySelectorAll("body > .ujs-modal-wrapper input[type=checkbox], body > .ujs-modal-wrapper input[type=radio]");
  369. checkboxList.forEach(checkbox => {
  370. checkbox.addEventListener("change", saveSetting);
  371. });
  372.  
  373. document.querySelector("body > .ujs-modal-wrapper .ujs-close-setting-button").addEventListener("click", closeSetting);
  374.  
  375. function saveSetting() {
  376. const entries = [...document.querySelectorAll("body > .ujs-modal-wrapper input[type=checkbox]")]
  377. .map(checkbox => [checkbox.name, checkbox.checked]);
  378. const radioEntries = [...document.querySelectorAll("body > .ujs-modal-wrapper input[type=radio]")]
  379. .map(checkbox => [checkbox.value, checkbox.checked])
  380. const settings = Object.fromEntries([entries, radioEntries].flat());
  381. // verbose && console.log("[ujs][save-settings]", settings);
  382. localStorage.setItem(StorageNames.settings, JSON.stringify(settings));
  383. }
  384.  
  385. function closeSetting() {
  386. document.body.classList.remove("ujs-no-scroll");
  387. document.body.classList.remove("ujs-scrollbar-width-margin-right");
  388. document.querySelector("html").classList.remove("ujs-scroll-initial");
  389. document.querySelector("body > .ujs-modal-wrapper")?.remove();
  390. }
  391.  
  392.  
  393. }
  394.  
  395. // ---------------------------------------------------------------------------------------------------------------------
  396. // ---------------------------------------------------------------------------------------------------------------------
  397. // --- Twitter Specific code --- //
  398.  
  399. const downloadedImages = new LS(StorageNames.downloadedImageNames);
  400. const downloadedImageTweetIds = new LS(StorageNames.downloadedImageTweetIds);
  401. const downloadedVideoTweetIds = new LS(StorageNames.downloadedVideoTweetIds);
  402.  
  403. // --- That to use for the image history --- //
  404. /** @type {"TWEET_ID" | "IMAGE_NAME"} */
  405. const imagesHistoryBy = LS.getItem(StorageNames.settingsImageHistoryBy, "IMAGE_NAME"); // Hidden settings
  406. // With "TWEET_ID" downloading of 1 image of 4 will mark all 4 images as "already downloaded"
  407. // on the next time when the tweet will appear.
  408. // "IMAGE_NAME" will count each image of a tweet, but it will take more data to store.
  409.  
  410.  
  411. // ---------------------------------------------------------------------------------------------------------------------
  412. // --- Twitter.Features --- //
  413. function hoistFeatures() {
  414. class Features {
  415. static goFromMobileToMainSite() {
  416. if (location.href.startsWith("https://mobile.twitter.com/")) {
  417. location.href = location.href.replace("https://mobile.twitter.com/", "https://twitter.com/");
  418. }
  419. // TODO: add #redirected, remove by timer // to prevent a potential infinity loop
  420. }
  421.  
  422. static createButton({url, downloaded, isVideo}) {
  423. const btn = document.createElement("div");
  424. btn.innerHTML = `
  425. <div class="ujs-btn-common ujs-btn-background"></div>
  426. <div class="ujs-btn-common ujs-hover"></div>
  427. <div class="ujs-btn-common ujs-shadow"></div>
  428. <div class="ujs-btn-common ujs-progress" style="--progress: 0%"></div>
  429. <div class="ujs-btn-common ujs-btn-error-text"></div>`.slice(1);
  430. btn.classList.add("ujs-btn-download");
  431. if (!downloaded) {
  432. btn.classList.add("ujs-not-downloaded");
  433. } else {
  434. btn.classList.add("ujs-already-downloaded");
  435. }
  436. if (isVideo) {
  437. btn.classList.add("ujs-video");
  438. }
  439. if (url) {
  440. btn.dataset.url = url;
  441. }
  442. return btn;
  443. }
  444.  
  445.  
  446. // Banner/Background
  447. static async _downloadBanner(url, btn) {
  448. const username = location.pathname.slice(1).split("/")[0];
  449.  
  450. btn.classList.add("ujs-downloading");
  451.  
  452. // https://pbs.twimg.com/profile_banners/34743251/1596331248/1500x500
  453. const {
  454. id, seconds, res
  455. } = url.match(/(?<=\/profile_banners\/)(?<id>\d+)\/(?<seconds>\d+)\/(?<res>\d+x\d+)/)?.groups || {};
  456.  
  457. const {blob, lastModifiedDate, extension, name} = await fetchResource(url);
  458.  
  459. Features.verifyBlob(blob, url, btn);
  460.  
  461. const filename = `[twitter][bg] ${username}—${lastModifiedDate}—${id}—${seconds}.${extension}`;
  462. downloadBlob(blob, filename, url);
  463.  
  464. btn.classList.remove("ujs-downloading");
  465. btn.classList.add("ujs-downloaded");
  466. }
  467.  
  468. static _ImageHistory = class {
  469. static getImageNameFromUrl(url) {
  470. const _url = new URL(url);
  471. const {filename} = (_url.origin + _url.pathname).match(/(?<filename>[^\/]+$)/).groups;
  472. return filename.match(/^[^.]+/)[0]; // remove extension
  473. }
  474. static isDownloaded({id, url}) {
  475. if (imagesHistoryBy === "TWEET_ID") {
  476. return downloadedImageTweetIds.hasItem(id);
  477. } else if (imagesHistoryBy === "IMAGE_NAME") {
  478. const name = Features._ImageHistory.getImageNameFromUrl(url);
  479. return downloadedImages.hasItem(name);
  480. }
  481. }
  482. static async markDownloaded({id, url}) {
  483. if (imagesHistoryBy === "TWEET_ID") {
  484. await downloadedImageTweetIds.pushItem(id);
  485. } else if (imagesHistoryBy === "IMAGE_NAME") {
  486. const name = Features._ImageHistory.getImageNameFromUrl(url);
  487. await downloadedImages.pushItem(name);
  488. }
  489. }
  490. }
  491. static async imagesHandler() {
  492. verbose && console.log("[ujs][imagesHandler]");
  493. const images = document.querySelectorAll("img");
  494. for (const img of images) {
  495.  
  496. if (img.width < 150 || img.dataset.handled) {
  497. continue;
  498. }
  499. verbose && console.log("[ujs][imagesHandler]", {img, img_width: img.width});
  500.  
  501. img.dataset.handled = "true";
  502.  
  503. const btn = Features.createButton({url: img.src});
  504. btn.addEventListener("click", Features._imageClickHandler);
  505.  
  506. let anchor = img.closest("a");
  507. // if an image is _opened_ "https://twitter.com/UserName/status/1234567890123456789/photo/1" [fake-url]
  508. if (!anchor) {
  509. anchor = img.parentNode;
  510. }
  511. anchor.append(btn);
  512.  
  513. const downloaded = Features._ImageHistory.isDownloaded({
  514. id: Tweet.of(btn).id,
  515. url: btn.dataset.url
  516. });
  517. if (downloaded) {
  518. btn.classList.add("ujs-already-downloaded");
  519. }
  520. }
  521. }
  522. static async _imageClickHandler(event) {
  523. event.preventDefault();
  524. event.stopImmediatePropagation();
  525.  
  526. const btn = event.currentTarget;
  527. const btnErrorTextElem = btn.querySelector(".ujs-btn-error-text");
  528. let url = btn.dataset.url;
  529.  
  530. const isBanner = url.includes("/profile_banners/");
  531. if (isBanner) {
  532. return Features._downloadBanner(url, btn);
  533. }
  534.  
  535. const {id, author} = Tweet.of(btn);
  536. verbose && console.log("[ujs][_imageClickHandler]", {id, author});
  537.  
  538. const btnProgress = btn.querySelector(".ujs-progress");
  539. if (btn.textContent !== "") {
  540. btnErrorTextElem.textContent = "";
  541. }
  542. btn.classList.remove("ujs-error");
  543. btn.classList.add("ujs-downloading");
  544.  
  545. let onProgress = null;
  546. if (settings.downloadProgress) {
  547. onProgress = ({loaded, total}) => btnProgress.style.cssText = "--progress: " + loaded / total * 90 + "%";
  548. }
  549.  
  550. const originals = ["orig", "4096x4096"];
  551. const samples = ["large", "medium", "900x900", "small", "360x360", /*"240x240", "120x120", "tiny"*/];
  552. let isSample = false;
  553. const previewSize = new URL(url).searchParams.get("name");
  554. if (!samples.includes(previewSize)) {
  555. samples.push(previewSize);
  556. }
  557.  
  558. function handleImgUrl(url) {
  559. const urlObj = new URL(url);
  560. if (originals.length) {
  561. urlObj.searchParams.set("name", originals.shift());
  562. } else if (samples.length) {
  563. isSample = true;
  564. urlObj.searchParams.set("name", samples.shift());
  565. } else {
  566. throw new Error("All fallback URLs are failed to download.");
  567. }
  568. url = urlObj.toString();
  569. verbose && console.log("[ujs][handleImgUrl][url]", url);
  570. return url;
  571. }
  572.  
  573. async function safeFetchResource(url) {
  574. while (true) {
  575. url = handleImgUrl(url);
  576. try {
  577. return await fetchResource(url, onProgress);
  578. } catch (err) {
  579. if (!originals.length) {
  580. btn.classList.add("ujs-error");
  581. btnErrorTextElem.textContent = "";
  582. // Add ⚠
  583. btnErrorTextElem.style = `background-image: url("https://abs-0.twimg.com/emoji/v2/svg/26a0.svg"); background-size: 1.5em; background-position: center; background-repeat: no-repeat;`;
  584. btn.title = "[warning] Original images are not available.";
  585. }
  586.  
  587. const ffAutoAllocateChunkSizeBug = err.message.includes("autoAllocateChunkSize"); // https://bugzilla.mozilla.org/show_bug.cgi?id=1757836
  588. if (!samples.length || ffAutoAllocateChunkSizeBug) {
  589. btn.classList.add("ujs-error");
  590. btnErrorTextElem.textContent = "";
  591. // Add ❌
  592. btnErrorTextElem.style = `background-image: url("https://abs-0.twimg.com/emoji/v2/svg/274c.svg"); background-size: 1.5em; background-position: center; background-repeat: no-repeat;`;
  593.  
  594. const ffHint = isFirefox && !settings.strictTrackingProtectionFix && ffAutoAllocateChunkSizeBug ? "\nTry to enable 'Strict Tracking Protection Fix' in the userscript settings." : "";
  595. btn.title = "Failed to download the image." + ffHint;
  596. throw new Error("[error] Fallback URLs are failed.");
  597. }
  598. }
  599. }
  600. }
  601.  
  602. const {blob, lastModifiedDate, extension, name} = await safeFetchResource(url);
  603.  
  604. Features.verifyBlob(blob, url, btn);
  605.  
  606. btnProgress.style.cssText = "--progress: 100%";
  607.  
  608. const sampleText = !isSample ? "" : "[sample]";
  609. const filename = `[twitter]${sampleText} ${author}—${lastModifiedDate}—${id}—${name}.${extension}`;
  610. downloadBlob(blob, filename, url);
  611.  
  612. const downloaded = btn.classList.contains("ujs-already-downloaded") || btn.classList.contains("ujs-downloaded");
  613. if (!downloaded && !isSample) {
  614. await Features._ImageHistory.markDownloaded({id, url});
  615. }
  616. btn.classList.remove("ujs-downloading");
  617. btn.classList.add("ujs-downloaded");
  618.  
  619. await sleep(40);
  620. btnProgress.style.cssText = "--progress: 0%";
  621. }
  622.  
  623. static tweetVidWeakMap = new WeakMap();
  624. static async videoHandler() {
  625. const videos = document.querySelectorAll("video");
  626.  
  627. for (const vid of videos) {
  628. if (vid.dataset.handled) {
  629. continue;
  630. }
  631. verbose && console.log("[ujs][videoHandler][vid]", vid);
  632. vid.dataset.handled = "true";
  633.  
  634. const poster = vid.getAttribute("poster");
  635.  
  636. const btn = Features.createButton({isVideo: true, url: poster});
  637. btn.addEventListener("click", Features._videoClickHandler);
  638.  
  639. let elem = vid.parentNode.parentNode.parentNode;
  640. elem.after(btn);
  641.  
  642. const tweet = Tweet.of(btn);
  643. const id = tweet.id;
  644. const tweetElem = tweet.elem;
  645. let vidNumber = 0;
  646.  
  647. const map = Features.tweetVidWeakMap;
  648. if (map.has(tweetElem)) {
  649. vidNumber = map.get(tweetElem) + 1;
  650. map.set(tweetElem, vidNumber);
  651. } else {
  652. map.set(tweetElem, vidNumber);
  653. }
  654.  
  655. const historyId = vidNumber ? id + "-" + vidNumber : id;
  656.  
  657. const downloaded = downloadedVideoTweetIds.hasItem(historyId);
  658. if (downloaded) {
  659. btn.classList.add("ujs-already-downloaded");
  660. }
  661. }
  662. }
  663. static async _videoClickHandler(event) {
  664. event.preventDefault();
  665. event.stopImmediatePropagation();
  666.  
  667. const btn = event.currentTarget;
  668. const btnErrorTextElem = btn.querySelector(".ujs-btn-error-text");
  669. let {id, author} = Tweet.of(btn);
  670.  
  671. if (btn.textContent !== "") {
  672. btnErrorTextElem.textContent = "";
  673. }
  674. btn.classList.remove("ujs-error");
  675. btn.classList.add("ujs-downloading");
  676.  
  677. const posterUrl = btn.dataset.url;
  678.  
  679. let video; // {bitrate, content_type, url}
  680. let vidNumber = 0;
  681. let videoTweetId = id;
  682. try {
  683. ({video, tweetId: videoTweetId, screenName: author, vidNumber} = await API.getVideoInfo(id, author, posterUrl));
  684. verbose && console.log("[ujs][videoHandler][video]", video);
  685. } catch (err) {
  686. btn.classList.add("ujs-error");
  687. btnErrorTextElem.textContent = "Error";
  688. btn.title = "API.getVideoInfo Error";
  689. throw new Error("API.getVideoInfo Error");
  690. }
  691.  
  692. const btnProgress = btn.querySelector(".ujs-progress");
  693.  
  694. const url = video.url;
  695. let onProgress = null;
  696. if (settings.downloadProgress) {
  697. onProgress = ({loaded, total}) => btnProgress.style.cssText = "--progress: " + loaded / total * 90 + "%";
  698. }
  699.  
  700. const {blob, lastModifiedDate, extension, name} = await fetchResource(url, onProgress);
  701.  
  702. btnProgress.style.cssText = "--progress: 100%";
  703.  
  704. Features.verifyBlob(blob, url, btn);
  705.  
  706. const filename = `[twitter] ${author}—${lastModifiedDate}—${videoTweetId}—${name}.${extension}`;
  707. downloadBlob(blob, filename, url);
  708.  
  709. const downloaded = btn.classList.contains("ujs-already-downloaded");
  710. const historyId = vidNumber ? videoTweetId + "-" + vidNumber : videoTweetId;
  711. if (!downloaded) {
  712. await downloadedVideoTweetIds.pushItem(historyId);
  713. if (videoTweetId !== id) { // if QRT
  714. const historyId = vidNumber ? id + "-" + vidNumber : id;
  715. await downloadedVideoTweetIds.pushItem(historyId);
  716. }
  717. }
  718. btn.classList.remove("ujs-downloading");
  719. btn.classList.add("ujs-downloaded");
  720.  
  721. await sleep(40);
  722. btnProgress.style.cssText = "--progress: 0%";
  723. }
  724.  
  725. static verifyBlob(blob, url, btn) {
  726. if (!blob.size) {
  727. btn.classList.add("ujs-error");
  728. btn.querySelector(".ujs-btn-error-text").textContent = "Error";
  729. btn.title = "Download Error";
  730. throw new Error("Zero size blob: " + url);
  731. }
  732. }
  733.  
  734. static addRequiredCSS() {
  735. const code = getUserScriptCSS();
  736. addCSS(code);
  737. }
  738.  
  739. // it depends of `directLinks()` use only it after `directLinks()`
  740. static handleTitle(title) {
  741.  
  742. if (!I18N.QUOTES) { // Unsupported lang, no QUOTES, ON_TWITTER, TWITTER constants
  743. return;
  744. }
  745.  
  746. // if not an opened tweet
  747. if (!location.href.match(/twitter\.com\/[^\/]+\/status\/\d+/)) {
  748. return;
  749. }
  750.  
  751. let titleText = title || document.title;
  752. if (titleText === Features.lastHandledTitle) {
  753. return;
  754. }
  755. Features.originalTitle = titleText;
  756.  
  757. const [OPEN_QUOTE, CLOSE_QUOTE] = I18N.QUOTES;
  758. const urlsToReplace = [
  759. ...titleText.matchAll(new RegExp(`https:\\/\\/t\\.co\\/[^ ${CLOSE_QUOTE}]+`, "g"))
  760. ].map(el => el[0]);
  761. // the last one may be the URL to the tweet // or to an embedded shared URL
  762.  
  763. const map = new Map();
  764. const anchors = document.querySelectorAll(`a[data-redirect^="https://t.co/"]`);
  765. for (const anchor of anchors) {
  766. if (urlsToReplace.includes(anchor.dataset.redirect)) {
  767. map.set(anchor.dataset.redirect, anchor.href);
  768. }
  769. }
  770.  
  771. const lastUrl = urlsToReplace.slice(-1)[0];
  772. let lastUrlIsAttachment = false;
  773. let attachmentDescription = "";
  774. if (!map.has(lastUrl)) {
  775. const a = document.querySelector(`a[href="${lastUrl}?amp=1"]`);
  776. if (a) {
  777. lastUrlIsAttachment = true;
  778. attachmentDescription = document.querySelectorAll(`a[href="${lastUrl}?amp=1"]`)[1].innerText;
  779. attachmentDescription = attachmentDescription.replaceAll("\n", " — ");
  780. }
  781. }
  782.  
  783. for (const [key, value] of map.entries()) {
  784. titleText = titleText.replaceAll(key, value + ` (${key})`);
  785. }
  786.  
  787. titleText = titleText.replace(new RegExp(`${I18N.ON_TWITTER}(?= ${OPEN_QUOTE})`), ":");
  788. titleText = titleText.replace(new RegExp(`(?<=${CLOSE_QUOTE}) \\\/ ${I18N.TWITTER}$`), "");
  789. if (!lastUrlIsAttachment) {
  790. const regExp = new RegExp(`(?<short> https:\\/\\/t\\.co\\/.{6,14})${CLOSE_QUOTE}$`);
  791. titleText = titleText.replace(regExp, (match, p1, p2, offset, string) => `${CLOSE_QUOTE} ${p1}`);
  792. } else {
  793. titleText = titleText.replace(lastUrl, `${lastUrl} (${attachmentDescription})`);
  794. }
  795. document.title = titleText; // Note: some characters will be removed automatically (`\n`, extra spaces)
  796. Features.lastHandledTitle = document.title;
  797. }
  798. static lastHandledTitle = "";
  799. static originalTitle = "";
  800.  
  801. static profileUrlCache = new Map();
  802. static async directLinks() {
  803. verbose && console.log("[ujs][directLinks]");
  804. const hasHttp = url => Boolean(url.match(/^https?:\/\//));
  805. const anchors = xpathAll(`.//a[@dir="ltr" and child::span and not(@data-handled)]`);
  806. for (const anchor of anchors) {
  807. const redirectUrl = new URL(anchor.href);
  808. const shortUrl = redirectUrl.origin + redirectUrl.pathname; // remove "?amp=1"
  809.  
  810. const hrefAttr = anchor.getAttribute("href");
  811. if (hrefAttr.startsWith("/")) {
  812. anchor.dataset.handled = "true";
  813. return;
  814. }
  815.  
  816. verbose && console.log("[ujs][directLinks]", {hrefAttr, redirectUrl_href: redirectUrl.href, shortUrl});
  817.  
  818. anchor.dataset.redirect = shortUrl;
  819. anchor.dataset.handled = "true";
  820. anchor.rel = "nofollow noopener noreferrer";
  821.  
  822. if (Features.profileUrlCache.has(shortUrl)) {
  823. anchor.href = Features.profileUrlCache.get(shortUrl);
  824. continue;
  825. }
  826.  
  827. const nodes = xpathAll(`./span[text() != "…"]|./text()`, anchor);
  828. let url = nodes.map(node => node.textContent).join("");
  829.  
  830. const doubleProtocolPrefix = url.match(/(?<dup>^https?:\/\/)(?=https?:)/)?.groups.dup;
  831. if (doubleProtocolPrefix) {
  832. url = url.slice(doubleProtocolPrefix.length);
  833. const span = anchor.querySelector(`[aria-hidden="true"]`);
  834. if (hasHttp(span.textContent)) { // Fix Twitter's bug related to text copying
  835. span.style = "display: none;";
  836. }
  837. }
  838.  
  839. anchor.href = url;
  840.  
  841. if (anchor.dataset?.testid === "UserUrl") {
  842. const href = anchor.getAttribute("href");
  843. const profileUrl = hasHttp(href) ? href : "https://" + href;
  844. anchor.href = profileUrl;
  845. verbose && console.log("[ujs][directLinks][profileUrl]", profileUrl);
  846.  
  847. // Restore if URL's text content is too long
  848. if (anchor.textContent.endsWith("…")) {
  849. anchor.href = shortUrl;
  850.  
  851. try {
  852. const author = location.pathname.slice(1).match(/[^\/]+/)[0];
  853. const expanded_url = await API.getUserInfo(author); // todo: make lazy
  854. anchor.href = expanded_url;
  855. Features.profileUrlCache.set(shortUrl, expanded_url);
  856. } catch (err) {
  857. verbose && console.error("[ujs]", err);
  858. }
  859. }
  860. }
  861. }
  862. if (anchors.length) {
  863. Features.handleTitle(Features.originalTitle);
  864. }
  865. }
  866.  
  867. // Do NOT throttle it
  868. static expandSpoilers() {
  869. const main = document.querySelector("main[role=main]");
  870. if (!main) {
  871. return;
  872. }
  873.  
  874. if (!I18N.YES_VIEW_PROFILE) { // Unsupported lang, no YES_VIEW_PROFILE, SHOW_NUDITY, VIEW constants
  875. return;
  876. }
  877.  
  878. const a = main.querySelectorAll("[data-testid=primaryColumn] [role=button]");
  879. if (a) {
  880. const elems = [...a];
  881. const button = elems.find(el => el.textContent === I18N.YES_VIEW_PROFILE);
  882. if (button) {
  883. button.click();
  884. }
  885.  
  886. // "Content warning: Nudity"
  887. // "The Tweet author flagged this Tweet as showing sensitive content."
  888. // "Show"
  889. const buttonShow = elems.find(el => el.textContent === I18N.SHOW_NUDITY);
  890. if (buttonShow) {
  891. // const verifying = a.previousSibling.textContent.includes("Nudity"); // todo?
  892. // if (verifying) {
  893. buttonShow.click();
  894. // }
  895. }
  896. }
  897.  
  898. // todo: expand spoiler commentary in photo view mode (.../photo/1)
  899. const b = main.querySelectorAll("article [role=presentation] div[role=button]");
  900. if (b) {
  901. const elems = [...b];
  902. const buttons = elems.filter(el => el.textContent === I18N.VIEW);
  903. if (buttons.length) {
  904. buttons.forEach(el => el.click());
  905. }
  906. }
  907. }
  908.  
  909. static hideSignUpSection() { // "New to Twitter?"
  910. if (!I18N.SIGNUP) {// Unsupported lang, no SIGNUP constant
  911. return;
  912. }
  913. const elem = document.querySelector(`section[aria-label="${I18N.SIGNUP}"][role=region]`);
  914. if (elem) {
  915. elem.parentNode.classList.add("ujs-hidden");
  916. }
  917. }
  918.  
  919. // Call it once.
  920. // "Don’t miss what’s happening" if you are not logged in.
  921. // It looks that `#layers` is used only for this bar.
  922. static hideSignUpBottomBarAndMessages(doNotPlayVideosAutomatically) {
  923. if (doNotPlayVideosAutomatically) {
  924. addCSS(`
  925. #layers > div:nth-child(1) {
  926. display: none;
  927. }
  928. `);
  929. } else {
  930. addCSS(`
  931. #layers > div:nth-child(1) {
  932. height: 1px;
  933. opacity: 0;
  934. }
  935. `);
  936. }
  937. }
  938.  
  939. // "Trends for you"
  940. static hideTrends() {
  941. if (!I18N.TRENDS) { // Unsupported lang, no TRENDS constant
  942. return;
  943. }
  944. addCSS(`
  945. [aria-label="${I18N.TRENDS}"]
  946. {
  947. display: none;
  948. }
  949. `);
  950. }
  951.  
  952. static highlightVisitedLinks() {
  953. if (settings.highlightOnlySpecialVisitedLinks) {
  954. addCSS(`
  955. a[href^="http"]:visited {
  956. color: darkorange;
  957. }
  958. `);
  959. return;
  960. }
  961. addCSS(`
  962. a:visited {
  963. color: darkorange;
  964. }
  965. `);
  966. }
  967.  
  968. // todo split to two methods
  969. // todo fix it, currently it works questionably
  970. // not tested with non eng languages
  971. static footerHandled = false;
  972. static hideAndMoveFooter() { // "Terms of Service Privacy Policy Cookie Policy"
  973. let footer = document.querySelector(`main[role=main] nav[aria-label=${I18N.FOOTER}][role=navigation]`);
  974. const nav = document.querySelector("nav[aria-label=Primary][role=navigation]"); // I18N."Primary" [?]
  975.  
  976. if (footer) {
  977. footer = footer.parentNode;
  978. const separatorLine = footer.previousSibling;
  979.  
  980. if (Features.footerHandled) {
  981. footer.remove();
  982. separatorLine.remove();
  983. return;
  984. }
  985.  
  986. nav.append(separatorLine);
  987. nav.append(footer);
  988. footer.classList.add("ujs-show-on-hover");
  989. separatorLine.classList.add("ujs-show-on-hover");
  990.  
  991. Features.footerHandled = true;
  992. }
  993. }
  994.  
  995. static hideLoginPopup() { // When you are not logged in
  996. const targetNode = document.querySelector("html");
  997. const observerOptions = {
  998. attributes: true,
  999. };
  1000. const observer = new MutationObserver(callback);
  1001. observer.observe(targetNode, observerOptions);
  1002.  
  1003. function callback(mutationList, observer) {
  1004. const html = document.querySelector("html");
  1005. verbose && console.log("[ujs][hideLoginPopup][mutationList]", mutationList);
  1006. // overflow-y: scroll; overscroll-behavior-y: none; font-size: 15px; // default
  1007. // overflow: hidden; overscroll-behavior-y: none; font-size: 15px; margin-right: 15px; // popup
  1008. if (html.style["overflow"] === "hidden") {
  1009. html.style["overflow"] = "";
  1010. html.style["overflow-y"] = "scroll";
  1011. html.style["margin-right"] = "";
  1012. }
  1013. const popup = document.querySelector(`#layers div[data-testid="sheetDialog"]`);
  1014. if (popup) {
  1015. popup.closest(`div[role="dialog"]`).remove();
  1016. verbose && (document.title = "⚒" + document.title);
  1017. // observer.disconnect();
  1018. }
  1019. }
  1020. }
  1021.  
  1022. }
  1023.  
  1024. return Features;
  1025. }
  1026.  
  1027. function getStoreInfo() {
  1028. const resultObj = {
  1029. total: 0
  1030. };
  1031. for (const [name, lsKey] of Object.entries(StorageNames)) {
  1032. const valueStr = localStorage.getItem(lsKey);
  1033. if (valueStr) {
  1034. try {
  1035. const value = JSON.parse(valueStr);
  1036. if (Array.isArray(value)) {
  1037. const size = new Set(value).size;
  1038. resultObj[name] = size;
  1039. resultObj.total += size;
  1040. }
  1041. } catch (err) {
  1042. // ...
  1043. }
  1044. }
  1045. }
  1046. return resultObj;
  1047. }
  1048.  
  1049. // --- Twitter.RequiredCSS --- //
  1050. function getUserScriptCSS() {
  1051. const labelText = I18N.IMAGE || "Image";
  1052.  
  1053. // By default, the scroll is showed all time, since <html style="overflow-y: scroll;>,
  1054. // so it works — no need to use `getScrollbarWidth` function from SO (13382516).
  1055. const scrollbarWidth = window.innerWidth - document.body.offsetWidth;
  1056.  
  1057. const css = `
  1058. .ujs-hidden {
  1059. display: none;
  1060. }
  1061. .ujs-no-scroll {
  1062. overflow-y: hidden;
  1063. }
  1064. .ujs-scroll-initial {
  1065. overflow-y: initial!important;
  1066. }
  1067. .ujs-scrollbar-width-margin-right {
  1068. margin-right: ${scrollbarWidth}px;
  1069. }
  1070.  
  1071. .ujs-show-on-hover:hover {
  1072. opacity: 1;
  1073. transition: opacity 1s ease-out 0.1s;
  1074. }
  1075. .ujs-show-on-hover {
  1076. opacity: 0;
  1077. transition: opacity 0.5s ease-out;
  1078. }
  1079.  
  1080. :root {
  1081. --ujs-shadow-1: linear-gradient(to top, rgba(0,0,0,0.15), rgba(0,0,0,0.05));
  1082. --ujs-shadow-2: linear-gradient(to top, rgba(0,0,0,0.25), rgba(0,0,0,0.05));
  1083. --ujs-shadow-3: linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0.15));
  1084. --ujs-shadow-4: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.25));
  1085. --ujs-red: #e0245e;
  1086. --ujs-blue: #1da1f2;
  1087. --ujs-green: #4caf50;
  1088. --ujs-gray: #c2cbd0;
  1089. --ujs-error: white;
  1090. }
  1091.  
  1092. .ujs-progress {
  1093. background-image: linear-gradient(to right, var(--ujs-green) var(--progress), transparent 0%);
  1094. }
  1095.  
  1096. .ujs-shadow {
  1097. background-image: var(--ujs-shadow-1);
  1098. }
  1099. .ujs-btn-download:hover .ujs-hover {
  1100. background-image: var(--ujs-shadow-2);
  1101. }
  1102. .ujs-btn-download.ujs-downloading .ujs-shadow {
  1103. background-image: var(--ujs-shadow-3);
  1104. }
  1105. .ujs-btn-download:active .ujs-shadow {
  1106. background-image: var(--ujs-shadow-4);
  1107. }
  1108.  
  1109. article[role=article]:hover .ujs-btn-download {
  1110. opacity: 1;
  1111. }
  1112. div[aria-label="${labelText}"]:hover .ujs-btn-download {
  1113. opacity: 1;
  1114. }
  1115. .ujs-btn-download.ujs-downloaded {
  1116. opacity: 1;
  1117. }
  1118. .ujs-btn-download.ujs-downloading {
  1119. opacity: 1;
  1120. }
  1121.  
  1122. .ujs-btn-download {
  1123. cursor: pointer;
  1124. top: 0.5em;
  1125. left: 0.5em;
  1126. position: absolute;
  1127. opacity: 0;
  1128. }
  1129. .ujs-btn-common {
  1130. width: 33px;
  1131. height: 33px;
  1132. border-radius: 0.3em;
  1133. top: 0;
  1134. position: absolute;
  1135. border: 1px solid transparent;
  1136. border-color: var(--ujs-gray);
  1137. ${settings.addBorder ? "border: 2px solid white;" : "border-color: var(--ujs-gray);"}
  1138. }
  1139. .ujs-not-downloaded .ujs-btn-background {
  1140. background: var(--ujs-red);
  1141. }
  1142.  
  1143. .ujs-already-downloaded .ujs-btn-background {
  1144. background: var(--ujs-blue);
  1145. }
  1146.  
  1147. .ujs-btn-done {
  1148. box-shadow: 0 0 6px var(--ujs-green);
  1149. }
  1150. .ujs-btn-error {
  1151. box-shadow: 0 0 6px var(--ujs-red);
  1152. }
  1153.  
  1154. .ujs-downloaded .ujs-btn-background {
  1155. background: var(--ujs-green);
  1156. }
  1157.  
  1158. .ujs-error .ujs-btn-background {
  1159. background: var(--ujs-error);
  1160. }
  1161.  
  1162. .ujs-btn-error-text {
  1163. display: flex;
  1164. align-items: center;
  1165. justify-content: center;
  1166. color: black;
  1167. font-size: 100%;
  1168. }`;
  1169. return css.slice(1);
  1170. }
  1171.  
  1172. /*
  1173. Features depend on:
  1174.  
  1175. addRequiredCSS: IMAGE
  1176.  
  1177. expandSpoilers: YES_VIEW_PROFILE, SHOW_NUDITY, VIEW
  1178. handleTitle: QUOTES, ON_TWITTER, TWITTER
  1179. hideSignUpSection: SIGNUP
  1180. hideTrends: TRENDS
  1181.  
  1182. [unused]
  1183. hideAndMoveFooter: FOOTER
  1184. */
  1185.  
  1186. // --- Twitter.LangConstants --- //
  1187. function getLanguageConstants() { // todo: "de", "fr"
  1188. const defaultQuotes = [`"`, `"`];
  1189.  
  1190. const SUPPORTED_LANGUAGES = ["en", "ru", "es", "zh", "ja", ];
  1191.  
  1192. // texts
  1193. const VIEW = ["View", "Посмотреть", "Ver", "查看", "表示", ];
  1194. const YES_VIEW_PROFILE = ["Yes, view profile", "Да, посмотреть профиль", "Sí, ver perfil", "是,查看个人资料", "プロフィールを表示する", ];
  1195. const SHOW_NUDITY = ["Show", "Показать", "Mostrar", "显示", "表示", ];
  1196.  
  1197. // aria-label texts
  1198. const IMAGE = ["Image", "Изображение", "Imagen", "图像", "画像", ];
  1199. const SIGNUP = ["Sign up", "Зарегистрироваться", "Regístrate", "注册", "アカウント作成", ];
  1200. const TRENDS = ["Timeline: Trending now", "Лента: Актуальные темы", "Cronología: Tendencias del momento", "时间线:当前趋势", "タイムライン: トレンド", ];
  1201. const FOOTER = ["Footer", "Нижний колонтитул", "Pie de página", "页脚", "フッター", ];
  1202.  
  1203. // document.title "{AUTHOR}{ON_TWITTER} {QUOTES[0]}{TEXT}{QUOTES[1]} / {TWITTER}"
  1204. const QUOTES = [defaultQuotes, [`«`, `»`], defaultQuotes, defaultQuotes, [`「`, `」`], ];
  1205. const ON_TWITTER = [" on Twitter:", " в Твиттере:", " en Twitter:", " 在 Twitter:", "さんはTwitterを使っています", ];
  1206. const TWITTER = ["Twitter", "Твиттер", "Twitter", "Twitter", "Twitter", ];
  1207.  
  1208. const lang = document.querySelector("html").getAttribute("lang");
  1209. const langIndex = SUPPORTED_LANGUAGES.indexOf(lang);
  1210.  
  1211. return {
  1212. SUPPORTED_LANGUAGES,
  1213. VIEW: VIEW[langIndex],
  1214. YES_VIEW_PROFILE: YES_VIEW_PROFILE[langIndex],
  1215. SHOW_NUDITY: SHOW_NUDITY[langIndex],
  1216. IMAGE: IMAGE[langIndex],
  1217. SIGNUP: SIGNUP[langIndex],
  1218. TRENDS: TRENDS[langIndex],
  1219. FOOTER: FOOTER[langIndex],
  1220. QUOTES: QUOTES[langIndex],
  1221. ON_TWITTER: ON_TWITTER[langIndex],
  1222. TWITTER: TWITTER[langIndex],
  1223. }
  1224. }
  1225.  
  1226. // --- Twitter.Tweet --- //
  1227. function hoistTweet() {
  1228. class Tweet {
  1229. constructor({elem, url}) {
  1230. if (url) {
  1231. this.elem = null;
  1232. this.url = url;
  1233. } else {
  1234. this.elem = elem;
  1235. this.url = Tweet.getUrl(elem);
  1236. }
  1237. }
  1238.  
  1239. static of(innerElem) {
  1240. // Workaround for media from a quoted tweet
  1241. const url = innerElem.closest(`a[href^="/"]`)?.href;
  1242. if (url && url.includes("/status/")) {
  1243. return new Tweet({url});
  1244. }
  1245.  
  1246. const elem = innerElem.closest(`[data-testid="tweet"]`);
  1247. if (!elem) { // opened image
  1248. verbose && console.log("[ujs][Tweet.of]", "No-tweet elem");
  1249. }
  1250. return new Tweet({elem});
  1251. }
  1252.  
  1253. static getUrl(elem) {
  1254. if (!elem) { // if opened image
  1255. return location.href;
  1256. }
  1257.  
  1258. const tweetAnchor = [...elem.querySelectorAll("a")].find(el => {
  1259. return el.childNodes[0]?.nodeName === "TIME";
  1260. });
  1261.  
  1262. if (tweetAnchor) {
  1263. return tweetAnchor.href;
  1264. }
  1265. // else if selected tweet
  1266. return location.href;
  1267. }
  1268.  
  1269. get author() {
  1270. return this.url.match(/(?<=twitter\.com\/).+?(?=\/)/)?.[0];
  1271. }
  1272.  
  1273. get id() {
  1274. return this.url.match(/(?<=\/status\/)\d+/)?.[0];
  1275. }
  1276. }
  1277.  
  1278. return Tweet;
  1279. }
  1280.  
  1281. // --- Twitter.API --- //
  1282. function hoistAPI() {
  1283. class API {
  1284. static guestToken = getCookie("gt");
  1285. static csrfToken = getCookie("ct0"); // todo: lazy — not available at the first run
  1286. // Guest/Suspended account Bearer token
  1287. static guestAuthorization = "Bearer AAAAAAAAAAAAAAAAAAAAANRILgAAAAAAnNwIzUejRCOuH5E6I8xnZz4puTs%3D1Zv7ttfk8LF81IUq16cHjhLTvJu4FA33AGWWjCpTnA";
  1288.  
  1289. // Seems to be outdated at 2022.05
  1290. static async _requestBearerToken() {
  1291. const scriptSrc = [...document.querySelectorAll("script")]
  1292. .find(el => el.src.match(/https:\/\/abs\.twimg\.com\/responsive-web\/client-web\/main[\w.]*\.js/)).src;
  1293.  
  1294. let text;
  1295. try {
  1296. text = await (await fetch(scriptSrc)).text();
  1297. } catch (err) {
  1298. /* verbose && */ console.error("[ujs][_requestBearerToken][scriptSrc]", scriptSrc);
  1299. /* verbose && */ console.error("[ujs][_requestBearerToken]", err);
  1300. throw err;
  1301. }
  1302.  
  1303. const authorizationKey = text.match(/(?<=")AAAAAAAAAAAAAAAAAAAAANRILgAAAAAAnNwIzUejRCOuH5E6I8xnZz4puTs%3D.+?(?=")/)[0];
  1304. const authorization = `Bearer ${authorizationKey}`;
  1305.  
  1306. return authorization;
  1307. }
  1308.  
  1309. static async getAuthorization() {
  1310. if (!API.authorization) {
  1311. API.authorization = await API._requestBearerToken();
  1312. }
  1313. return API.authorization;
  1314. }
  1315.  
  1316. static requestCache = new Map();
  1317. static vacuumCache() {
  1318. if (API.requestCache.size > 16) {
  1319. API.requestCache.delete(API.requestCache.keys().next().value);
  1320. }
  1321. }
  1322.  
  1323. static async apiRequest(url) {
  1324. const _url = url.toString();
  1325. verbose && console.log("[ujs][apiRequest]", _url);
  1326.  
  1327. if (API.requestCache.has(_url)) {
  1328. verbose && console.log("[ujs][apiRequest] Use cached API request", _url);
  1329. return API.requestCache.get(_url);
  1330. }
  1331.  
  1332. // Hm... it is always the same. Even for a logged user.
  1333. // const authorization = API.guestToken ? API.guestAuthorization : await API.getAuthorization();
  1334. const authorization = API.guestAuthorization;
  1335.  
  1336. // for debug
  1337. verbose && sessionStorage.setItem("guestAuthorization", API.guestAuthorization);
  1338. verbose && sessionStorage.setItem("authorization", API.authorization);
  1339. verbose && sessionStorage.setItem("x-csrf-token", API.csrfToken);
  1340. verbose && sessionStorage.setItem("x-guest-token", API.guestToken);
  1341.  
  1342. const headers = new Headers({
  1343. authorization,
  1344. "x-csrf-token": API.csrfToken,
  1345. "x-twitter-client-language": "en",
  1346. "x-twitter-active-user": "yes"
  1347. });
  1348. if (API.guestToken) {
  1349. headers.append("x-guest-token", API.guestToken);
  1350. } else { // may be skipped
  1351. headers.append("x-twitter-auth-type", "OAuth2Session");
  1352. }
  1353.  
  1354. let json;
  1355. try {
  1356. const response = await fetch(_url, {headers});
  1357. json = await response.json();
  1358. if (response.ok) {
  1359. verbose && console.log("[ujs][apiRequest]", "Cache API request", _url);
  1360. API.vacuumCache();
  1361. API.requestCache.set(_url, json);
  1362. }
  1363. } catch (err) {
  1364. /* verbose && */ console.error("[ujs][apiRequest]", _url);
  1365. /* verbose && */ console.error("[ujs][apiRequest]", err);
  1366. throw err;
  1367. }
  1368.  
  1369. verbose && console.log("[ujs][apiRequest][json]", JSON.stringify(json, null, " "));
  1370. // 429 - [{code: 88, message: "Rate limit exceeded"}] — for suspended accounts
  1371.  
  1372. return json;
  1373. }
  1374.  
  1375. /** @return {video, tweetId, screenName, vidNumber} */
  1376. static async getVideoInfo(tweetId, screenName, posterUrl) {
  1377. const url = API.createVideoEndpointUrl(tweetId);
  1378.  
  1379. const json = await API.apiRequest(url);
  1380. verbose && console.log("[ujs][getVideoInfo]", json, JSON.stringify(json));
  1381.  
  1382. const instruction = json.data.threaded_conversation_with_injections_v2.instructions.find(ins => ins.type === "TimelineAddEntries");
  1383. const tweetEntry = instruction.entries.find(ins => ins.entryId === "tweet-" + tweetId);
  1384. const tweetResult = tweetEntry.content.itemContent.tweet_results.result
  1385. let tweetData = tweetResult.legacy;
  1386.  
  1387. if (!tweetData) { // todo: parse the URL from HTML
  1388. tweetData = tweetResult.tweet.legacy; /* For "Embedded video" */
  1389. }
  1390.  
  1391. const isVideoInQuotedPost = !tweetData.extended_entities || tweetData.extended_entities.media.findIndex(e => e.media_url_https === posterUrl) === -1;
  1392. if (tweetData.quoted_status_id_str && isVideoInQuotedPost) {
  1393. const tweetDataQuoted = tweetResult.quoted_status_result.result.legacy;
  1394. const tweetDataQuotedCore = tweetResult.quoted_status_result.result.core.user_results.result.legacy;
  1395.  
  1396. tweetId = tweetData.quoted_status_id_str;
  1397. screenName = tweetDataQuotedCore.screen_name;
  1398. tweetData = tweetDataQuoted;
  1399. }
  1400.  
  1401. // types: "photo", "video", "animated_gif"
  1402.  
  1403. let vidNumber = tweetData.extended_entities.media
  1404. .filter(e => e.type !== "photo")
  1405. .findIndex(e => e.media_url_https === posterUrl);
  1406.  
  1407. let mediaIndex = tweetData.extended_entities.media
  1408. .findIndex(e => e.media_url_https === posterUrl);
  1409.  
  1410. if (vidNumber === -1 || mediaIndex === -1) {
  1411. verbose && console.warn("[ujs][getVideoInfo][warning]: vidNumber === -1 || mediaIndex === -1");
  1412. vidNumber = 0;
  1413. mediaIndex = 0;
  1414. }
  1415. const videoVariants = tweetData.extended_entities.media[mediaIndex].video_info.variants;
  1416. verbose && console.log("[ujs][getVideoInfo][videoVariants]", videoVariants);
  1417.  
  1418. const video = videoVariants
  1419. .filter(el => el.bitrate !== undefined) // if content_type: "application/x-mpegURL" // .m3u8
  1420. .reduce((acc, cur) => cur.bitrate > acc.bitrate ? cur : acc);
  1421.  
  1422. if (!video) {
  1423. throw new Error("No video URL found");
  1424. }
  1425.  
  1426. return {video, tweetId, screenName, vidNumber};
  1427. }
  1428.  
  1429. // todo: keep `queryId` updated
  1430. static TweetDetailQueryId = "3XDB26fBve-MmjHaWTUZxA"; // TweetDetail (for videos)
  1431. static UserByScreenNameQueryId = "oUZZZ8Oddwxs8Cd3iW3UEA"; // UserByScreenName (for the direct user profile url)
  1432.  
  1433. static createVideoEndpointUrl(tweetId) {
  1434. const variables = {
  1435. "focalTweetId": tweetId,
  1436. "with_rux_injections": false,
  1437. "includePromotedContent": true,
  1438. "withCommunity": true,
  1439. "withQuickPromoteEligibilityTweetFields": true,
  1440. "withBirdwatchNotes": true,
  1441. "withVoice": true,
  1442. "withV2Timeline": true
  1443. };
  1444. const features = {
  1445. "rweb_lists_timeline_redesign_enabled": true,
  1446. "responsive_web_graphql_exclude_directive_enabled": true,
  1447. "verified_phone_label_enabled": false,
  1448. "creator_subscriptions_tweet_preview_api_enabled": true,
  1449. "responsive_web_graphql_timeline_navigation_enabled": true,
  1450. "responsive_web_graphql_skip_user_profile_image_extensions_enabled": false,
  1451. "tweetypie_unmention_optimization_enabled": true,
  1452. "responsive_web_edit_tweet_api_enabled": true,
  1453. "graphql_is_translatable_rweb_tweet_is_translatable_enabled": true,
  1454. "view_counts_everywhere_api_enabled": true,
  1455. "longform_notetweets_consumption_enabled": true,
  1456. "responsive_web_twitter_article_tweet_consumption_enabled": false,
  1457. "tweet_awards_web_tipping_enabled": false,
  1458. "freedom_of_speech_not_reach_fetch_enabled": true,
  1459. "standardized_nudges_misinfo": true,
  1460. "tweet_with_visibility_results_prefer_gql_limited_actions_policy_enabled": true,
  1461. "longform_notetweets_rich_text_read_enabled": true,
  1462. "longform_notetweets_inline_media_enabled": true,
  1463. "responsive_web_media_download_video_enabled": false,
  1464. "responsive_web_enhance_cards_enabled": false
  1465. };
  1466. const fieldToggles = {
  1467. "withArticleRichContentState": false
  1468. };
  1469.  
  1470. const urlBase = `https://twitter.com/i/api/graphql/${API.TweetDetailQueryId}/TweetDetail`;
  1471. const urlObj = new URL(urlBase);
  1472. urlObj.searchParams.set("variables", JSON.stringify(variables));
  1473. urlObj.searchParams.set("features", JSON.stringify(features));
  1474. urlObj.searchParams.set("fieldToggles", JSON.stringify(fieldToggles));
  1475. const url = urlObj.toString();
  1476. return url;
  1477. }
  1478.  
  1479. static async getUserInfo(username) {
  1480. const variables = JSON.stringify({
  1481. "screen_name": username,
  1482. "withSafetyModeUserFields": true,
  1483. "withSuperFollowsUserFields": true
  1484. });
  1485. const url = `https://twitter.com/i/api/graphql/${API.UserByScreenNameQueryId}/UserByScreenName?variables=${encodeURIComponent(variables)}`;
  1486. const json = await API.apiRequest(url);
  1487. verbose && console.log("[ujs][getUserInfo][json]", json);
  1488. return json.data.user.result.legacy.entities.url?.urls[0].expanded_url;
  1489. }
  1490. }
  1491.  
  1492. return API;
  1493. }
  1494.  
  1495. function getHistoryHelper() {
  1496. function migrateLocalStore() {
  1497. // 2023.07.05 // todo: uncomment after two+ months
  1498. // Currently I disable it for cases if some browser's tabs uses the old version of the script.
  1499. // const migrated = localStorage.getItem(StorageNames.migrated);
  1500. // if (migrated === "true") {
  1501. // return;
  1502. // }
  1503.  
  1504. const newToOldNameMap = [
  1505. [StorageNames.settings, StorageNamesOld.settings],
  1506. [StorageNames.settingsImageHistoryBy, StorageNamesOld.settingsImageHistoryBy],
  1507. [StorageNames.downloadedImageNames, StorageNamesOld.downloadedImageNames],
  1508. [StorageNames.downloadedImageTweetIds, StorageNamesOld.downloadedImageTweetIds],
  1509. [StorageNames.downloadedVideoTweetIds, StorageNamesOld.downloadedVideoTweetIds],
  1510. ];
  1511.  
  1512. /**
  1513. * @param {string} newName
  1514. * @param {string} oldName
  1515. * @param {string} value
  1516. */
  1517. function setValue(newName, oldName, value) {
  1518. try {
  1519. localStorage.setItem(newName, value);
  1520. } catch (err) {
  1521. localStorage.removeItem(oldName); // if there is no space ("exceeded the quota")
  1522. localStorage.setItem(newName, value);
  1523. }
  1524. localStorage.removeItem(oldName);
  1525. }
  1526.  
  1527. function mergeOldWithNew({newName, oldName}) {
  1528. const oldValueStr = localStorage.getItem(oldName);
  1529. if (oldValueStr === null) {
  1530. return;
  1531. }
  1532. const newValueStr = localStorage.getItem(newName);
  1533. if (newValueStr === null) {
  1534. setValue(newName, oldName, oldValueStr);
  1535. return;
  1536. }
  1537. try {
  1538. const oldValue = JSON.parse(oldValueStr);
  1539. const newValue = JSON.parse(newValueStr);
  1540. if (Array.isArray(oldValue) && Array.isArray(newValue)) {
  1541. const resultArray = [...new Set([...newValue, ...oldValue])];
  1542. const resultArrayStr = JSON.stringify(resultArray);
  1543. setValue(newName, oldName, resultArrayStr);
  1544. }
  1545. } catch (err) {
  1546. // return;
  1547. }
  1548. }
  1549.  
  1550. for (const [newName, oldName] of newToOldNameMap) {
  1551. mergeOldWithNew({newName, oldName});
  1552. }
  1553. // localStorage.setItem(StorageNames.migrated, "true");
  1554. }
  1555.  
  1556. function exportHistory(onDone) {
  1557. const exportObject = [
  1558. StorageNames.settings,
  1559. StorageNames.settingsImageHistoryBy,
  1560. StorageNames.downloadedImageNames, // only if "settingsImageHistoryBy" === "IMAGE_NAME" (by default)
  1561. StorageNames.downloadedImageTweetIds, // only if "settingsImageHistoryBy" === "TWEET_ID" (need to set manually with DevTools)
  1562. StorageNames.downloadedVideoTweetIds,
  1563. ].reduce((acc, name) => {
  1564. const valueStr = localStorage.getItem(name);
  1565. if (valueStr === null) {
  1566. return acc;
  1567. }
  1568. let value = JSON.parse(valueStr);
  1569. if (Array.isArray(value)) {
  1570. value = [...new Set(value)];
  1571. }
  1572. acc[name] = value;
  1573. return acc;
  1574. }, {});
  1575. const browserName = localStorage.getItem(StorageNames.browserName) || getBrowserName();
  1576. const browserLine = browserName ? "-" + browserName : "";
  1577.  
  1578. downloadBlob(new Blob([toLineJSON(exportObject, true)]), `ujs-twitter-click-n-save-export-${dateToDayDateString(new Date())}${browserLine}.json`);
  1579. onDone();
  1580. }
  1581.  
  1582. function verify(jsonObject) {
  1583. if (Array.isArray(jsonObject)) {
  1584. throw new Error("Wrong object! JSON contains an array.");
  1585. }
  1586. if (Object.keys(jsonObject).some(key => !key.startsWith("ujs-twitter-click-n-save"))) {
  1587. throw new Error("Wrong object! The keys should start with 'ujs-twitter-click-n-save'.");
  1588. }
  1589. }
  1590.  
  1591. function importHistory(onDone, onError) {
  1592. const importInput = document.createElement("input");
  1593. importInput.type = "file";
  1594. importInput.accept = "application/json";
  1595. importInput.style.display = "none";
  1596. document.body.prepend(importInput);
  1597. importInput.addEventListener("change", async _event => {
  1598. let json;
  1599. try {
  1600. json = JSON.parse(await importInput.files[0].text());
  1601. verify(json);
  1602.  
  1603. Object.entries(json).forEach(([key, value]) => {
  1604. if (Array.isArray(value)) {
  1605. value = [...new Set(value)];
  1606. }
  1607. localStorage.setItem(key, JSON.stringify(value));
  1608. });
  1609. onDone();
  1610. } catch (err) {
  1611. onError(err);
  1612. } finally {
  1613. await sleep(1000);
  1614. importInput.remove();
  1615. }
  1616. });
  1617. importInput.click();
  1618. }
  1619.  
  1620. function mergeHistory(onDone, onError) { // Only merges arrays
  1621. const mergeInput = document.createElement("input");
  1622. mergeInput.type = "file";
  1623. mergeInput.accept = "application/json";
  1624. mergeInput.style.display = "none";
  1625. document.body.prepend(mergeInput);
  1626. mergeInput.addEventListener("change", async _event => {
  1627. let json;
  1628. try {
  1629. json = JSON.parse(await mergeInput.files[0].text());
  1630. verify(json);
  1631. Object.entries(json).forEach(([key, value]) => {
  1632. if (!Array.isArray(value)) {
  1633. return;
  1634. }
  1635. const existedValue = JSON.parse(localStorage.getItem(key));
  1636. if (Array.isArray(existedValue)) {
  1637. const resultValue = [...new Set([...existedValue, ...value])];
  1638. localStorage.setItem(key, JSON.stringify(resultValue));
  1639. } else {
  1640. localStorage.setItem(key, JSON.stringify(value));
  1641. }
  1642. });
  1643. onDone();
  1644. } catch (err) {
  1645. onError(err);
  1646. } finally {
  1647. await sleep(1000);
  1648. mergeInput.remove();
  1649. }
  1650. });
  1651. mergeInput.click();
  1652. }
  1653.  
  1654. return {exportHistory, importHistory, mergeHistory, migrateLocalStore};
  1655. }
  1656.  
  1657. // ---------------------------------------------------------------------------------------------------------------------
  1658. // ---------------------------------------------------------------------------------------------------------------------
  1659. // --- Common Utils --- //
  1660.  
  1661. // --- LocalStorage util class --- //
  1662. function hoistLS(settings = {}) {
  1663. const {
  1664. verbose, // debug "messages" in the document.title
  1665. } = settings;
  1666.  
  1667. class LS {
  1668. constructor(name) {
  1669. this.name = name;
  1670. }
  1671. getItem(defaultValue) {
  1672. return LS.getItem(this.name, defaultValue);
  1673. }
  1674. setItem(value) {
  1675. LS.setItem(this.name, value);
  1676. }
  1677. removeItem() {
  1678. LS.removeItem(this.name);
  1679. }
  1680. async pushItem(value) { // array method
  1681. await LS.pushItem(this.name, value);
  1682. }
  1683. async popItem(value) { // array method
  1684. await LS.popItem(this.name, value);
  1685. }
  1686. hasItem(value) { // array method
  1687. return LS.hasItem(this.name, value);
  1688. }
  1689.  
  1690. static getItem(name, defaultValue) {
  1691. const value = localStorage.getItem(name);
  1692. if (value === undefined) {
  1693. return undefined;
  1694. }
  1695. if (value === null) { // when there is no such item
  1696. LS.setItem(name, defaultValue);
  1697. return defaultValue;
  1698. }
  1699. return JSON.parse(value);
  1700. }
  1701. static setItem(name, value) {
  1702. localStorage.setItem(name, JSON.stringify(value));
  1703. }
  1704. static removeItem(name) {
  1705. localStorage.removeItem(name);
  1706. }
  1707. static async pushItem(name, value) {
  1708. const array = LS.getItem(name, []);
  1709. array.push(value);
  1710. LS.setItem(name, array);
  1711.  
  1712. //sanity check
  1713. await sleep(50);
  1714. if (!LS.hasItem(name, value)) {
  1715. if (verbose) {
  1716. document.title = "🟥" + document.title;
  1717. }
  1718. await LS.pushItem(name, value);
  1719. }
  1720. }
  1721. static async popItem(name, value) { // remove from an array
  1722. const array = LS.getItem(name, []);
  1723. if (array.indexOf(value) !== -1) {
  1724. array.splice(array.indexOf(value), 1);
  1725. LS.setItem(name, array);
  1726.  
  1727. //sanity check
  1728. await sleep(50);
  1729. if (LS.hasItem(name, value)) {
  1730. if (verbose) {
  1731. document.title = "🟨" + document.title;
  1732. }
  1733. await LS.popItem(name, value);
  1734. }
  1735. }
  1736. }
  1737. static hasItem(name, value) { // has in array
  1738. const array = LS.getItem(name, []);
  1739. return array.indexOf(value) !== -1;
  1740. }
  1741. }
  1742.  
  1743. return LS;
  1744. }
  1745.  
  1746. // --- Just groups them in a function for the convenient code looking --- //
  1747. function getUtils({verbose}) {
  1748. function sleep(time) {
  1749. return new Promise(resolve => setTimeout(resolve, time));
  1750. }
  1751.  
  1752. async function fetchResource(url, onProgress = props => console.log(props)) {
  1753. try {
  1754. let response = await fetch(url, {
  1755. // cache: "force-cache",
  1756. });
  1757. const lastModifiedDateSeconds = response.headers.get("last-modified");
  1758. const contentType = response.headers.get("content-type");
  1759.  
  1760. const lastModifiedDate = dateToDayDateString(lastModifiedDateSeconds);
  1761. const extension = contentType ? extensionFromMime(contentType) : null;
  1762.  
  1763. if (onProgress) {
  1764. response = responseProgressProxy(response, onProgress);
  1765. }
  1766.  
  1767. const blob = await response.blob();
  1768.  
  1769. // https://pbs.twimg.com/media/AbcdEFgijKL01_9?format=jpg&name=orig -> AbcdEFgijKL01_9
  1770. // https://pbs.twimg.com/ext_tw_video_thumb/1234567890123456789/pu/img/Ab1cd2345EFgijKL.jpg?name=orig -> Ab1cd2345EFgijKL.jpg
  1771. // https://video.twimg.com/ext_tw_video/1234567890123456789/pu/vid/946x720/Ab1cd2345EFgijKL.mp4?tag=10 -> Ab1cd2345EFgijKL.mp4
  1772. const _url = new URL(url);
  1773. const {filename} = (_url.origin + _url.pathname).match(/(?<filename>[^\/]+$)/).groups;
  1774.  
  1775. const {name} = filename.match(/(?<name>^[^.]+)/).groups;
  1776. return {blob, lastModifiedDate, contentType, extension, name};
  1777. } catch (error) {
  1778. verbose && console.error("[ujs][fetchResource]", url);
  1779. verbose && console.error("[ujs][fetchResource]", error);
  1780. throw error;
  1781. }
  1782. }
  1783.  
  1784. function extensionFromMime(mimeType) {
  1785. let extension = mimeType.match(/(?<=\/).+/)[0];
  1786. extension = extension === "jpeg" ? "jpg" : extension;
  1787. return extension;
  1788. }
  1789.  
  1790. // the original download url will be posted as hash of the blob url, so you can check it in the download manager's history
  1791. function downloadBlob(blob, name, url) {
  1792. const anchor = document.createElement("a");
  1793. anchor.setAttribute("download", name || "");
  1794. const blobUrl = URL.createObjectURL(blob);
  1795. anchor.href = blobUrl + (url ? ("#" + url) : "");
  1796. anchor.click();
  1797. setTimeout(() => URL.revokeObjectURL(blobUrl), 30000);
  1798. }
  1799.  
  1800. // "Sun, 10 Jan 2021 22:22:22 GMT" -> "2021.01.10"
  1801. function dateToDayDateString(dateValue, utc = true) {
  1802. const _date = new Date(dateValue);
  1803. function pad(str) {
  1804. return str.toString().padStart(2, "0");
  1805. }
  1806. const _utc = utc ? "UTC" : "";
  1807. const year = _date[`get${_utc}FullYear`]();
  1808. const month = _date[`get${_utc}Month`]() + 1;
  1809. const date = _date[`get${_utc}Date`]();
  1810.  
  1811. return year + "." + pad(month) + "." + pad(date);
  1812. }
  1813.  
  1814. function addCSS(css) {
  1815. const styleElem = document.createElement("style");
  1816. styleElem.textContent = css;
  1817. document.body.append(styleElem);
  1818. return styleElem;
  1819. }
  1820.  
  1821. function getCookie(name) {
  1822. verbose && console.log("[ujs][getCookie]", document.cookie);
  1823. const regExp = new RegExp(`(?<=${name}=)[^;]+`);
  1824. return document.cookie.match(regExp)?.[0];
  1825. }
  1826.  
  1827. function throttle(runnable, time = 50) {
  1828. let waiting = false;
  1829. let queued = false;
  1830. let context;
  1831. let args;
  1832.  
  1833. return function() {
  1834. if (!waiting) {
  1835. waiting = true;
  1836. setTimeout(function() {
  1837. if (queued) {
  1838. runnable.apply(context, args);
  1839. context = args = undefined;
  1840. }
  1841. waiting = queued = false;
  1842. }, time);
  1843. return runnable.apply(this, arguments);
  1844. } else {
  1845. queued = true;
  1846. context = this;
  1847. args = arguments;
  1848. }
  1849. }
  1850. }
  1851.  
  1852. function throttleWithResult(func, time = 50) {
  1853. let waiting = false;
  1854. let args;
  1855. let context;
  1856. let timeout;
  1857. let promise;
  1858.  
  1859. return async function() {
  1860. if (!waiting) {
  1861. waiting = true;
  1862. timeout = new Promise(async resolve => {
  1863. await sleep(time);
  1864. waiting = false;
  1865. resolve();
  1866. });
  1867. return func.apply(this, arguments);
  1868. } else {
  1869. args = arguments;
  1870. context = this;
  1871. }
  1872.  
  1873. if (!promise) {
  1874. promise = new Promise(async resolve => {
  1875. await timeout;
  1876. const result = func.apply(context, args);
  1877. args = context = promise = undefined;
  1878. resolve(result);
  1879. });
  1880. }
  1881. return promise;
  1882. }
  1883. }
  1884.  
  1885. function xpath(path, node = document) {
  1886. let xPathResult = document.evaluate(path, node, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
  1887. return xPathResult.singleNodeValue;
  1888. }
  1889. function xpathAll(path, node = document) {
  1890. let xPathResult = document.evaluate(path, node, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
  1891. const nodes = [];
  1892. try {
  1893. let node = xPathResult.iterateNext();
  1894.  
  1895. while (node) {
  1896. nodes.push(node);
  1897. node = xPathResult.iterateNext();
  1898. }
  1899. return nodes;
  1900. } catch (err) {
  1901. // todo need investigate it
  1902. console.error(err); // "The document has mutated since the result was returned."
  1903. return [];
  1904. }
  1905. }
  1906.  
  1907. const identityContentEncodings = new Set([null, "identity", "no encoding"]);
  1908. function getOnProgressProps(response) {
  1909. const {headers, status, statusText, url, redirected, ok} = response;
  1910. const isIdentity = identityContentEncodings.has(headers.get("Content-Encoding"));
  1911. const compressed = !isIdentity;
  1912. const _contentLength = parseInt(headers.get("Content-Length")); // `get()` returns `null` if no header present
  1913. const contentLength = isNaN(_contentLength) ? null : _contentLength;
  1914. const lengthComputable = isIdentity && _contentLength !== null;
  1915.  
  1916. // Original XHR behaviour; in TM it equals to `contentLength`, or `-1` if `contentLength` is `null` (and `0`?).
  1917. const total = lengthComputable ? contentLength : 0;
  1918. const gmTotal = contentLength > 0 ? contentLength : -1; // Like `total` is in TM and GM.
  1919.  
  1920. return {
  1921. gmTotal, total, lengthComputable,
  1922. compressed, contentLength,
  1923. headers, status, statusText, url, redirected, ok
  1924. };
  1925. }
  1926. function responseProgressProxy(response, onProgress) {
  1927. const onProgressProps = getOnProgressProps(response);
  1928. let loaded = 0;
  1929. const reader = response.body.getReader();
  1930. const readableStream = new ReadableStream({
  1931. async start(controller) {
  1932. while (true) {
  1933. const {done, /** @type {Uint8Array} */ value} = await reader.read();
  1934. if (done) {
  1935. break;
  1936. }
  1937. loaded += value.length;
  1938. try {
  1939. onProgress({loaded, ...onProgressProps});
  1940. } catch (err) {
  1941. console.error("[ujs][onProgress]:", err);
  1942. }
  1943. controller.enqueue(value);
  1944. }
  1945. controller.close();
  1946. reader.releaseLock();
  1947. },
  1948. cancel() {
  1949. void reader.cancel();
  1950. }
  1951. });
  1952. return new ResponseEx(readableStream, response);
  1953. }
  1954. class ResponseEx extends Response {
  1955. [Symbol.toStringTag] = "ResponseEx";
  1956.  
  1957. constructor(body, {headers, status, statusText, url, redirected, type}) {
  1958. super(body, {
  1959. status, statusText, headers: {
  1960. ...headers,
  1961. "content-type": headers.get("content-type").split("; ")[0] // Fixes Blob type ("text/html; charset=UTF-8") in TM
  1962. }
  1963. });
  1964. this._type = type;
  1965. this._url = url;
  1966. this._redirected = redirected;
  1967. this._headers = headers; // `HeadersLike` is more user-friendly for debug than the original `Headers` object
  1968. }
  1969. get redirected() { return this._redirected; }
  1970. get url() { return this._url; }
  1971. get type() { return this._type || "basic"; }
  1972. /** @returns {HeadersLike} */
  1973. get headers() { return this._headers; }
  1974. }
  1975.  
  1976. function toLineJSON(object, prettyHead = false) {
  1977. let result = "{\n";
  1978. const entries = Object.entries(object);
  1979. const length = entries.length;
  1980. if (prettyHead && length > 0) {
  1981. result += `"${entries[0][0]}":${JSON.stringify(entries[0][1], null, " ")}`;
  1982. if (length > 1) {
  1983. result += `,\n\n`;
  1984. }
  1985. }
  1986. for (let i = 1; i < length - 1; i++) {
  1987. result += `"${entries[i][0]}":${JSON.stringify(entries[i][1])},\n`;
  1988. }
  1989. if (length > 0 && !prettyHead || length > 1) {
  1990. result += `"${entries[length - 1][0]}":${JSON.stringify(entries[length - 1][1])}`;
  1991. }
  1992. result += `\n}`;
  1993. return result;
  1994. }
  1995.  
  1996. const isFirefox = navigator.userAgent.toLowerCase().indexOf("firefox") !== -1;
  1997.  
  1998. function getBrowserName() {
  1999. const userAgent = window.navigator.userAgent.toLowerCase();
  2000. return userAgent.indexOf("edge") > -1 ? "edge-legacy"
  2001. : userAgent.indexOf("edg") > -1 ? "edge"
  2002. : userAgent.indexOf("opr") > -1 && !!window.opr ? "opera"
  2003. : userAgent.indexOf("chrome") > -1 && !!window.chrome ? "chrome"
  2004. : userAgent.indexOf("firefox") > -1 ? "firefox"
  2005. : userAgent.indexOf("safari") > -1 ? "safari"
  2006. : "";
  2007. }
  2008.  
  2009. return {
  2010. sleep, fetchResource, extensionFromMime, downloadBlob, dateToDayDateString,
  2011. addCSS,
  2012. getCookie,
  2013. throttle, throttleWithResult,
  2014. xpath, xpathAll,
  2015. responseProgressProxy,
  2016. toLineJSON,
  2017. isFirefox,
  2018. getBrowserName,
  2019. }
  2020. }
  2021.  
  2022. // ---------------------------------------------------------------------------------------------------------------------
  2023. // ---------------------------------------------------------------------------------------------------------------------