How do I create my first Chrome extension using TypeScript - PART 1

In this post, I would like to share my journey of creating AnyColor - A Chrome extension that makes you pick up any pixel color from a web page.

Origin

To be honest, there are already many color picker/eyedropper extensions on the Chrome Web Store. Why do I need to create another one?
It's simple: none of them meet my simple requirement - the ability to pick up any color quickly when browsing.
To name a few extensions I have tried:

• Eye Dropper Almost what I need but somehow slow and I don't need the color palette. The UX design could be better.
• ColorPick Eyedropper Similar to the above, not so quick to invoke the picker.
• ColorZilla This is a color picker for DOM elements. No way to pick colors from images on a web page.

Although thousands of users use these extensions, they are just not what I want.

Idea

I realized the main problem of these extensions is UX design and performance.
As a front-end developer, eyedropper from chrome-devtool came into my mind. The neat UX design is already there, all I have to do is to implement it as a Chrome extension, instead of calling devtool on each web page.

Implementation

This is my first time developing a Chrome extension. The official developer guide is clear but the API is not so modern comparing to other google's products. In a word, I implemented using TypeScript, Web Component, and HTML5 Canvas.
I decide to leave the technical details in another post. The source code is public here hankchiutw/any-color.

Conclusion

Publishing tools for developers is fun and interesting. Give it a try (AnyColor) and any feedback is appreciated!
I also wonder how do you use a color picker/eyedropper extensions in your workflow? Share below!