With Manifest v2 sun-setting, I had been finally pushed to finish long postponed rewrite of the Eye Dropper.

New features

You can head directly to full Change Log but most important changes are:

• Copy to clipboard by default as it caused a lot of confusion in past.
• Drag & Drop organization of colors in a Palette. You can change color position or put them into trash bin.
• Improved color picker with possibility to use not only hex color, but also individual components of RGB, HSL and HSV.
• Possibility to enter color manually.
• JSON export
• Quick palette wipe with options to wipe it clean or populate it with default or random colors.

I would like to write more about individual features and design decisions, but it would have to wait.

The story of rewrite

I had the rewrite almost ready two or three times in the past. But I always hit some obstacle which took all the joy out of it.

It is probably good to repeat, that I'm only developer of Eye Dropper and I'm working on it in my spare time as a hobby. Because of that, I like to experiment and learn new things when working on it.

Attempt 1: Rescript

About three years ago, I wanted to try ReasonML only to discover its "web part" had been split into Rescript. It hand been real fun at start, but more and more I got stuck on features which hadn't been yet implemented.

But what was probably main reason why I decided to abandon it was that my original idea was to use some nice functional language as kind of jack of all trades language. But with Rescript split from ReasonML, it was just another Typescript. Yes, it had amazing ideas, it seems much cleaner, but for my use cases, it wasn't so much better than Typescript to justify the work.

Final straw had been that I started experimenting with Qwik, which is unfortunately still impossible to use in Rescript.

Probably best thing Rescript taught me had been Pattern matching which I really miss as core feature in Typescript. Fortunately there is ts-pattern.

Another great thing Rescript brought me had been @ctrl/tinycolor, which - at the time - had been only color library with Rescript bindings. ait allowed me to simplify the color handling in all ED components.

Switch to Tailwind

Not really related to Rescript, but with that first attempt, I also switched to Tailwind CSS. Previous version of ED had been written with Tachyons, which are still cool, but I like Tailwind little more. Main reason is probably integrated support in many frameworks I tried.

Attempt 2: Qwik

The second attempt had been this January when I tried to re-implement popup code in Qwik.

Qwik has been my favorite web framework for some time now. Getting prototype ready was really fast but then I tried to build the code and realized that what seemed simple really isn't.

It got complicated with all inner workings of Vite, Qwik SPA building with routing etc. I still thing it can be done, but at the moment not only I couldn't wrap my head it but I also want to work on the extension, not messing with build. So I put the code into a drawer and forgot about it.

Attempt 3: React?

This June, I finally got useful report from someone who was affected by "it doesn't work" bug. And at the same time, I saw that Google is finally sun-setting Manifest v2. So I sprung into action.

I had been so desperate, that I decided to choose boring way and rewrite the ED in React. I don't like React much, but there are tons of resources and I knew it would be working, there are many extensions written in it.

Vite Plugin Web Extension

With a huge luck, first "starter kit" I bumped into was amazing Vite Plugin Web Extension. It solves everything I don't want to deal with it.

So I typed pnpm create vite-plugin-web-extension hit Enter and after couple seconds of downloading something, an innocent question appeared. ? Template

Wow. Typescript I expected, as I had been looking only for projects supporting it, but what is those other options? There is template not only for react-ts but also vue-ts and svelte-ts? Vue isn't my cup of a coffee, but Svelte? That was one of favorites when choosing web framework I'll be using couple years ago. It lost to Qwik that time but for this project? It must be better than React, mustn't it?

Svelte

Long story short, two evenings later, I had 80 % of code rewritten in Svelte with working build and everything. Remaining 20 % took almost a month of course. But most of it were problems I would have to deal with anyway.

Previous decision proven to be a tremendous time saver. Thanks to Tailwind I could use most component parts written for Qwik. Thanks to TinyColor, I could use most of Rescript code I wrote in the first rewrite attempt.

Btw. it got some using to but I realized that I really prefer Svelte style to JSX in Qwik. Svelte components seems much easier to grasp, write and use. I'm not going to switch to Svelte for webs (yet?), but still.

If you are Svelte pro and have too much free time, feel free to browse ED code and suggest improvements.

New storage format

I decided to go completely different way this time. Old ED versions had all settings, palette code etc in one big object, which get saved to synchronized store when something changed.

With Manifest v3, there is no longer guarantee that extension "background" script will be available all the time. It might get killed any time Chrome decides it is good time.

With that in mind I decided that I'll be simply storing everything in synced storage immediately and also read it from there. It proved to be even better decision when I discovered how Svelte stores works.

I did my best to handle conversion from old format so your history should be save.

More to come

Most important thing about all this rewrite is that now I can finally focus on new features.

Next big task ahead is improvement of web picker code and new features for it.