RightClickMagic Focus: A Unified Productivity Workspace for Chrome

Project overview

RightClickMagic Focus is a productivity-focused Chrome extension designed and developed by Datagrape. It brings colour extraction, text recognition, translation and clipboard management together inside one streamlined browser side panel.

The product helps designers, developers, researchers, content professionals and distributed teams capture and reuse information without repeatedly switching between browser tabs or external applications.

Project snapshot

• Client/Product: RightClickMagic Focus
• Delivered by: Datagrape
• Solution type: Chrome Extension and SaaS backend
• Platform: Google Chrome, Render and PostgreSQL
• Industry: Productivity and browser tools
• Business model: Free, Pro and Team plans
• Backend: Node.js
• Database: PostgreSQL
• Payments: Razorpay prepaid payments
• Authentication: Email/password and Google Sign-In

The challenge

Web professionals frequently use separate tools to inspect webpage colours, recognise text from images, translate content and manage copied information. This creates unnecessary context switching, fragmented workflows and repeated manual effort.

The objective was to create one browser-based workspace that operates beside the active webpage, supports context-menu actions, processes webpages and images, supports individuals and teams, enforces sustainable subscription limits, protects sensitive information and complies with Chrome Manifest V3 requirements.

The solution

Datagrape designed and developed RightClickMagic Focus as a permission-aware Chrome side-panel extension supported by a secure Node.js and PostgreSQL backend. Users can start an action from the side panel or webpage context menu, review the result and immediately copy, translate, download or save it.

Four tools in one workspace

Colour extraction

Users can identify and organise colours from complete webpages, the visible browser screen, selected areas and uploaded images. Results include visual swatches and colour codes and can be exported as JSON, CSV or TXT.

Text recognition

The OCR workflow recognises text from selected webpage areas, right-clicked images, uploads and visible screen captures. Recognised text can be copied, translated or downloaded.

Instant translation

The translation workspace accepts manually entered text, selected webpage text and OCR-generated text. Source-language detection is automatic, and requests pass through the backend so provider credentials are not exposed inside the extension.

Clipboard history

The clipboard workspace retains recently copied text and colours so users can review, reuse, delete or clear items without leaving the active webpage.

Team workspaces and plans

The Team plan supports workspace creation, member invitations, seat management, owner and member roles, role changes, invitation revocation, member removal and secure workspace departure.

Free, Pro and Team tiers provide different OCR, translation and clipboard allowances. The backend enforces usage limits so modifying extension code or calling the API directly cannot bypass plan controls.

Payments and authentication

Razorpay prepaid billing covers secure checkout creation, server-side payment verification, plan activation, Team seat selection and invalid-payment handling. Paid access does not automatically renew.

The platform supports email/password registration, Google Sign-In, logout and session management, protected account and Team endpoints, and server-side authorisation checks. Sensitive payment, database and translation credentials remain in the backend environment.

Privacy and security

The architecture avoids sending email addresses, passwords, tokens, OCR text, clipboard contents, selected text, images, payment information or full personal URLs to analytics. Website access is permission-aware rather than permanently granted across every site.

Production controls include Manifest V3 compatibility, restricted mandatory permissions, optional website permissions, backend-only secrets, authenticated routes, Team role validation, request-size controls, Content Security Policy, strict static-file allowlisting, anti-framing, content-type protection, PostgreSQL persistence and generic user-facing errors.

Technical architecture

1. Chrome Extension: handles webpage actions, capture workflows and the side-panel interface.
2. Node.js backend on Render: manages authentication, translation, subscriptions, usage enforcement, billing verification and Team operations.
3. PostgreSQL database: stores users, organisations, subscriptions, usage information, invitations and audit-related records.

Engineering challenges

• Preserving the Chrome user gesture while opening the side panel
• Transferring context-menu actions to an already-open panel
• Managing optional website permissions and service-worker cold starts
• Preventing duplicate action execution
• Handling protected Chrome pages gracefully
• Running OCR within Manifest V3 restrictions
• Preventing raw backend HTML errors from reaching the interface
• Enforcing translation allowances on the backend
• Maintaining readable controls across browser and operating-system themes

Outcome

RightClickMagic Focus was delivered as a browser productivity platform with four integrated tools, a focused side-panel experience, context-menu and keyboard-driven workflows, secure cloud translation, Free/Pro/Team usage controls, prepaid payment activation, Team collaboration and a PostgreSQL-backed foundation for future growth.

Technologies used

JavaScript, Node.js, Chrome Extension Manifest V3, Chrome Side Panel API, Chrome Identity API, Chrome Context Menus API, PostgreSQL, Render, Google Cloud Translation, Google OAuth, Razorpay, HTML5, CSS3 and REST APIs.

Datagrape's contribution

Datagrape managed product architecture, Chrome extension and backend development, PostgreSQL integration, authentication, translation, payments, subscriptions, usage limits, Team workspaces, security hardening, UI/UX, landing-page development, privacy implementation, Chrome Web Store preparation, testing and deployment support.

Explore the product

Product website: https://rightclickmagic-backend.onrender.com/
Chrome Web Store: https://chromewebstore.google.com/detail/rightclickmagic-focus/peklimhichehjelcoilddjgclkaigcni