☰

快捷便笺+

快捷便笺，快速记录所需信息

  1. // ==UserScript==
  2. // @name        快捷便笺+
  3. // @namespace   kjnote Scripts
  4. // @author      Takitooru
  5. // @match       *://*/*
  6. // @version     1.1.0.5
  7. // @description 快捷便笺，快速记录所需信息
  8. // @license     GPL License
  9. // @grant       GM_getValue
  10. // @grant       GM_setValue
  11. // @grant       GM_addValueChangeListener
  12. // @grant       GM_addStyle
  13. // @grant       GM_addElement
  14. // @noframes
  15. // ==/UserScript==
  16. (function() {
  17. 	window.addEventListener('load', function() {
  18. 		const RndToken = ({
  19. 			__TOKEN_LIST__:['ContainerID', 'ContainerCSSOpen'],
  20. 			init() {
  21. 				this.__TOKEN_LIST__.forEach((name) => (this[name] = randstr(16, false, true)));
  22. 				return this;
  23. 			}
  24. 		}).init();
  25. 		const CONST = {
  26. 			CSS: {
  27. 				outer: replaceText(
  28. 					`#{ContainerID}{width:20px;border:1px solid #70ae2d;position:fixed;top:2px;right:0px;z-index:999999999999999999999;background-color:#8bc34a;color:#fff;border-radius:3px;font:initial;opacity:0.5;transition-duration: 0.3s;}
  29. 					#{ContainerID}:hover, #{ContainerID}.{ContainerCSSOpen}{opacity:1;}`,
  30. 					{'{ContainerID}': RndToken.ContainerID, '{ContainerCSSOpen}': RndToken.ContainerCSSOpen}
  31. 				),
  32. 				inner: `.kjbtn{display: inline-block;text-align: center;cursor:pointer;user-select:none;}
  33. 				.boxhide{display: none;position:fixed;z-index:998;padding:3px;border-radius:3px;}
  34. 				.jstoolbar{color:#000;display:block;border-bottom:1px solid #ddd;background-color:#eeeeee;padding:10px 0 10px 0;}
  35. 				.slider{display:inline-block;font-size:13px}.sliderinput{vertical-align:middle;}
  36. 				.sclose{margin-right: 10px;font-size: 14px;text-align: center;font-weight:bold;color:black;width:20px;float:left;cursor:pointer;}
  37. 				.savetxt{width:80px;float:right;background-color:#8bc34a;border-radius:3px;color:#fff;padding:2px;font-size: 14px;text-align: center;cursor:pointer;margin-right:1em;}
  38. 				.stextarea{background-color: #eeeeee;margin: 0;padding: 5px 0 0 0;height: 200px;width: 350px;color: #000;font-size: 15px;resize: vertical;outline:none;border: none;scrollbar-width: thin;}.stextarea:focus{border: none;box-shadow: none;}
  39. 				.stextarea::-webkit-scrollbar {width: 5px;height: 5px;}.stextarea::-webkit-scrollbar-thumb {border-radius: 3px;-webkit-border-radius: 3px;background-color: #8bc34a;}.stextarea::-webkit-scrollbar-track {background-color: transparent;}`
  40. 			},
  41. 			HTML: {
  42. 				all: `<span class="kjbtn">快捷便笺+</span>
  43. 				<div class="boxhide"><div class="jstoolbar"><div class="sclose">X</div>
  44. 				<div class="slider">透明度:<input class="sliderinput" type="range" min="30" max="100" step="1" value="100"></div>
  45. 				<div class="savetxt">保存为txt</div>
  46. 				</div><textarea class="stextarea"></textarea></div>`
  47. 			}
  48. 		};
  49.  
  50. 		const Newdiv = document.createElement("div");
  51. 		Newdiv.id = RndToken.ContainerID;
  52. 		stopPropagation(Newdiv, ['click', 'dblclick', 'input', 'change', 'focus', 'blur', 'copy', 'paste', 'contextmenu', 'drag', 'mouseenter', 'mousemove', 'mouseover', 'mouseleave', 'mousedown', 'keydown', 'keyup', 'keypress']);
  53. 		const shadow = Newdiv.attachShadow({mode: 'closed'});
  54. 		shadow.innerHTML = CONST.HTML.all;
  55. 		document.body.appendChild(Newdiv);
  56.  
  57. 		GM_addStyle(CONST.CSS.outer);
  58. 		GM_addElement(shadow, 'style', {textContent: CONST.CSS.inner});
  59.  
  60. 		const boxname = $(shadow, ".boxhide");
  61. 		const kjbtn = $(shadow, ".kjbtn");
  62. 		const close = $(shadow, ".sclose");
  63. 		const input = $(shadow, ".stextarea");
  64. 		const savetxt = $(shadow, ".savetxt");
  65. 		const opacity2t = $(shadow, ".sliderinput");
  66. 		kjbtn.addEventListener('click', e => e.preventDefault() || e.stopImmediatePropagation() || [...Newdiv.classList].includes(RndToken.ContainerCSSOpen) ? hide() : show(), {capture: true});
  67. 		close.onclick = hide;
  68. 		input.oninput = save;
  69. 		input.value = GM_getValue('text', '');
  70. 		if (typeof GM_addValueChangeListener === 'function') {
  71. 			GM_addValueChangeListener('text', function(name, old_value, new_value, remote) {
  72. 				remote && (input.value = new_value);
  73. 			});
  74. 		} else {
  75. 			setInterval(function() {
  76. 				input.value = GM_getValue('text', '');
  77. 			}, 500);
  78. 		}
  79. 		savetxt.addEventListener("click",function(e) {
  80. 			Val2txt();
  81. 		});
  82. 		opacity2t.addEventListener("input",function(e) {
  83. 			o2t(this);
  84. 		});
  85.  
  86. 		function show() {
  87. 			Newdiv.classList.add(RndToken.ContainerCSSOpen);
  88. 			boxname.style.display = "block";
  89. 			boxname.style.top = "2px";
  90. 			boxname.style.right = (Newdiv.clientWidth + 2) + "px";
  91. 		}
  92.  
  93. 		function hide() {
  94. 			Newdiv.classList.remove(RndToken.ContainerCSSOpen);
  95. 			boxname.style = null;
  96. 		}
  97.  
  98. 		function save() {
  99. 			GM_getValue('text', '') !== input.value && GM_setValue('text', input.value);
  100. 		}
  101.  
  102. 		function Val2txt() {
  103. 			const Filename = new Date().getTime();
  104. 			const TextContent = input.value;
  105. 			const Addele = document.createElement('a');
  106. 			Addele.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(TextContent));
  107. 			Addele.setAttribute('download', Filename);
  108. 			const jset = document.createEvent('MouseEvents');
  109. 			jset.initEvent('click', true, true);
  110. 			Addele.dispatchEvent(jset);
  111.  
  112. 		}
  113.  
  114. 		function o2t(vv) {
  115. 			input.style.opacity = vv.value / 100;
  116. 		}
  117.  
  118. 		function stopPropagation(elm, evtName) {
  119. 			Array.isArray(evtName) ? evtName.forEach(name => stopPropagation(elm, name)) : elm.addEventListener(evtName, e => e.stopPropagation());
  120. 		}
  121. 	});
  122.  
  123. 	// Basic functions
  124. 	// querySelector
  125. 	function $() {
  126. 		switch(arguments.length) {
  127. 			case 2:
  128. 				return arguments[0].querySelector(arguments[1]);
  129. 				break;
  130. 			default:
  131. 				return document.querySelector(arguments[0]);
  132. 		}
  133. 	}
  134. 	// querySelectorAll
  135. 	function $All() {
  136. 		switch(arguments.length) {
  137. 			case 2:
  138. 				return arguments[0].querySelectorAll(arguments[1]);
  139. 				break;
  140. 			default:
  141. 				return document.querySelectorAll(arguments[0]);
  142. 		}
  143. 	}
  144. 	// createElement
  145. 	function $CrE() {
  146. 		switch(arguments.length) {
  147. 			case 2:
  148. 				return arguments[0].createElement(arguments[1]);
  149. 				break;
  150. 			default:
  151. 				return document.createElement(arguments[0]);
  152. 		}
  153. 	}
  154.  
  155. 	// Replace model text with no mismatching of replacing replaced text
  156. 	// e.g. replaceText('aaaabbbbccccdddd', {'a': 'b', 'b': 'c', 'c': 'd', 'd': 'e'}) === 'bbbbccccddddeeee'
  157. 	//      replaceText('abcdAABBAA', {'BB': 'AA', 'AAAAAA': 'This is a trap!'}) === 'abcdAAAAAA'
  158. 	//      replaceText('abcd{AAAA}BB}', {'{AAAA}': '{BB', '{BBBB}': 'This is a trap!'}) === 'abcd{BBBB}'
  159. 	//      replaceText('abcd', {}) === 'abcd'
  160. 	/* Note:
  161. 	    replaceText will replace in sort of replacer's iterating sort
  162. 	    e.g. currently replaceText('abcdAABBAA', {'BBAA': 'TEXT', 'AABB': 'TEXT'}) === 'abcdAATEXT'
  163. 	    but remember: (As MDN Web Doc said,) Although the keys of an ordinary Object are ordered now, this was
  164. 	    not always the case, and the order is complex. As a result, it's best not to rely on property order.
  165. 	    So, don't expect replaceText will treat replacer key-values in any specific sort. Use replaceText to
  166. 	    replace irrelevance replacer keys only.
  167. 	*/
  168. 	function replaceText(text, replacer) {
  169. 		if (Object.entries(replacer).length === 0) {return text;}
  170. 		const [models, targets] = Object.entries(replacer);
  171. 		const len = models.length;
  172. 		let text_arr = [{text: text, replacable: true}];
  173. 		for (const [model, target] of Object.entries(replacer)) {
  174. 			text_arr = replace(text_arr, model, target);
  175. 		}
  176. 		return text_arr.map((text_obj) => (text_obj.text)).join('');
  177.  
  178. 		function replace(text_arr, model, target) {
  179. 			const result_arr = [];
  180. 			for (const text_obj of text_arr) {
  181. 				if (text_obj.replacable) {
  182. 					const splited = text_obj.text.split(model);
  183. 					for (const part of splited) {
  184. 						result_arr.push({text: part, replacable: true});
  185. 						result_arr.push({text: target, replacable: false});
  186. 					}
  187. 					result_arr.pop();
  188. 				} else {
  189. 					result_arr.push(text_obj);
  190. 				}
  191. 			}
  192. 			return result_arr;
  193. 		}
  194. 	}
  195.  
  196. 	// Append a style text to document(<head>) with a <style> element
  197.     function addStyle(css, id, parent=document.head) {
  198. 		const style = document.createElement("style");
  199. 		id && (style.id = id);
  200. 		style.textContent = css;
  201. 		for (const elm of document.querySelectorAll('#'+id)) {
  202. 			elm.parentElement && elm.parentElement.removeChild(elm);
  203. 		}
  204.         parent.appendChild(style);
  205.     }
  206.  
  207. 	// Returns a random string
  208. 	function randstr(length=16, nums=true, cases=true) {
  209. 		const all = 'abcdefghijklmnopqrstuvwxyz' + (nums ? '0123456789' : '') + (cases ? 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' : '');
  210. 		return Array(length).fill(0).reduce(pre => (pre += all.charAt(randint(0, all.length-1))), '');
  211. 	}
  212.  
  213. 	function randint(min, max) {
  214. 		return Math.floor(Math.random() * (max - min + 1)) + min;
  215. 	}
  216. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址