Back to Guides

Building a Web Extension

Using solveOCR securely within a browser extension using the Shadow DOM and exact positioning.

Security First

CRITICAL: Never bundle your sk-live secret keys directly into the `content_scripts.js` of your Web Extension, or they will be easily exposed via DevTools!

Always route Web Extension frontend requests through your own secure backend proxy, or use short-lived JWT scoped keys generated by your server for specific users.

Coordinate Extraction

When a user selects a region of an image on the screen, capture the exact screen coordinates using an invisible overlay div. Pass those cropped Base64 canvas fragments directly to our API.

Snippet

// Capture via canvas
const blob = await canvas.convertToBlob();

// Route through secure backend
fetch('https://your-api.com/proxy/ocr', {
  method: 'POST',
  body: blob
});
Content-Length: 0