vibecodersph/gemini-nano-chrome-extension-skill

Overview

This skill shows how to build Chrome extensions that use Chrome's built-in on-device AI (Prompt/LanguageModel, Summarization, Translation, Writer) without external APIs. It focuses on practical patterns for detection, session management, streaming vs non-streaming prompts, and integrating AI calls from page contexts. The guidance emphasizes current platform constraints and production-ready fallbacks.

How this skill works

The skill inspects the page-context global API surfaces (primarily self.LanguageModel and fallback window.ai / chrome.ai providers) to detect capabilities and create AI sessions. It demonstrates creating sessions with system prompts, running prompts (streaming and non-streaming), and using specialized APIs for summarization, translation, and assisted writing. It also documents error handling, session lifecycle (create/destroy), and background-to-page communication for contexts where the API is unavailable.

When to use it

• When building Chrome extensions that need on-device text generation or chat features
• When you want local summarization, translation, or writing assistance without external API calls
• When operating in environments with strict privacy or offline requirements
• When you need low-latency responses and can run models on-device
• When developing for Chrome Canary/Dev builds that expose the experimental APIs

Best practices

• Always check API availability and capabilities before calling (LanguageModel.capabilities)
• Run AI calls from page contexts (content scripts, popups) since service workers often lack the API
• Cache and reuse sessions for repeated requests; destroy sessions when finished to free resources
• Prefer streaming for long responses to improve perceived performance and allow progressive UI updates
• Provide graceful fallbacks and UX messaging when models are not available or require download
• Sanitize and robustly parse model outputs (strip markdown, extract JSON, handle malformed JSON)

Example use cases

• Article summarizer extension that summarizes selected text using the Summarization API
• On-page translator that translates highlighted content via the Translation API
• Popup chatbot powered by LanguageModel for quick answers and note drafting
• Writing assistant that suggests or rewrites text using the Writer API
• Background-coordinated flow where the service worker forwards requests to an active page context that runs the AI call