Undo Twitter's insistence to down-res images when viewing on its dedicated page and add a button to download the full image without the weird file extensions which don't count as actual images.
// ==UserScript==
// @name View Full Twitter Image
// @version 2.0.1
// @description Undo Twitter's insistence to down-res images when viewing on its dedicated page and add a button to download the full image without the weird file extensions which don't count as actual images.
// @author ForgottenUmbrella
// @match https://pbs.twimg.com/media/*
// @grant none
// @noframes
// @namespace https://greasyfork.org/users/83187
// ==/UserScript==
"use strict";
// Returns the URL to the original image file (as a string), given a `location` object.
function ogImageUrl(location) {
let url = new URL(location.href);
const isNewFormat = url.search.length > 0;
if (isNewFormat) {
// The old URL format is https://pbs.twimg/media/hash.jpg:orig.
// The new URL format is https://pbs.twimg.com/media/hash?format=jpg&name=orig.
let params = new URLSearchParams(url.search);
params.set("name", "orig");
url.search = params.toString();
return url.href;
}
return url.href.replace(":large", "") + ":orig";
}
// Returns the filename of the original image, given a `location` to said image.
function imageName(location) {
const filename = location.pathname.split("/").pop();
// Remove the ":orig" tag if Twitter is using the old URL format.
return filename.replace(":orig", "");
}
// Saves the webpage/file being viewed as `filename`.
function download(filename) {
let element = document.createElement("a");
// The `download` attribute only works if `href` is set.
element.href = location.href;
element.download = filename;
element.style.display = "none";
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
// View original image file.
const isOgImage = location.href.includes("orig");
if (!isOgImage) {
location.assign(ogImageUrl(location));
}
// Add spacing between image and download button.
const image = document.getElementsByTagName("img")[0];
const spacing = document.createElement("p");
document.body.insertBefore(spacing, image);
// Add download button.
let button = document.createElement("button");
button.innerHTML = "Download";
button.onclick = () => void download(imageName(location));
document.body.insertBefore(button, spacing);