☰

[Reddit] Modmail++

Additional tools and information to Reddit's Modmail

目前為 2021-11-23 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name        [Reddit] Modmail++
  3. // @namespace   HKR
  4. // @match       https://mod.reddit.com/mail/*
  5. // @grant       none
  6. // @version     2.0
  7. // @author      HKR
  8. // @description Additional tools and information to Reddit's Modmail
  9. // @icon        https://www.redditstatic.com/modmail/favicon/favicon-32x32.png
  10. // @supportURL  https://github.com/Hakorr/Userscripts/issues
  11. // ==/UserScript==
  12.  
  13. console.log("[ModmailExtraInfo] %cScript started!", "color: green");
  14.  
  15. /* Do not touch */
  16. const $ = document.querySelector.bind(document);
  17. const $$ = document.querySelectorAll.bind(document);
  18. var first = false;
  19. /* Do not touch */
  20.  
  21. function main() {
  22. 	console.log("[ModmailExtraInfo] %cMain function ran!", "color: grey");
  23.  
  24. 	/* SETTINGS */
  25.  
  26. 	/* NOTE (If you want to use the Custom Responses): Reddit's sync feature removes the script's added text.
  27. 	- If you block "https://oauth.reddit.com/api/mod/conversations/*****?markRead=false&redditWebClient=modmail", the added text will stay. */
  28.  
  29. 	//Variables for the responses
  30. 	const subTag = $(".ThreadTitle__community").href.slice(23);
  31. 	const userTag = "u/" + $(".InfoBar__username").innerText;
  32. 	const modmail = `[modmail](https://www.reddit.com/message/compose?to=/${subTag})`;
  33. 	const rules = `https://www.reddit.com/${subTag}/about/rules`;
  34. 	const randItem = itemArr => itemArr[Math.floor(Math.random() * itemArr.length)];
  35.  
  36. 	//Text color settings
  37. 	var textColor = null, lightModeTextColor = "#6e6e6e", darkModeTextColor = "#757575";
  38.  
  39. 	//Title color settings
  40. 	var titleColor = null, lightModeTitleColor = "#2c2c2c", darkModeTitleColor = "#a7a7a7";
  41.  
  42. 	//Listbox color settings
  43. 	var listBoxColor = null, lightModeListColor = "#fff", darkModeListColor = "#242424";
  44.  
  45. 	//Data (Such as numbers) color settings
  46. 	const dataColor = "#0079d3";
  47.  
  48. 	//No response list is created if false
  49. 	const enableCustomResponses = true;
  50.  
  51. 	//No chat profile icons are added if false
  52. 	const chatProfileIcons = true;
  53.  
  54. 	//Feel free to edit and add more responses suitable for you! Replace means if to replace all text or just to add the text.
  55. 	const responses = [
  56. 		{
  57. 			"name":"Select a template",
  58. 			"replace":true,
  59. 			"content":``
  60. 		},
  61. 		{
  62. 			"name":"Default approved",
  63. 			"replace":true,
  64. 			"content":`Hey, approved the post!`
  65. 		},
  66. 		{
  67. 			"name":"Default rule broken",
  68. 			"replace":true,
  69. 			"content":`Your post broke our [rules](${rules}).\n\nThe action will not be reverted.`
  70. 		},
  71. 		{
  72. 			"name":"Add greetings",
  73. 			"replace":true,
  74. 			"content":`${randItem(["Greetings","Hello","Hi"])} ${userTag},\n\n`
  75. 		},
  76. 		{
  77. 			"name":"Add thanks",
  78. 			"replace":false,
  79. 			"content":`\n\nThank you!`
  80. 		},
  81. 		{
  82. 			"name":"Add subreddit mention",
  83. 			"replace":false,
  84. 			"content":`${subTag}`
  85. 		},
  86. 		{
  87. 			"name":"Add user mention",
  88. 			"replace":false,
  89. 			"content":`${userTag}`
  90. 		},
  91. 		{
  92. 			"name":"Add Modmail link",
  93. 			"replace":false,
  94. 			"content":`${modmail}`
  95. 		},
  96. 		{
  97. 			"name":"Add Content Policy",
  98. 			"replace":false,
  99. 			"content":`[Content Policy](https://www.redditinc.com/policies/content-policy)`
  100. 		},
  101. 		{
  102. 			"name":"Add User Agreement",
  103. 			"replace":false,
  104. 			"content":`[User Agreement](https://www.redditinc.com/policies/user-agreement)`
  105. 		},
  106. 		{
  107. 			"name":"Add Rickroll",
  108. 			"replace":false,
  109. 			"content":`[link](https://www.youtube.com/watch?v=dQw4w9WgXcQ)`
  110. 		}
  111. 	];
  112.  
  113. 	/* ---------- JS & HTML ---------- */
  114. 	
  115. 	function time(UNIX_timestamp){
  116. 		//Get UNIX time
  117. 		var d = new Date(UNIX_timestamp * 1000);
  118. 		const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  119.  
  120. 		//Get year, month, date, hour, min & sec variables
  121. 		var year = d.getFullYear(), 
  122. 		monthNum = d.getMonth() + 1,
  123. 		month = months[d.getMonth()],
  124. 		date = d.getDate(), 
  125. 		hour = fixnumber(d.getHours()), 
  126. 		min = fixnumber(d.getMinutes()), 
  127. 		sec = fixnumber(d.getSeconds());
  128.  
  129. 		//Construct the time (DD/MM/YY HH/MM/SS) and return it
  130. 		var time = `${date}.${monthNum}.${year} ${hour}:${min}:${sec}`;
  131. 		return time;
  132. 	}
  133. 	
  134. 	//Adds a zero suffix if x < 10
  135. 	const fixnumber = number => number < 10 ? "0" + number : number;
  136.  
  137. 	//Removes the u/ prefix
  138. 	const removePrefix = username => username.includes("u/") ? username.slice(2) : username;
  139.  
  140. 	//Adds the u/ prefix if nonexistant
  141. 	const keepPrefix = username => username.includes("u/") ? username : "u/" + username;
  142.  
  143. 	//Function to avoid XSS
  144. 	function sanitize(evilstring) {
  145. 		const decoder = document.createElement('div')
  146. 		decoder.innerHTML = evilstring;
  147. 		return decoder.textContent;
  148. 	}
  149.  
  150. 	//Appends the info (main, karma, links) to the page
  151. 	function addInfo(){
  152. 		//Load and parse username
  153. 		var username = removePrefix($(".InfoBar__username").innerText);
  154. 		var about = "https://www.reddit.com/user/" + username + "/about.json";
  155. 		const xhr = new XMLHttpRequest();
  156. 	
  157. 		//Once the user info JSON has been fetched
  158. 		xhr.onload = () => {
  159. 			var user = JSON.parse(xhr.responseText);
  160. 			//Separator HTML element
  161. 			var seperator = document.createElement('div');
  162. 			seperator.innerHTML = '<div class="InfoBar__modActions"></div>';
  163. 	
  164. 			//HTML element that contains all the data
  165. 			var userDetails = document.createElement('div');
  166. 			userDetails.classList.add("InfoBar__age");
  167. 			userDetails.innerHTML = `<img class="profileIcon" src="${user.data.icon_img}" width="25">
  168. 			<a class="InfoBar__username" href="https://www.reddit.com/user/${user.data.name}">${user.data.subreddit.display_name_prefixed}</a>
  169. 			<h1 style="color: ${textColor} ; font-size: 11px; margin-top: 17px; margin-bottom: 10px;">${sanitize(user.data.subreddit.public_description)}</h1>
  170. 			<h1 class="dataTitle">Main</h1>
  171. 			<div class="dataText">
  172. 				<p>Created: <span class="value">${time(user.data.created)}</span></p>
  173. 				<p>UserID: <span class="value">${user.data.id}</span></p>
  174. 				<p>Verified: <span class="value">${user.data.verified}</span></p>
  175. 				<p>Employee: <span class="value">${user.data.is_employee}</span></p>
  176. 				<p>NSFW Profile: <span class="value">${user.data.subreddit.over_18}</span></p>
  177. 			</div>
  178. 			<h1 class="dataTitle">Karma</h1>
  179. 			<div class="dataText">
  180. 				<p>Post: <span class="value">${user.data.link_karma}</span></p>
  181. 				<p>Comment: <span class="value">${user.data.comment_karma}</span></p>
  182. 				<p>Total: <span class="value">${user.data.total_karma}</span></p>
  183. 				<p>Awardee: <span class="value">${user.data.awardee_karma}</span></p>
  184. 				<p>Awarder: <span class="value">${user.data.awarder_karma}</span></p>
  185. 			</div>
  186. 			<h1 class="dataTitle">Links</h1>
  187. 				<div style="padding-left: 10px;">
  188. 				<a class="InfoBar__recent" href="https://redditmetis.com/user/${user.data.name}" target="_blank">Redditmetis</a>
  189. 				<a class="InfoBar__recent" href="https://www.reddit.com/search?q=${user.data.name}" target="_blank">Reddit Search</a>
  190. 				<a class="InfoBar__recent" href="https://www.google.com/search?q=%22${user.data.name}%22" target="_blank">Google Search</a>
  191. 			</div>`;
  192.  
  193. 			//Add profile pictures
  194. 			if(chatProfileIcons) {
  195. 				//Icon element
  196. 				var chatProfileIcon = document.createElement('div');
  197. 				chatProfileIcon.innerHTML = `<img class="chatProfileIcon" src="${user.data.icon_img}" width="25">`;
  198.  
  199. 				//Loop trough every username on chat
  200. 				for(var i = 0; i < $$(".ThreadPreview__author").length; i++) {
  201. 					//Get username (u/xxxxxx)
  202. 					let name = $$(".Author__text")[i].innerText;
  203. 					//Check if there is an icon appended already
  204. 					let exists = $$(".ThreadPreview__author")[i].childNodes.length == 1 ? false : true;
  205. 					//If the username is the user (non-mod)
  206. 					if(removePrefix(name) == username && !exists) {
  207. 						//Append the icon next to the username -> [icon] u/username
  208. 						$$(".ThreadPreview__author")[i].insertBefore(chatProfileIcon.cloneNode(true), $$(".ThreadPreview__author")[i].firstChild);
  209. 					}
  210. 				}
  211. 			}
  212.  
  213. 			//Append the elements
  214. 			$(".ThreadViewer__infobar").appendChild(seperator);
  215. 			$(".ThreadViewer__infobar").appendChild(seperator);
  216. 			$(".ThreadViewer__infobar").appendChild(userDetails);
  217. 			$(".ThreadViewer__infobar").appendChild($(".ThreadViewer__infobar").firstChild);
  218. 			$(".InfoBar").appendChild($(".InfoBar__modActions"));
  219. 			$(".InfoBar").insertBefore($(".InfoBar__modActions"),$(".InfoBar").firstChild);
  220. 			if($(".InfoBar__banText"))
  221. 				$(".ThreadViewer__infobar").insertBefore($(".InfoBar__banText"),$(".ThreadViewer__infobar").firstChild);
  222. 			
  223. 			//Remove certain elements
  224. 			$$(".InfoBar__username")[1].outerHTML = "";
  225. 			$$(".InfoBar__age")[1].outerHTML = "";
  226. 			$$(".InfoBar__modActions")[1].outerHTML = "";
  227. 		};
  228. 		
  229. 		//Get user details
  230. 		xhr.open('GET', about);
  231. 		xhr.send();
  232. 	}
  233. 	
  234. 	//Appends the response template listbox to the page
  235. 	function addResponseBox() {
  236. 		//Listbox element
  237. 		var responseBox = document.createElement('div');
  238. 		responseBox.classList.add("select");
  239. 		responseBox.innerHTML = `<h2 class="dataTitle">Response templates</h2>
  240. 		<select id="responseListbox" onchange="listBoxChanged(this.value);" onfocus="this.selectedIndex = -1;"/>
  241. 		<span class="focus"></span>`;
  242. 	
  243. 		//Script element to head
  244. 		var headJS = document.createElement('script');
  245. 		headJS.innerHTML = `function listBoxChanged(message) {
  246. 			var messageBox = document.getElementsByClassName("Textarea ThreadViewerReplyForm__replyText")[0];
  247. 			var responses = ${JSON.stringify(responses)};
  248. 			var response = responses.find(x => x.content == message);
  249. 			response.replace ? messageBox.value = message : messageBox.value += message;
  250. 			console.log("[ModmailExtraInfo] New messageBox value: %c" + messageBox.value,"color: orange");
  251. 		}`;
  252. 	
  253. 		function populate() {
  254. 			var select = $("#responseListbox");
  255. 			for(var i = 0; i < responses.length; i++) {
  256. 				select.options[select.options.length] = new Option(responses[i].name, responses[i].content);
  257. 			}
  258. 		}
  259. 	
  260. 		$(".ThreadViewer__replyContainer").prepend(responseBox);
  261. 		var head = $("head");
  262. 		head.appendChild(headJS);
  263. 	
  264. 		populate();
  265. 	}
  266.  
  267. 	//Detects the current theme (dark/light) and applies the correct color (for the added elements)
  268. 	function themeColors() {
  269. 		var darkTheme = $$(".theme-dark").length ? true : false;
  270. 		if(darkTheme) {
  271. 			console.log("[ModmailExtraInfo] Dark mode detected! Setting colors...");
  272. 			textColor = darkModeTextColor;
  273. 			titleColor = darkModeTitleColor;
  274. 			listBoxColor = darkModeListColor;
  275. 		} else {
  276. 			console.log("[ModmailExtraInfo] Light mode detected! Setting colors...");
  277. 			textColor = lightModeTextColor;
  278. 			titleColor = lightModeTitleColor;
  279. 			listBoxColor = lightModeListColor;
  280. 		}
  281. 	}
  282.  
  283. 	themeColors();
  284.  
  285. 	//Took advice for the listbox CSS from moderncss.dev/custom-select-styles-with-pure-css, thanks!
  286. 	var css = `.profileIcon:hover {
  287. 		-ms-transform: scale(6);
  288. 		-webkit-transform: scale(6);
  289. 		transform: scale(6);
  290. 	}
  291. 	.profileIcon {
  292. 		position: relative;
  293. 		bottom: 4px;
  294. 		margin-bottom: 10px;
  295. 		float: left; border-radius: 50%;
  296. 		transition: transform .1s;
  297. 	}
  298. 	.InfoBar__recentsNone {
  299. 		color: #6e6e6e;
  300. 	}
  301. 	.InfoBar__metadata, .InfoBar__recents {
  302. 		margin: 6px 0; 
  303. 		margin-left: 10px;
  304. 	}
  305. 	.value {
  306. 		color: ${dataColor};
  307. 	}
  308. 	.InfoBar__banText {
  309. 		padding-bottom: 15px;
  310. 	}
  311. 	.InfoBar__username, .InfoBar__username:visited {
  312. 		padding-left: 10px;
  313. 	}
  314. 	.ThreadViewer__infobarContainer {
  315. 		display: table;
  316. 	}
  317. 	.dataText {
  318. 		color: ${textColor}; 
  319. 		font-size: 13px;
  320. 		padding-left: 10px;
  321. 	}
  322. 	.dataTitle {
  323. 		color: ${titleColor};
  324. 		font-size: 15px; 
  325. 		margin-bottom: 3px; 
  326. 		margin-top: 5px;
  327. 	}
  328. 	.responseListbox {
  329. 		width: 50%;
  330. 		cursor: pointer;
  331. 	}
  332. 	:root {
  333. 		--select-border: #0079d3;
  334. 		--select-focus: blue;
  335. 		--select-arrow: var(--select-border);
  336. 	}
  337. 	*,
  338. 	*::before,
  339. 	*::after {
  340. 	box-sizing: border-box;
  341. 	}
  342. 	select {
  343. 		appearance: none;
  344. 		background-color: ${listBoxColor};
  345. 		color: ${textColor};
  346. 		border: none;
  347. 		padding: 0 1em 0 0;
  348. 		margin: 0;
  349. 		width: 100%;
  350. 		cursor: pointer;
  351. 		font-family: inherit;
  352. 		font-size: inherit;
  353. 		line-height: inherit;
  354. 		outline: none;
  355. 		position: relative;
  356. 	}
  357. 	.select {
  358. 		width: 100%;
  359. 		min-width: 15ch;
  360. 		max-width: 30ch;
  361. 		border: 1px solid var(--select-border);
  362. 		border-radius: 0.25em;
  363. 		padding: 0.3em 0.4em;
  364. 		font-size: 0.9rem;
  365. 		line-height: 1.1;
  366. 		background-color: ${listBoxColor};
  367. 	}
  368. 	select::-ms-expand {
  369. 		display: none;
  370. 	}
  371. 	option {
  372. 		white-space: normal;
  373. 		outline-color: var(--select-focus);
  374. 	}
  375. 	select:focus + .focus {
  376. 		position: absolute;
  377. 		top: -1px;
  378. 		left: -1px;
  379. 		right: -1px;
  380. 		bottom: -1px;
  381. 		border: 2px solid var(--select-focus);
  382. 		border-radius: inherit;
  383. 	}
  384. 	.Author__text {
  385. 		padding: 6px 0;
  386. 	}
  387. 	.chatProfileIcon {
  388. 		margin-right: 7px;
  389. 		transition: transform .1s;
  390. 		border-radius: 50%;
  391. 	}`;
  392.  
  393. 	//Apply the custom css
  394. 	var styleSheet = document.createElement("style");
  395. 	styleSheet.type = "text/css";
  396. 	styleSheet.innerText = css;
  397. 	document.head.appendChild(styleSheet);
  398.  
  399. 	addInfo();
  400. 	if(enableCustomResponses && $("#responseListbox") == null) addResponseBox();
  401. 	console.log("[ModmailExtraInfo] %cLoaded!", "color: lime");
  402.  
  403. } /* End of Main function */
  404.  
  405. /* Start Main function when visiting new modmail */
  406. var pageURLCheckTimer = setInterval (function () {
  407. 	if (this.lastPathStr !== location.pathname) 
  408. 	{
  409. 		this.lastPathStr = location.pathname;
  410.  
  411. 		first = true;
  412.  
  413. 		let startInterval = setInterval (function () {
  414. 			if($(".InfoBar__username")) {
  415. 				if(first) main();
  416. 				first = false;
  417. 				clearInterval(startInterval);
  418. 			}
  419. 		}, 5);
  420. 	}
  421. }, 100);