DEV Community

Cover image for I hate WebP files. So I built a Chrome extension to kill them.
opzozi
opzozi

Posted on

I hate WebP files. So I built a Chrome extension to kill them.

Okay, look. I know WebP is technically superior. Smaller file sizes, better compression, Google loves it. Great for the web performance.

But for me? It's a nightmare.

Every time I try to save an image for a presentation or just to share a meme, it saves as .webp. Then I try to open it in an older version of Photoshop? Error. Try to upload it to a CMS? "Invalid file format." Try to send it to a non-tech friend? "I can't open this."

I got tired of googling "online webp to png converter," uploading my files to random shady servers, and hoping for the best.

So, I decided to fix it myself.

The "Rage-Code" Solution

I built a tiny Chrome extension called Simple Image Converter.

It does exactly one thing: adds a "Save Image as PNG" button to your right-click menu.

No "cloud processing." It just grabs the image, converts it locally, and hands you a PNG.

(Update: I also added a "Copy Image as PNG" option to the clipboard, because saving files is sometimes too much effort for a quick Discord paste.)

The Tech Bit (Manifest V3 + Offscreen API)

If you've tried building Chrome extensions lately, you know Manifest V3 can be... let's say, interesting.

Since we can't use background pages with DOM access anymore, I couldn't just throw the image onto a canvas in the background script like in the good old days.

I had to use the chrome.offscreen API. Basically, the extension spins up a hidden HTML document for a split second, draws the WebP image onto a canvas there, converts it to a PNG blob, and sends it back to the download manager.

It sounds complicated, but it keeps everything:

  1. Offline: Your images never leave your machine.
  2. Fast: No server latency.
  3. Private: I don't want your data.

It's Open Source

I just want this problem to go away for everyone else too.

If you also have a burning hatred for WebP files (or just want to see how the Offscreen API works in practice), check it out.

GitHub Repo:
https://github.com/opzozi/simple-image-converter

Chrome Web Store:
https://chromewebstore.google.com/detail/simple-image-converter/clinbfiephmemllcffpddoabnknkaeki

Let me know if it breaks (or if you have a better way to handle the Offscreen API, I'm all ears).

Cheers,
Opzozi

Top comments (0)