☰

[Reddit] ModmailExtraInfo

Shows additional user information on the sidebar of modmail

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

  1. // ==UserScript==
  2. // @name        [Reddit] ModmailExtraInfo
  3. // @namespace   HKR
  4. // @match       https://mod.reddit.com/mail/*
  5. // @grant       none
  6. // @version     1.3
  7. // @author      HKR
  8. // @description Shows additional user information on the sidebar of modmail
  9. // @require     https://greasyfork.org/scripts/21927-arrive-js/code/arrivejs.js
  10. // @icon        https://www.redditstatic.com/modmail/favicon/favicon-32x32.png
  11. // @supportURL  https://github.com/Hakorr/Userscripts/issues
  12. // ==/UserScript==
  13.  
  14. /* SETTINGS */
  15. var textColor = "#6e6e6e";
  16. var dataColor = "#0079d3";
  17. var titleColor = "#2c2c2c";
  18.  
  19. var enableCustomResponses = true;
  20. var responses = [
  21. 	{
  22. 		"name":"Select a template",
  23. 		"content":``
  24. 	},
  25. 	{
  26. 		"name":"Approved!",
  27. 		"content":`Hey, approved the post!`
  28. 	},
  29. 	{
  30. 		"name":"Rule broken",
  31. 		"content":`Your post broke our rules. 
  32. 		
  33. The action will not be reverted.`
  34. 	}
  35. ];
  36.  
  37. /* --------- */
  38.  
  39. function Get(url) {
  40.     var xmlHttp = new XMLHttpRequest();
  41.     xmlHttp.open( "GET", url, false );
  42.     xmlHttp.send( null );
  43.     return xmlHttp.responseText;
  44. }
  45.  
  46. function time(UNIX_timestamp){
  47.   var a = new Date(UNIX_timestamp * 1000);
  48.   var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  49.   var year = a.getFullYear();
  50.   var month = months[a.getMonth()];
  51.   var date = a.getDate();
  52.   var hour = fixnumber(a.getHours());
  53.   var min = fixnumber(a.getMinutes());
  54.   var sec = fixnumber(a.getSeconds());
  55.   var time = date + ' ' + month + ' ' + year + ' ' + hour + ':' + min + ':' + sec ;
  56.   return time;
  57. }
  58.  
  59. function fixnumber(number) {
  60.     if(number < 10) return "0" + number;
  61.     else return number;
  62. }
  63.  
  64. function sanitize(evilstring) {
  65.     const decoder = document.createElement('div')
  66.     decoder.innerHTML = evilstring;
  67.     return decoder.textContent;
  68. }
  69.  
  70. //Function that appends HTML into the Modmail page
  71. function addInfo(){
  72. 	//Load and parse username
  73. 	var username = document.getElementsByClassName("InfoBar__username")[0].innerText;
  74. 	var about = "https://www.reddit.com/user/" + username + "/about.json";
  75. 	var user = JSON.parse(Get(about));
  76.  
  77. 	//Separator HTML element
  78. 	var seperator = document.createElement('div');
  79. 	seperator.innerHTML = '<div class="InfoBar__modActions"></div>';
  80.  
  81. 	//HTML element that contains all the data
  82. 	var userDetails = document.createElement('div');
  83. 	userDetails.classList.add("InfoBar__age");
  84. 	userDetails.innerHTML = `
  85. 	<img class="profileIcon" src="${user.data.icon_img}" width="25">
  86. 	<a class="InfoBar__username" href="https://www.reddit.com/user/${user.data.name}">${user.data.subreddit.display_name_prefixed}</a>
  87.  
  88. 	<h1 style="color: ${textColor} ; font-size: 11px; margin-top: 17px; margin-bottom: 10px;">${sanitize(user.data.subreddit.public_description)}</h1>
  89.  
  90. 	<h1 class="dataTitle">Main</h1>
  91. 	<div class="dataText">
  92. 		<p>Created: <span class="value">${time(user.data.created)}</span></p>
  93. 		<p>UserID: <span class="value">${user.data.id}</span></p>
  94. 		<p>Verified: <span class="value">${user.data.verified}</span></p>
  95. 		<p>Employee: <span class="value">${user.data.is_employee}</span></p>
  96. 		<p>NSFW Profile: <span class="value">${user.data.subreddit.over_18}</span></p>
  97. 	</div>
  98.  
  99. 	<h1 class="dataTitle">Karma</h1>
  100. 	<div class="dataText">
  101. 		<p>Post: <span class="value">${user.data.link_karma}</span></p>
  102. 		<p>Comment: <span class="value">${user.data.comment_karma}</span></p>
  103. 		<p>Total: <span class="value">${user.data.total_karma}</span></p>
  104. 		<p>Awardee: <span class="value">${user.data.awardee_karma}</span></p>
  105. 		<p>Awarder: <span class="value">${user.data.awarder_karma}</span></p>
  106. 	</div>
  107.  
  108. 	<h1 class="dataTitle">Links</h1>
  109. 		<div style="padding-left: 10px;">
  110. 		<a class="InfoBar__recent" href="https://redditmetis.com/user/${user.data.name}" target="_blank">Redditmetis</a>
  111. 		<a class="InfoBar__recent" href="https://www.reddit.com/search?q=${user.data.name}" target="_blank">Reddit Search</a>
  112. 		<a class="InfoBar__recent" href="https://www.google.com/search?q=%22${user.data.name}%22" target="_blank">Google Search</a>
  113. 	</div>
  114. 	`;
  115. 	
  116. 	//Arrange items and append
  117. 	document.getElementsByClassName("ThreadViewer__infobar")[0].appendChild(seperator);
  118. 	document.getElementsByClassName("ThreadViewer__infobar")[0].appendChild(userDetails);
  119. 	document.getElementsByClassName("ThreadViewer__infobar")[0].appendChild(document.getElementsByClassName("ThreadViewer__infobar")[0].firstChild);
  120. 	document.getElementsByClassName("InfoBar")[0].appendChild(document.getElementsByClassName("InfoBar__modActions")[0]);
  121. 	document.getElementsByClassName("InfoBar")[0].insertBefore(document.getElementsByClassName("InfoBar__modActions")[0],document.getElementsByClassName("InfoBar")[0].firstChild);
  122. 	if(document.getElementsByClassName("InfoBar__banText")[0])
  123. 		document.getElementsByClassName("ThreadViewer__infobar")[0].insertBefore(document.getElementsByClassName("InfoBar__banText")[0],document.getElementsByClassName("ThreadViewer__infobar")[0].firstChild);
  124. 	document.getElementsByClassName("InfoBar__username")[1].outerHTML = "";
  125. 	document.getElementsByClassName("InfoBar__age")[1].outerHTML = "";
  126. 	document.getElementsByClassName("InfoBar__modActions")[1].outerHTML = "";
  127. }
  128.  
  129. function addResponseBox() {
  130. 	//Listbox element
  131. 	var responseBox = document.createElement('div');
  132. 	responseBox.classList.add("select");
  133. 	responseBox.innerHTML = `
  134. 	<select id="responseListbox" onchange="listBoxChanged(this.value);" onfocus="this.selectedIndex = -1;"/>
  135. 	<span class="focus"></span>
  136. 	`;
  137.  
  138. 	//Script element to head
  139. 	var headJS = document.createElement('script');
  140. 	headJS.innerHTML = `
  141. 		function listBoxChanged(message) {
  142. 			var messageBox = document.getElementsByClassName("Textarea ThreadViewerReplyForm__replyText")[0];
  143. 			//messageBox.focus();
  144. 			messageBox.value = message;
  145. 			console.log("Set message to: " + message);
  146. 		}
  147. 	`;
  148.  
  149. 	function populate() {
  150. 		var select = document.getElementById("responseListbox");
  151. 		for(var i = 0; i < responses.length; i++) {
  152. 			select.options[select.options.length] = new Option(responses[i].name, responses[i].content);
  153. 		}
  154. 	}
  155.  
  156. 	document.getElementsByClassName("ThreadViewer__replyContainer")[0].prepend(responseBox);
  157. 	var head = document.getElementsByTagName('head')[0];
  158. 	head.appendChild(headJS);
  159.  
  160. 	populate();
  161. }
  162.  
  163. //When Modmail conversation has been opened, load the HTML elements with the correct data
  164. const elementToWatch = 'a[class="InfoBar__username"]';
  165. document.arrive(elementToWatch, function () {
  166. 	addInfo();
  167. 	if(enableCustomResponses) addResponseBox();
  168. });
  169.  
  170. if(document.getElementsByClassName("InfoBar__username")[0]) { 
  171. 	addInfo(); 
  172. 	if(enableCustomResponses) addResponseBox(); 
  173. }
  174.  
  175. var css = `
  176. .profileIcon:hover {
  177. 	-ms-transform: scale(6);
  178. 	-webkit-transform: scale(6);
  179. 	transform: scale(6);
  180. }
  181. .profileIcon {
  182. 	position: relative;
  183. 	bottom: 4px;
  184. 	margin-bottom: 10px;
  185. 	float: left; border-radius: 50%;
  186. 	transition: transform .2s;
  187. }
  188. .InfoBar__recentsNone {
  189. 	color: #6e6e6e;
  190. }
  191. .InfoBar__metadata, .InfoBar__recents {
  192. 	margin: 6px 0; 
  193. 	margin-left: 10px;
  194. }
  195. .value {
  196. 	color: ${dataColor};
  197. }
  198. .InfoBar__banText {
  199. 	padding-bottom: 15px;
  200. }
  201. .InfoBar__username, .InfoBar__username:visited {
  202. 	padding-left: 10px;
  203. }
  204. .ThreadViewer__infobarContainer {
  205. 	display: table;
  206. }
  207. .ThreadViewer__threadContainer.m-has-infobar {
  208. 	right: 340px;
  209. }
  210. .dataText {
  211. 	color: ${textColor}; 
  212. 	font-size: 13px;
  213. 	padding-left: 10px;
  214. }
  215. .dataTitle {
  216. 	color: ${titleColor};
  217. 	font-size: 15px; 
  218. 	margin-bottom: 3px; 
  219. 	margin-top: 5px;
  220. }
  221. .responseListbox {
  222. 	width: 50%;
  223. }
  224.  
  225. :root {
  226. 	--select-border: #777;
  227. 	--select-focus: blue;
  228. 	--select-arrow: var(--select-border);
  229. }
  230. *,
  231. *::before,
  232. *::after {
  233.   box-sizing: border-box;
  234. }
  235. select {
  236. 	// A reset of styles, including removing the default dropdown arrow
  237. 	appearance: none;
  238. 	// Additional resets for further consistency
  239. 	background-color: transparent;
  240. 	border: none;
  241. 	padding: 0 1em 0 0;
  242. 	margin: 0;
  243. 	width: 100%;
  244. 	font-family: inherit;
  245. 	font-size: inherit;
  246. 	cursor: inherit;
  247. 	line-height: inherit;
  248. 	outline: none;
  249. 	position: relative;
  250. }
  251. .select {
  252. 	width: 100%;
  253. 	min-width: 15ch;
  254. 	max-width: 30ch;
  255. 	border: 1px solid var(--select-border);
  256. 	border-radius: 0.25em;
  257. 	padding: 0.25em 0.5em;
  258. 	font-size: 1rem;
  259. 	cursor: pointer;
  260. 	line-height: 1.1;
  261. 	background-color: #fff;
  262. 	background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
  263. }
  264. select::-ms-expand {
  265. 	display: none;
  266. }
  267. option {
  268.     white-space: normal;
  269.  
  270.     // Only affects Chrome
  271.     outline-color: var(--select-focus);
  272. }
  273. select:focus + .focus {
  274. 	position: absolute;
  275. 	top: -1px;
  276. 	left: -1px;
  277. 	right: -1px;
  278. 	bottom: -1px;
  279. 	border: 2px solid var(--select-focus);
  280. 	border-radius: inherit;
  281. }
  282. `;
  283.  
  284. //Apply the custom css
  285. var styleSheet = document.createElement("style");
  286. styleSheet.type = "text/css";
  287. styleSheet.innerText = css;
  288. document.head.appendChild(styleSheet);