DEV Community

Cover image for How do I create my first Chrome extension using TypeScript - PART 1
Hank Chiu
Hank Chiu

Posted on

2

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!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free