tl;dr

I am trying to make the extension more convenient for the user and boost the performance of AI tasks. And switch to a new framework for a better development cycle
(https://crxjs.dev is really bad; don’t use that currently)

Why

Because I recently found a manga page that has the manga that I want to read, I tried to make the extension more useful by adding a domain system (URL matching system ) which will automatically translate pages that match the URL.

CORS problem

This is not the main section, but I want to tell you about why this extension has some limitations with strictly page.
Due to the original idea, focus on local first, but Chrome’s security design mainly blocks other processes from accessing image data of pages that have a config to block ( their CORS config ), so our extension will unable to run on that page, also i will work on a local backend to handle this problem (in a good situation)

#Domain system design

This design is quite weird because that firstly working on all page start will that domain. Then I used that, and all image include thumnail will be translated, and so i switched to a regex design, which will be more dynamic for users

Extension page

I am trying to make them easier to use, so I designed a simple ui ( tell AI to do that ). That will be more useful in the future ( currently, that just helps me in debug stage )

Background change

Because of real-time (auto-translation mode ), we need to switch from using single mode to batch mode of the OCR library. If we continue to use the legacy solution that will make the user’s computer overloaded and cause a huge delay ( and error rate ). So we are switching to this solution. Also, is the batching solution for the background ( manager process, orchestrator)

The background process will collect tasks from the content.js process in all tabs and then send them to the OCR and translate process ( batchingly, like 5 images per step, in about 80ms if no image is in the queue to keep offscreen work)

build problem

Vite builds to modular JavaScript code. But browsers don’t like that due to backward compatibility, so they reject it.

next step

I will migrating to mordern framework (https://wxt.dev/), which will help me in the build process (I have a build problem with the module webpack of Vite, sadly )

After many efforts, I can OCR the image locally. (pic. 1 )

Tech choosing

Firstly, I need to find a way to help me use the npm ecosystem. So I know that I can use Vite ( because Chrome just cares about how you define config in manifest, other files are not important ). but their don’t support live-reload, which makes me feel very bad in development. I hope I can use https://crxjs.dev/guide/installation/create-crxjs/ for this.

UI and UX development

Then I think that I want to build up some menu in the extension page, which will make my extension very modern. But I think about that, if I try to translate just one image, how can the user translate just one image? Because of that, I decided to build up a context menu that allows users to choose what they want to translate and just leave the extension page there with hello text. (pic. 2 and pic. 3 )

CORS problem

Then I need to solve some problem with CORS in Chrome ( legendary web development problem ). They won’t allow me to just read the image tag, so I need to send the image URL to the background

Context problem

But background doesn’t have the context (like document.createElement or canvas, which will be able to boost my OCR speed ) which normal HTML page has, so I need to create an offscreen. Then the CORS problem comes back, and I need to build up some indexed storage solution to fix this. Thanks to Chrome.

TL;DR

And after their cors problem, isolation problem, chrome problem i here to present you the image that has the box showing you text that you see 😢😢