tl;dr

WXT.js: Refactored the extension into smaller, more maintainable modules.
Context Menu: Inject content scripts on pages to reliably detect clicked elements — a privacy/resource trade-off.
Overlay: Reworked image overlays to be more independent from the website’s DOM and avoid rendering on invisible images.
SPA Support: Added DOM-change detection for React-style navigation, at the cost of some extra resource usage.
PaddleOCR: Still fighting text-box grouping 😭. Current grouping is imperfect, and we’re considering a better OCR model.

WXT.js

This is really easy. Almost everything is guided on their introduction page, so I need to follow it. Also, I need to refactor code from 1 huge file into many smaller files, which helps me maintain this more easily

better context menu ( and first trade-off)

Uh, due to the main problem that extensions don’t know which one was clicked. So I need to trade off user privacy with convenience. From now on, extensions will inject a content script into every page that you open, including enabling and disabling auto-translation

better overlay box

Over time, the extension displays an image by adding an extension element to a div, which is the image tag’s parent. But now we switch the approach to create a separate div that does not depend ( or depends less) on how the page works. Also, we need to check whether the current image displays are visible, or we will not render an overlay box for them.

Add case for SPA web

For frameworks like React.js, navigation is often handled as a Single-Page Application (SPA) update rather than a traditional page reload. When the user navigates to a different page, the application may update the DOM and the URL in the browser without triggering a full page refresh.Because of this, the extension cannot rely only on events such as page reloads or tab switches to detect when it needs to update its state. We therefore need to listen for DOM changes so the extension can detect when the application has rendered new content and reload or reinitialize its functionality accordingly.

This will consume more resources, but we are unable to measure them

Paddle-OCR and grouping text box (I hate this; why yolo )

This is the very unsolved problem that may annoy the user and me. The problem is paddle-ocr working like this, meaning it will separate the text bubble into smaller parts, which will make translation crazy. Currently, we are adding grouping to solve the issue of text on the same line, but the solution is not ready yet. Also, we are considering switching models for a better experience