Undefined Range

The Pixel Perfect Firefox extension has not been working correctly for the past several Firefox releases for me. I've been looking for a suitable replacement and the closest is WebDeveloper Image Overlay for Chrome. Neither is in active development, as far as I can tell, and they have enough minor inconveniences that I created a custom solution.

Refinements

Problem: Chrome plugin cannot use images from local file system directly
Solution: Drag and drop the image into the web browser

Problem: click several times into the UI to toggle image overlay on/off
Solution: Press a key to instantly toggle

Problem: image overlay obscures webpage elements from right-click -> "Inspect Element"
Solution: Fixed via CSS (thanks ntoniazzi)

Problem: UI for fine tuning image overlay position is through mouse clicks
Solution: keyboard shortcuts to move image overlay

Downsides to my solution as it is now:

• must add to every website project manually (though only a few lines)
• auto saves image for later use but only the latest one per domain
• possible key binding conflicts (though keys are easily changeable)
• no file open dialog box, only drag/drop support
• only works in the new versions of Firefox and Chrome (maybe eventually in Safari 6 and IE10?)

This is a barebones plugin made for my own needs. It's only 130 lines of basic javascript with nothing esoteric other than using HTML5 features. Easily patchable/forkable. Please take a look at the project hosted at Github.