// ==UserScript==
// @name 【Mod】Twitter Media Downloader
// @description Save Video/Photo by One-Click.
// @description:ja ワンクリックで動画・画像を保存する。
// @description:zh-cn 一键保存视频/图片
// @description:zh-tw 一鍵保存視頻/圖片
// @version 1.27【Mod】20240412
// @author AMANE【Mod】heckles
// @namespace none
// @match https://twitter.com/*
// @match https://mobile.twitter.com/*
// @grant GM_registerMenuCommand
//这些代码行看起来像是 Greasemonkey 脚本的元数据(metadata)注释,而不是普通的 JavaScript 代码。Greasemonkey 是一个 Firefox 插件,允许用户为网页添加自定义的 JavaScript 代码,从而修改或增强网页的功能。
// @grant 注释用于声明脚本将使用哪些 Greasemonkey 提供的 API。这有助于确保脚本的权限设置正确,并且当脚本安装或更新时,Greasemonkey 会检查这些权限是否与用户设置的权限相符。
//现在来逐一解释这些 @grant 注释:
// @grant GM_setValue
//这表示脚本将使用 GM_setValue 函数。GM_setValue 用于在 Greasemonkey 的存储中设置一个值。这个值可以在脚本的其他部分或其他脚本中通过 GM_getValue 获取。
// @grant GM_getValue
//这表示脚本将使用 GM_getValue 函数。GM_getValue 用于从 Greasemonkey 的存储中获取一个之前通过 GM_setValue 设置的值。
// @grant GM_download
//这表示脚本将使用 GM_download 函数。GM_download 是一个用于触发文件下载的函数。你可以使用它来下载并保存文件到用户的本地文件系统。
//注意:随着 Greasemonkey 的发展,一些 API 可能已经被弃用或替代。如果你正在查看一个较新的脚本或库,建议查阅最新的 Greasemonkey 文档以了解最新的 API 和最佳实践。
//此外,需要注意的是,直接在脚本中写这些 @grant 注释可能不是必需的,因为 Greasemonkey 通常可以从脚本的实际代码和使用的 API 中推断出所需的权限。但在某些情况下,明确声明这些权限可能是个好主意,以确保代码的清晰性和兼容性。
// @compatible Chrome
// @compatible Firefox
// @license MIT
// @downloadURL none
// ==/UserScript==
/* jshint esversion: 8 */
// 定义文件名格式
const filename =
"{date-time}_twitter_{user-name}(@{user-id})_{status-id}_{file-type}";
// TMD模块的封装
const TMD = (function () {
// 初始化变量
let lang, host, history, show_sensitive, is_tweetdeck;
// 返回一个包含各种方法的对象
return {
// 初始化函数
init: async function () {
// 注册右键菜单命令
GM_registerMenuCommand(
(this.language[navigator.language] || this.language.en).settings,
this.settings
);
// 初始化语言、主机名、是否为TweetDeck、历史记录和是否显示敏感内容
lang =
this.language[document.querySelector("html").lang] || this.language.en;
host = location.hostname;
is_tweetdeck = host.indexOf("tweetdeck") >= 0;
history = this.storage_obsolete();
if (history.length) {
this.storage(history);
this.storage_obsolete(true); // 标记为已更新
} else history = await this.storage(); // 获取新的历史记录
show_sensitive = GM_getValue("show_sensitive", false); // 读取是否显示敏感内容的设置
// 插入CSS样式
document.head.insertAdjacentHTML(
"beforeend",
""
);
// 设置MutationObserver观察文档变化
let observer = new MutationObserver((ms) =>
ms.forEach((m) => m.addedNodes.forEach((node) => this.detect(node)))
);
observer.observe(document.body, { childList: true, subtree: true }); // 开始观察
},
/**
* 检测给定的节点是否包含需要添加按钮的元素。
* @param {HTMLElement} node - 需要被检测的DOM节点。
*/
detect: function (node) {
// 尝试根据节点标签选择合适的article元素,或者在当前节点或其父节点中查找article元素
let article =
(node.tagName == "ARTICLE" && node) ||
(node.tagName == "DIV" &&
(node.querySelector("article") || node.closest("article")));
// 如果找到article元素,为其添加按钮
if (article) this.addButtonTo(article);
// 根据节点标签选择合适的listitem元素集合,或者在当前节点中查找符合要求的listitem元素
let listitems =
(node.tagName == "LI" &&
node.getAttribute("role") == "listitem" && [node]) ||
(node.tagName == "DIV" && node.querySelectorAll('li[role="listitem"]'));
// 如果找到listitem元素集合,为其中的媒体元素添加按钮
if (listitems) this.addButtonToMedia(listitems);
},
/**
* 为指定的article元素添加下载按钮。
* @param {HTMLElement} article - 需要添加按钮的article元素。
*/
addButtonTo: function (article) {
// 如果该元素已经添加过按钮,则直接返回
if (article.dataset.detected) return;
article.dataset.detected = "true";
// 定义用于选择媒体元素的selector
let media_selector = [
'a[href*="/photo/1"]',
'div[role="progressbar"]',
'div[data-testid="playButton"]',
'a[href="/settings/content_you_see"]', // 隐藏的内容
"div.media-image-container", // 用于TweetDeck
"div.media-preview-container", // 用于TweetDeck
'div[aria-labelledby]>div:first-child>div[role="button"][tabindex="0"]', // 用于音频(实验性)
];
// 在article元素中查找第一个匹配的媒体元素
let media = article.querySelector(media_selector.join(","));
if (media) {
// 提取推文ID
let status_id = article
.querySelector('a[href*="/status/"]')
.href.split("/status/")
.pop()
.split("/")
.shift();
// 查找按钮组或者分享按钮的位置
let btn_group = article.querySelector(
'div[role="group"]:last-of-type, ul.tweet-actions, ul.tweet-detail-actions'
);
let btn_share = Array.from(
btn_group.querySelectorAll(
":scope>div>div, li.tweet-action-item>a, li.tweet-detail-action-item>a"
)
).pop().parentNode;
// 克隆分享按钮并修改为下载按钮
let btn_down = btn_share.cloneNode(true);
if (is_tweetdeck) {
btn_down.firstElementChild.innerHTML =
'";
btn_down.firstElementChild.removeAttribute("rel");
btn_down.classList.replace("pull-left", "pull-right");
} else {
btn_down.querySelector("svg").innerHTML = this.svg;
}
// 判断是否已经下载
let is_exist = history.indexOf(status_id) >= 0;
// 设置按钮状态
this.status(btn_down, "tmd-down");
this.status(
btn_down,
is_exist ? "completed" : "download",
is_exist ? lang.completed : lang.download
);
// 在按钮组中插入下载按钮
btn_group.insertBefore(btn_down, btn_share.nextSibling);
// 设置按钮点击事件
btn_down.onclick = () => this.click(btn_down, status_id, is_exist);
// 如果显示敏感内容,自动点击显示敏感内容的按钮
if (show_sensitive) {
let btn_show = article.querySelector(
'div[aria-labelledby] div[role="button"][tabindex="0"]:not([data-testid]) > div[dir] > span > span'
);
if (btn_show) btn_show.click();
}
}
// 为每个照片链接添加下载按钮(适用于包含多张照片的情况)
let imgs = article.querySelectorAll('a[href*="/photo/"]');
if (imgs.length > 1) {
let status_id = article
.querySelector('a[href*="/status/"]')
.href.split("/status/")
.pop()
.split("/")
.shift();
let btn_group = article.querySelector('div[role="group"]:last-of-type');
let btn_share = Array.from(
btn_group.querySelectorAll(":scope>div>div")
).pop().parentNode;
imgs.forEach((img) => {
// 提取照片的索引号
let index = img.href.split("/status/").pop().split("/").pop();
// 判断是否已经下载
let is_exist = history.indexOf(status_id) >= 0;
let btn_down = document.createElement("div");
btn_down.innerHTML =
'
";
btn_down.classList.add("tmd-down", "tmd-img");
// 设置按钮状态为下载
this.status(btn_down, "download");
img.parentNode.appendChild(btn_down);
// 设置按钮点击事件
btn_down.onclick = (e) => {
e.preventDefault();
this.click(btn_down, status_id, is_exist, index);
};
});
}
},
/**
* 向媒体列表项中添加下载按钮
* @param {Array} listitems - 媒体列表项的数组
*/
addButtonToMedia: function (listitems) {
listitems.forEach((li) => {
// 如果当前列表项已经被检测过,则跳过
if (li.dataset.detected) return;
li.dataset.detected = "true";
// 提取状态ID
let status_id = li
.querySelector('a[href*="/status/"]')
.href.split("/status/")
.pop()
.split("/")
.shift();
// 检查历史记录中是否已经存在该状态ID
let is_exist = history.indexOf(status_id) >= 0;
// 创建下载按钮元素
let btn_down = document.createElement("div");
btn_down.innerHTML =
'";
btn_down.classList.add("tmd-down", "tmd-media");
// 设置按钮状态,已存在则为完成,否则为下载
this.status(
btn_down,
is_exist ? "completed" : "download",
is_exist ? lang.completed : lang.download
);
// 将按钮添加到列表项中
li.appendChild(btn_down);
// 设置按钮点击事件处理函数
btn_down.onclick = () => this.click(btn_down, status_id, is_exist);
});
},
/**
* 点击按钮时的处理函数,用于下载推文的相关信息和媒体文件。
* @param {HTMLElement} btn 被点击的按钮元素。
* @param {string} status_id 推文的ID。
* @param {boolean} is_exist 表示该推文是否已存在于历史记录中。
* @param {number} [index] 媒体文件的索引,用于下载特定的媒体文件(可选)。
*/
click: async function (btn, status_id, is_exist, index) {
// 如果按钮正在加载中,则不执行任何操作
if (btn.classList.contains("loading")) return;
// 设置按钮状态为加载中
this.status(btn, "loading");
// 从存储中获取文件名,并移除换行符
let out = (await GM_getValue("filename", filename)).split("\n").join("");
// 获取是否保存历史记录的设置
let save_history = await GM_getValue("save_history", true);
// 获取推文的JSON数据
let json = await this.fetchJson(status_id);
// 解析推文和用户信息
let tweet = json.legacy;
let user = json.core.user_results.result.legacy;
// 定义无效字符及其替换字符
let invalid_chars = {
"\\": "\",
"/": "/",
"|": "|",
"<": "<",
">": ">",
":": ":",
"*": "*",
"?": "?",
'"': """,
"\u200b": "",
"\u200c": "",
"\u200d": "",
"\u2060": "",
"\ufeff": "",
"🔞": "",
};
// 解析或设定日期时间格式
let datetime = out.match(/{date-time(-local)?:[^{}]+}/)
? out
.match(/{date-time(?:-local)?:([^{}]+)}/)[1]
.replace(/[\\/|<>*?:"]/g, (v) => invalid_chars[v])
: "YYYY-MM-DD hh-mm-ss";
// 准备存储信息的对象
let info = {};
// 填充信息对象,包括推文ID、用户名、用户ID、日期时间等
info["status-id"] = status_id;
info["user-name"] = user.name.replace(
/([\\/|*?:"]|[\u200b-\u200d\u2060\ufeff]|🔞)/g,
(v) => invalid_chars[v]
);
info["user-id"] = user.screen_name;
info["date-time"] = this.formatDate(tweet.created_at, datetime);
info["date-time-local"] = this.formatDate(
tweet.created_at,
datetime,
true
);
// 处理推文的完整文本,移除URL,替换无效字符
info["full-text"] = tweet.full_text
.split("\n")
.join(" ")
.replace(/\s*https:\/\/t\.co\/\w+/g, "")
.replace(
/[\\/|<>*?:"]|[\u200b-\u200d\u2060\ufeff]/g,
(v) => invalid_chars[v]
);
// 处理推文中的媒体文件
let medias = tweet.extended_entities && tweet.extended_entities.media;
if (index) medias = [medias[index - 1]];
if (medias.length > 0) {
// 对每个媒体文件执行下载操作
let tasks = medias.length;
let tasks_result = [];
medias.forEach((media, i) => {
// 提取媒体文件的下载URL和相关信息
info.url =
media.type == "photo"
? media.media_url_https + ":orig"
: media.video_info.variants
.filter((n) => n.content_type == "video/mp4")
.sort((a, b) => b.bitrate - a.bitrate)[0].url;
info.file = info.url.split("/").pop().split(/[:?]/).shift();
info["file-name"] = info.file.split(".").shift();
info["file-ext"] = info.file.split(".").pop();
info["file-type"] = media.type.replace("animated_", "");
// 构造输出文件名
info.out = (
out.replace(/\.?{file-ext}/, "") +
((medias.length > 1 || index) && !out.match("{file-name}")
? "-" + (index ? index - 1 : i)
: "") +
".{file-ext}"
).replace(/{([^{}:]+)(:[^{}]+)?}/g, (match, name) => info[name]);
// 添加下载任务
this.downloader.add({
url: info.url,
name: info.out,
onload: () => {
tasks -= 1;
tasks_result.push(
(medias.length > 1 || index
? (index ? index : i + 1) + ": "
: "") + lang.completed
);
// 更新按钮状态
this.status(btn, null, tasks_result.sort().join("\n"));
if (tasks === 0) {
// 所有任务完成后,更新按钮状态为完成,并保存历史记录
this.status(btn, "completed", lang.completed);
if (save_history && !is_exist) {
history.push(status_id);
this.storage(status_id);
}
}
},
onerror: (result) => {
tasks = -1;
tasks_result.push(
(medias.length > 1 ? i + 1 + ": " : "") + result.details.current
);
// 下载失败时更新按钮状态
this.status(btn, "failed", tasks_result.sort().join("\n"));
},
});
});
} else {
// 如果没有找到媒体文件,更新按钮状态为失败
this.status(btn, "failed", "MEDIA_NOT_FOUND");
}
},
/**
* 更新按钮状态。
* @param {HTMLElement} btn - 要更新状态的按钮元素。
* @param {string} css - 要添加的CSS类(可选)。
* @param {string} title - 按钮的标题(可选)。
* @param {string} style - 要直接应用到按钮的内联样式(可选)。
*/
status: function (btn, css, title, style) {
// 如果提供了CSS类,则移除旧的类并添加新的类
if (css) {
btn.classList.remove("download", "completed", "loading", "failed");
btn.classList.add(css);
}
// 如果提供了标题,则更新按钮的标题
if (title) btn.title = title;
// 如果提供了样式,则更新按钮的内联样式
if (style) btn.style.cssText = style;
},
/**
* 弹出设置对话框。
*/
settings: async function () {
// 创建元素的工具函数
const $element = (parent, tag, style, content, css) => {
let el = document.createElement(tag);
if (style) el.style.cssText = style;
if (typeof content !== "undefined") {
if (tag == "input") {
if (content == "checkbox") el.type = content;
else el.value = content;
} else el.innerHTML = content;
}
if (css) css.split(" ").forEach((c) => el.classList.add(c));
parent.appendChild(el);
return el;
};
// 创建设置对话框的容器和基本样式
let wapper = $element(
document.body,
"div",
"position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background-color: #0009; z-index: 10;",
);
// 处理设置对话框的关闭逻辑
let wapper_close;
wapper.onmousedown = (e) => {
wapper_close = e.target == wapper;
};
wapper.onmouseup = (e) => {
if (wapper_close && e.target == wapper) wapper.remove();
};
// 创建并设置对话框内容
let dialog = $element(
wapper,
"div",
"position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); width: fit-content; width: -moz-fit-content; background-color: #f3f3f3; border: 1px solid #ccc; border-radius: 10px; color: black;",
);
// 设置对话框标题
let title = $element(
dialog,
"h3",
"margin: 10px 20px;",
lang.dialog.title
);
// 创建设置选项
let options = $element(
dialog,
"div",
"margin: 10px; border: 1px solid #ccc; border-radius: 5px;",
);
// 保存历史记录的设置
let save_history_label = $element(
options,
"label",
"display: block; margin: 10px;",
lang.dialog.save_history
);
let save_history_input = $element(
save_history_label,
"input",
"float: left;",
"checkbox"
);
save_history_input.checked = await GM_getValue("save_history", true);
save_history_input.onchange = () => {
GM_setValue("save_history", save_history_input.checked);
};
// 清除历史记录的按钮
let clear_history = $element(
save_history_label,
"label",
"display: inline-block; margin: 0 10px; color: blue;",
lang.dialog.clear_history
);
clear_history.onclick = () => {
if (confirm(lang.dialog.clear_confirm)) {
history = [];
GM_setValue("download_history", []);
}
};
// 显示敏感内容的设置
let show_sensitive_label = $element(
options,
"label",
"display: block; margin: 10px;",
lang.dialog.show_sensitive
);
let show_sensitive_input = $element(
show_sensitive_label,
"input",
"float: left;",
"checkbox"
);
show_sensitive_input.checked = await GM_getValue("show_sensitive", false);
show_sensitive_input.onchange = () => {
show_sensitive = show_sensitive_input.checked;
GM_setValue("show_sensitive", show_sensitive);
};
// 文件名设置
let filename_div = $element(
dialog,
"div",
"margin: 10px; border: 1px solid #ccc; border-radius: 5px;",
);
let filename_label = $element(
filename_div,
"label",
"display: block; margin: 10px 15px;",
lang.dialog.pattern
);
let filename_input = $element(
filename_label,
"textarea",
"display: block; min-width: 500px; max-width: 500px; min-height: 100px; font-size: inherit; background: white; color: black;",
await GM_getValue("filename", filename)
);
// 文件名标签和占位符
let filename_tags = $element(
filename_div,
"label",
"display: table; margin: 10px;",
`
{user-name}
{user-id}
{status-id}
{date-time}
{full-text}
{file-type}
{file-name}
`
);
filename_input.selectionStart = filename_input.value.length;
// 为文件名占位符添加点击事件,以插入到当前选区
filename_tags.querySelectorAll(".tmd-tag").forEach((tag) => {
tag.onclick = () => {
let ss = filename_input.selectionStart;
let se = filename_input.selectionEnd;
filename_input.value =
filename_input.value.substring(0, ss) +
tag.innerText +
filename_input.value.substring(se);
filename_input.selectionStart = ss + tag.innerText.length;
filename_input.selectionEnd = ss + tag.innerText.length;
filename_input.focus();
};
});
// 保存设置的按钮
let btn_save = $element(
title,
"label",
"float: right;",
lang.dialog.save,
"tmd-btn"
);
btn_save.onclick = async () => {
await GM_setValue("filename", filename_input.value);
wapper.remove();
};
},
/**
* 异步获取指定状态ID的JSON数据。
* @param {string} status_id - 需要获取数据的状态ID。
* @returns {Promise