☰

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