CHROME EXTENSION · PRODUCTIVITY AI

versatile-ai-tooltip

A seamless in-browser text assistant that activates upon text selection to summarize, translate, and explain content.

Manifest

Chrome MV3

Privacy

Local Storage Keys

Shadow DOM Tooltip

Latency

Instant Activation

Executive TL;DR — Engineering Brief

Versatile_AI_Tooltip is an ergonomic Chrome extension built by Alex Santos. Designed with Manifest V3 and isolated Shadow DOM styles, it provides non-intrusive AI text enhancement directly inside web pages.

DIAGRAM & WORKFLOW

Extension Lifecycle & Content Script Isolation

Isolated Shadow DOM injection, background service worker communication, and secure credential storage.

DETAILED ENGINEERING

Core Technical Pillars

Design choices, architectural patterns, and engineering decisions implemented for extreme reliability and developer experience.

Shadow DOM Visual Encapsulation

Zero CSS collisions with host page stylesheets

Renders the interactive tooltip inside a closed Shadow Root, guaranteeing consistent styling regardless of the host website's CSS rules.

Manifest V3 Compliant Architecture

Modern service worker lifecycle with lightweight memory footprint

Complies strictly with Google Chrome's Manifest V3 security standards, using ephemeral background workers that sleep when idle.

Multi-Task Action Presets

Summarize, translate, simplify jargon, and fix grammar in one click

Includes pre-configured ergonomic actions designed for speed, alongside custom prompt input fields.

Bring Your Own API Key (BYOK)

Full privacy; your credentials and queries never pass through third-party servers

Stores API credentials locally in Chrome's encrypted sync storage, dispatching requests directly from the client to the AI provider.

CODE IN ACTION

Content Script Selection Listener

Real-world usage, terminal configuration, and technical integration commands.

Terminal Example SHELL

// Listen for user text selections
document.addEventListener('mouseup', (event) => {
  const selectedText = window.getSelection().toString().trim();
  if (selectedText.length > 2) {
    showTooltipAtCoords(event.pageX, event.pageY, selectedText);
  } else {
    hideTooltip();
  }
});

QUESTIONS & ANSWERS

Technical Frequently Asked Questions

Key clarifications regarding licensing, compatibility, deployment, and security.

Which browsers are supported?

Google Chrome, Microsoft Edge, Brave, and other Chromium-based browsers.

Does the extension track my browsing history?

No. The extension runs purely client-side and only inspects text that you explicitly highlight.

Can I customize the keyboard shortcuts?

Yes, via Chrome's native chrome://extensions/shortcuts settings page.

Which AI models can be used?

OpenAI GPT-4o-mini, Google Gemini, and OpenAI-compatible endpoints.