LangShift

LangShift is a Manifest V3 Chrome extension that translates text from a selected part of a web page.

It captures the selected area, reads it with Tesseract OCR, then translates the extracted text with Chrome's on-device Translator API.

Requirements

• Desktop Google Chrome 138 or later.
• pnpm 11.13.1 or later.
• An internet connection the first time Chrome downloads a translation language pack or Tesseract OCR assets.

The Translator API is not available on mobile Chrome or non-Chrome browsers. Chrome only supports a defined set of language pairs; LangShift reports unsupported pairs before translating.

Install for development

pnpm install
pnpm run build

Then load the extension:

1. Open chrome://extensions.
2. Enable Developer mode.
3. Select Load unpacked.
4. Choose this project's dist directory.
5. Reload the extension from the same page after each new build.

Use

1. Open an http or https page and click the LangShift extension icon.
2. Click the selection button, then drag over the text to translate.
3. Choose the source and target languages. OCR initializes after choosing the source language.
4. Click the translate button.
5. On first use of a language pair, wait for Chrome to download its translation model. Progress appears in a toast.

The recognised and translated text appears in the output panel.

Commands

Command	Purpose
pnpm install	Install the locked dependencies.
pnpm run build	Create the production extension in dist/.
pnpm run dev	Start Vite's development server for UI work.
pnpm run preview	Serve the latest production build locally.

Supported languages

The language list is maintained in src/util/data.js. Each entry needs both:

• A BCP 47 code for Chrome Translator, such as en or zh-Hant.
• A Tesseract language code, such as eng or chi_tra.

Only add a language after confirming that both Chrome Translator and Tesseract support it.

Troubleshooting

Status stays on “running”

Wait up to 90 seconds for OCR initialization or recognition. LangShift returns to idle and shows an error if the OCR request times out. Retry by selecting the source language again.

If the issue persists:

1. Reload the extension in chrome://extensions.
2. Reload the web page and make a new selection.
3. Confirm that the page is http or https, not a Chrome internal page, PDF viewer, or extension page.
4. Open the extension's service-worker and side-panel consoles from chrome://extensions to inspect errors.

“Translator API is unavailable”

Use desktop Google Chrome 138 or newer. The API is not supported by Chrome on mobile or by Firefox, Safari, and other browsers.

A language pair is unsupported

Choose another target language. Chrome's available translation pairs can vary with the installed model and browser version.

OCR quality is poor

Select only the text, avoid low-resolution images, and verify the selected source language. A larger, sharper page zoom usually improves recognition.

Privacy and permissions

LangShift uses:

• activeTab and scripting to add the selection overlay only to the page you explicitly activate.
• sidePanel to show the extension interface.
• Access to http and https pages so its content script can provide the selection UI.

The selected screenshot is processed in the extension for OCR. Translation is performed by Chrome's built-in Translator API; Chrome may download language packs, but the extracted text is not sent to a LangShift server.

Project layout

src/
  background.js       Extension service worker
  content.js          On-page selection overlay
  util/handler.js     Side-panel workflow and OCR messaging
  util/translate.js   Chrome Translator API integration
  util/data.js        OCR and translation language mappings
public/
  manifest.json       Extension manifest
  sandbox.html/js     Sandboxed Tesseract OCR runtime

Contributing

1. Create a branch.
2. Make a focused change.
3. Run pnpm run build.
4. Test by reloading the unpacked dist extension in Chrome.
5. Open a pull request describing the behavior changed and how you tested it.