CORS & Images

How the extension handles cross-origin restrictions to access manga images from any website.

The CORS Problem

Manga images are hosted on different domains than the reader website (e.g., images on cdn.mangasite.net while you browse www.mangareader.com). Browsers block JavaScript from reading pixel data of cross-origin images for security. This would normally prevent the extension from detecting bubbles and cropping text.

The 5-Step Fallback Chain

Manga Translator Z uses a sophisticated fallback chain to get image data regardless of CORS restrictions:

1. Canvas drawImage — Try drawing the already-loaded img element to a canvas. Works if the image is same-origin or has proper CORS headers.
2. Cross-origin reload — Create a new Image with crossOrigin="anonymous". Works if the CDN sends Access-Control-Allow-Origin: * headers.
3. Background script fetch — The service worker fetches the image as base64, bypassing page-level CORS restrictions entirely. This is the most reliable method.
4. Content script fetch — Direct fetch from the content script context.
5. Visible tab screenshot — Captures a screenshot of the visible tab and crops to the image area. Last resort, but always works if the image is visible.

When Images Still Fail

• Lazy-loaded images — Images that haven't loaded yet cannot be captured. Scroll to make them visible first.
• Canvas-rendered readers — Some readers render pages entirely on canvas rather than as img elements. These are not currently supported.
• SVG images — SVG sources are not supported. Only raster image formats (JPEG, PNG, WebP) work.