Comment Critters

Web Extension | Solo | 2017

Comment Critters is a small project I took on over winter break, 2017. It's a web extension that replaces HTML comments on web pages with cute critters that show you the comments when you hover over.

Comment Critters in action! Hovering over a critter shows comments.

The project gave me an introduction to Mozilla's Web Extensions API, and Chrome's extensions API. I made the characters in illustrator, and built the extension using HTML, CSS, and JS (with Jquery), along with the Web Extensions API. I learned how to work with JS script injection, and got my feet wet with HTML parsing with Regex and JS. Next steps for this project are writing a script to pretty up the speech bubbles (instead of just tooltips), shifting from regex parsing to a HTML parser (since some sites with irregular structures can confuse and break the parser I built), add a toggle to turn it on and off, and finally, officially release it on more browsers.

If you're on mobile, try them out here!

The extension is currently live on the Firefox store here, and the Chrome store here. You can check out all the source files on Github here.