Translate Images in Manga In-Page "Extension" and "Program"

Watch the Demo

I created this extension for personal use, but feel free to take this idea and improve upon it. The project was built entirely using ChatGPT, and while some of the code may be unnecessary, I decided to leave it as is for now. Future updates will refine and optimize the code further.

I have made two versions: 'Translate-image-manga-In-Page,' which is an extension that requires the Google API and comes with costs, and 'ghostmanga.py,' which is a script with a UI that's free and easy to use. The details are below. I created them because they share the same code structure but are used differently. I hope everyone will like them.

Working Principle

This Chrome extension finds the URLs of images on a page using a specified class, performs OCR (Optical Character Recognition) on those images, translates the text, and replaces the original images with new, translated versions.

Requirements

Google Chrome
Go to API & Services > Library in the Google Cloud Console.
- Search for Vision API and click to enable it.
fter enabling the APIs, go to API & Services > Credentials to create your API key:
- Click on Create Credentials.
- Select API Key.
- Copy the API Key and save it securely.
Ensure all images have the same class. This extension cannot be used on websites that use blob images and Protected websites.

Download & Setup

Download the extension
Unzip the downloaded file: Translate-image-manga-In-Page-main.zip

Installation Steps

Open Chrome and go to chrome://extensions/
Enable Developer Mode
Cilck Load unpacked
Select Folder Translate-image-manga-In-Page-main
Done! Your extension is ready to use.

If you want the extension to not disappear when the folder is deleted or moved:

Go to Translate-image-manga-In-Page folder
Compress all the files inside, including any subfolders, into a .zip file.
Drag the .zip file into chrome://extensions/
Done.

Version Updates

v1.4: Will add free OCR but it is not available yet.
v1.3: Upgraded the Merge mode for improved translation accuracy, but there are still issues with missing text detection and disorganized word groups when applied to images with tightly packed text. (I have fixed these issues.)
v1.2: Added a new UI and CSS Selector options.
v1.1: Implemented image detection on web pages.

CSS Selector Guide

Below are common CSS selectors and their abbreviations, which the extension uses to find and manipulate images:

Full Form (HTML Attribute)	Abbreviation (CSS Selector)
`[class="image-container"]`	`.image-container`
`[id="main-header"]`	`#main-header`
`[rel="stylesheet"]`	`link[rel="stylesheet"]`
`[href="https://example.com"]`	`a[href="https://example.com"]`
`[type="submit"]`	`input[type="submit"]`
`[role="navigation"]`	`[role="navigation"]`
`[data-toggle="dropdown"]`	`[data-toggle="dropdown"]`
`[alt="Image description"]`	`img[alt="Image description"]`
`[src^="https://"]`	`img[src^="https://"]`
`[name="email"]`	`input[name="email"]`
`[value="Search"]`	`input[value="Search"]`
`[class="image-container"] > img`	`.image-container > img`
`[class="button primary"] > span`	`.button.primary > span`
`div[class="content"] p`	`div.content p`
`[class="nav"] ul > li[class="nav-item"]`	`.nav ul > li.nav-item`
`[class="menu-item"] a:hover`	`.menu-item a:hover`
`[class="form-group"] input[type="text"]`	`.form-group input[type="text"]`
`[class="gallery"] div[class="gallery-item"]`	`.gallery div.gallery-item`