A chrome extension for obsessive compulsive developers who like their web designs pixel perfect.
I have been working on a Chrome extension, which I hope will make our lives a bit easier when it comes to "PSD to HTML" conversion. The extension (tentatively called PixelPerfect) allows you to overlay/onion-skin the static design on a web page so you are not solely relying on the good’ol eye-squinting technique or going back and forth between the static design and Zeplin measurements.
I fished around for an extension that ticked all the boxes but could not find one so developed my own instead. Some cool features implemented here:
- Gulp/grunt/webpack friendly (extension auto restores overlay settings on refresh, even if you close and relaunch the browser window)
- Overlay switching using media queries (add as many screens as you like for mobile, tablet, desktop and in between)
- Ability to offset overlay position
- Ability to add multiple filters on each overlay (opacity, grayscale, blur, etc)
- Non-invasive overlay (so you can still interact with the content e.g. inspect element or hover)
- Sync overlay settings across computers (if you are logged into Chrome)
- Ability to import/export overlay settings (so you can easily switch between different projects)
Just need to add some fancy-pants input validation before I go ahead and submit it to the Chrome store. Feedback and feature requests are welcome.
- Clone the repo locally
- Goto Chrome extensions manager (or type chrome://extensions/ in the address bar)
- Tick Developer mode
- Click on Load unpacked extension... and select the location of the repo.
- Enjoy!
- The extension only supports web pages that are served over http or https. Web pages accessed locally (over a file:/// protocol) are currently not supported. This also holds true for static design URLs over file:///.
- URL and JSON import validations are flaky. The extension will fail silently if you put in invalid values.