Greasemonkey Hacks

Hack #31. Identify Password Fields

Decorate password fields with a special background pattern.

This hack improves the usability of forms by highlighting password fields with a special background. This makes it faster to fill out forms, because you don't need to worry about accidentally typing your password in the wrong box in clear text.

The script makes password fields less legible, but in practice, this doesn't matter much, because what you type is displayed only as asterisks or dots anyway.

The Code

This user script runs on all pages. It inserts a CSS rule that decorates any input field with class GM_PasswordField. The CSS rule sets a background image, encoded as a data: URL. The image is a 4 x 4 image, which is then tiled to fill the password input box. The resulting pattern alternates black, white, and transparent lines, so that it is recognizable on any background color. Finally, we use an XPath query to find all password fields and set their class attributes to link them to the special CSS rule.

Save the following user script as identify-password-fields.user.js:

	// ==UserScript==
	// @name		 Identify Password Fields
	// @namespace	 http://blog.monstuff.com/archives/cat_greasemonkey.html
	// @description	 Decorates password fields with a background pattern
	// @include		 *
	// ==/UserScript==
	 
	// based on code by Julien Couvreur
	// and included here with his gracious permission

	// add a CSS rule var rule = "input.GM_PasswordField { background-image: url(data:image/gif,"+ "GIF89a%04%00%04%00%B3%00%00%FF%FF%FF%FF%FF%00%FF%00%FF%FF%00%00%00%FF"+ ...