☰

Show My Passwords

Show/Hide the contents of password fields by clicking on the eye icon

目前為 2017-08-06 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name         Show My Passwords
  3. // @name:es      Ver Mis Contraseñas
  4. // @namespace    ShowMyPasswords
  5. // @version      1.1
  6. // @description  Show/Hide the contents of password fields by clicking on the eye icon
  7. // @description:es  Muestra/Ocultar el contenido de los campos de contraseña haciendo clic en el icono
  8. // @author       Elwyn
  9. // @include      http://*
  10. // @include      https://*
  11. // @grant        GM_setValue
  12. // @grant        GM_getValue
  13. // ==/UserScript==
  14.  
  15. // Note: We use Pure Javascript to prevent potential conflicts on some websites
  16. // *******************************************************************************
  17. (function() {
  18.     'use strict';
  19.  
  20. 	// Show Eye Icons on Init ( Ctrl + Alt + P = Show/Hide the Eye Icons )
  21. 	var showEyeIcon = true;
  22. 	try{
  23. 		showEyeIcon = GM_getValue('showEyeIcon', true);
  24. 	}catch(e){}
  25.  
  26. 	var ctrlKey = false;
  27.  
  28.  
  29. 	// Function Helpers
  30. 	function getStyle(el, styleProp)
  31. 	{
  32. 		var val;
  33. 		if (el.currentStyle)
  34. 			val = el.currentStyle[styleProp];
  35. 		else if (window.getComputedStyle)
  36. 			val = document.defaultView.getComputedStyle(el,null).getPropertyValue(styleProp);
  37. 		return val;
  38. 	}
  39.  
  40. 	// Main Function
  41. 	var addEyeIcon = function(){
  42.  
  43. 		var password_fields = document.querySelectorAll('input[type="password"]');
  44.  
  45. 		if ( password_fields.length )
  46. 		{
  47. 			for (var i = 0; i < password_fields.length; i++)
  48. 			{
  49. 				var current_field = password_fields[i];
  50.  
  51. 				// Check the initialization flag to prevent multiple initializations of the same field
  52. 				if ( current_field.getAttribute('aria-eye') == 'true' ) continue;
  53.  
  54. 				// get the field style properties
  55. 				var field_margin_top = parseInt( getStyle( current_field, 'padding-top' ) ) + parseInt( getStyle( current_field, 'margin-top' ) );
  56. 				var field_padding_left = parseInt( getStyle( current_field, 'padding-left' ) );
  57. 				var field_padding_right = parseInt( getStyle( current_field, 'padding-right' ) );
  58.  
  59. 				// we use a container for the icon element for right position on the screen
  60. 				var icon_container = document.createElement( 'div' );
  61. 				var container_size = parseInt(getStyle( current_field, 'width')) + field_padding_left + field_padding_right;
  62. 				icon_container.setAttribute('style','position:absolute; width:' + container_size + 'px;');
  63.  
  64. 				var icon_button = document.createElement( 'span' );
  65. 				icon_button.className = 'eye-pass-icon';
  66. 				icon_button.setAttribute('aria-eye','true');
  67. 				icon_button.setAttribute('style','margin-top:' + field_margin_top + 'px !important; margin-right:' + (field_padding_right + 5) + 'px !important;');
  68. 				icon_button.setAttribute('title','( Ctrl + Alt + P ) or ( Ctrl + Click ) to Show/Hide Eye Icons');
  69.  
  70. 				if ( showEyeIcon === false )
  71. 				{
  72. 					icon_button.setAttribute( 'aria-eye', 'false' );
  73. 					icon_button.className += ' hide-eye-icon';
  74. 				}
  75.  
  76. 				// add a click event in every eye icon and YES, we show and hide the fields with any icon
  77. 				icon_button.addEventListener( 'click', function() {
  78. 					if ( ctrlKey )
  79. 					{
  80. 						changeIconState();
  81. 						return;
  82. 					}
  83. 					var fields = document.querySelectorAll( 'input[aria-eye="true"]' );
  84. 					for (var i = 0; i < fields.length; i++)
  85. 					{
  86. 						if( fields[i].type == 'password' )
  87. 						{
  88. 							fields[i].setAttribute( 'type', 'text' );
  89. 							fields[i].className += ' show-pass-warning';
  90. 						} else {
  91. 							fields[i].setAttribute( 'type', 'password' );
  92. 							fields[i].className = fields[i].className.replace(' show-pass-warning','');
  93. 						}
  94. 					}
  95. 				}, false);
  96.  
  97. 				// We generate a flag in the field to prevent multiple initiations
  98. 				current_field.setAttribute('aria-eye','true');
  99.  
  100. 				//We add the icon before the field for a correct positioning in the screen
  101. 				icon_container.appendChild( icon_button );
  102. 				current_field.parentNode.insertBefore( icon_container, current_field );
  103. 			}
  104. 		}
  105. 	};
  106.  
  107. 	var changeIconState = function()
  108. 	{
  109. 		var icons = document.querySelectorAll( '.eye-pass-icon' );
  110. 		for (var i = 0; i < icons.length; i++)
  111. 		{
  112. 			if( icons[i].getAttribute('aria-eye') == 'true' )
  113. 			{
  114. 				icons[i].setAttribute( 'aria-eye', 'false' );
  115. 				icons[i].className = 'eye-pass-icon hide-eye-icon';
  116. 				try{
  117. 					GM_setValue('showEyeIcon', false);
  118. 				}catch(e){}
  119. 			} else {
  120. 				icons[i].setAttribute( 'aria-eye', 'true' );
  121. 				icons[i].className = 'eye-pass-icon';
  122. 				try{
  123. 					GM_setValue('showEyeIcon', true);
  124. 				}catch(e){}
  125. 			}
  126. 		}
  127. 	};
  128.  
  129. 	// CSS Styles
  130. 	var css = [
  131. 		'.eye-pass-icon {',
  132. 		'position:absolute;',
  133. 		'display:block;',
  134. 		'top: 0;',
  135. 		'right: 0;',
  136. 		'margin:0 2px;',
  137. 		'border:0;',
  138. 		'padding: 1px 2px;',
  139. 		'width: 24px;',
  140. 		'height: 24px;',
  141. 		'line-height: 24px;',
  142. 		'text-align:center;',
  143. 		'background-image:url(data:image/png;base64,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);',
  144. 		'background-position: center center;',
  145. 		'background-repeat: no-repeat;',
  146. 		'background-size: 18px 18px;',
  147. 		'cursor: pointer;',
  148. 		'z-index: 100;',
  149. 		'opacity: 0.7;',
  150. 		'}',
  151. 		'.eye-pass-icon:hover {',
  152. 		'background-size: 20px 20px;',
  153. 		'opacity: 1;',
  154. 		'}',
  155. 		'.hide-eye-icon {',
  156. 		'display:none;',
  157. 		'}',
  158. 		'.show-pass-warning {',
  159. 		'border: 1px solid rgba(236, 81, 81, 0.7) !important;',
  160. 		'box-shadow: 0 0 5px rgba(236, 81, 81, 1) !important;',
  161. 		'}'
  162. 	];
  163. 	var style_obj = document.createElement('style');
  164. 	style_obj.innerText = css.join('');
  165. 	document.documentElement.appendChild(style_obj);
  166.  
  167. 	// First Run
  168. 	addEyeIcon();
  169.  
  170. 	// insertion-query v1.0.3 (2016-01-20)
  171. 	// license:MIT
  172. 	// Zbyszek Tenerowicz <naugtur@gmail.com> (http://naugtur.pl/)
  173. 	var insertionQ=function(){"use strict";function a(a,b){var d,e="insQ_"+g++,f=function(a){(a.animationName===e||a[i]===e)&&(c(a.target)||b(a.target))};d=document.createElement("style"),d.innerHTML="@"+j+"keyframes "+e+" {  from {  outline: 1px solid transparent  } to {  outline: 0px solid transparent }  }\n"+a+" { animation-duration: 0.001s; animation-name: "+e+"; "+j+"animation-duration: 0.001s; "+j+"animation-name: "+e+";  } ",document.head.appendChild(d);var h=setTimeout(function(){document.addEventListener("animationstart",f,!1),document.addEventListener("MSAnimationStart",f,!1),document.addEventListener("webkitAnimationStart",f,!1)},n.timeout);return{destroy:function(){clearTimeout(h),d&&(document.head.removeChild(d),d=null),document.removeEventListener("animationstart",f),document.removeEventListener("MSAnimationStart",f),document.removeEventListener("webkitAnimationStart",f)}}}function b(a){a.QinsQ=!0}function c(a){return n.strictlyNew&&a.QinsQ===!0}function d(a){return c(a.parentNode)?a:d(a.parentNode)}function e(a){for(b(a),a=a.firstChild;a;a=a.nextSibling)void 0!==a&&1===a.nodeType&&e(a)}function f(f,g){var h=[],i=function(){var a;return function(){clearTimeout(a),a=setTimeout(function(){h.forEach(e),g(h),h=[]},10)}}();return a(f,function(a){if(!c(a)){b(a);var e=d(a);h.indexOf(e)<0&&h.push(e),i()}})}var g=100,h=!1,i="animationName",j="",k="Webkit Moz O ms Khtml".split(" "),l="",m=document.createElement("div"),n={strictlyNew:!0,timeout:20};if(m.style.animationName&&(h=!0),h===!1)for(var o=0;o<k.length;o++)if(void 0!==m.style[k[o]+"AnimationName"]){l=k[o],i=l+"AnimationName",j="-"+l.toLowerCase()+"-",h=!0;break}var p=function(b){return h&&b.match(/[^{}]/)?(n.strictlyNew&&e(document.body),{every:function(c){return a(b,c)},summary:function(a){return f(b,a)}}):!1};return p.config=function(a){for(var b in a)a.hasOwnProperty(b)&&(n[b]=a[b])},p}();"undefined"!=typeof module&&"undefined"!=typeof module.exports&&(module.exports=insertionQ);
  174.  
  175. 	// Alternative Run to contemplate possible future DOM insertion of password fields through events
  176. 	insertionQ('input[type="password"]').every(addEyeIcon);
  177.  
  178. 	// Key Event to Show/Hide Eye Icons on Ctrl + Alt + P
  179. 	document.body.addEventListener( 'keydown', function(e){
  180. 	    // Ensure event is not null
  181. 		e = e || window.event;
  182. 		if ( (e.which == 80 || e.keyCode == 80) && e.ctrlKey && e.altKey ) {
  183. 			changeIconState();
  184. 		}
  185. 		if ( e.ctrlKey ){
  186. 			ctrlKey = true;
  187. 		}
  188. 	});
  189. 	document.body.addEventListener( 'keyup', function(e){
  190. 		ctrlKey = false;
  191. 	});
  192.  
  193. })();