skills.rest
webmaxru
webmaxruCOMMUNITY
Explore all skills by this author →
Website𝕏@webmaxruGitHub

translator-api

Implement and debug browser Translator API integrations in JavaScript or TypeScript web apps.

46|4|Updated Mar 14, 2026
Search Tags:#translation#i18n#web-development#on-device#translator#browser-api
One-click install
npx skills add https://github.com/webmaxru/agent-skills --skill translator-api-webmaxru
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: translator-api
Source: https://github.com/webmaxru/agent-skills/tree/main/skills/translator-api
Command: npx skills add https://github.com/webmaxru/agent-skills --skill translator-api-webmaxru

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

Helps developers implement and debug browser Translator API integrations in JavaScript or TypeScript web apps, covering discovery, session management, translation calls, and policy handling for on-device translation.

Core Features & Use Cases

  • Discovery & viability checks: verifies browser support, secure context, and per-language-pair availability using Translator.availability() before creating sessions.
  • Session lifecycle & translation: uses Translator.create() to establish a fixed language-pair session, then translate(), translateStreaming(), and measureInputUsage() for efficient translation workflows with optional download progress monitoring.
  • Security & policy compliance: enforces secure context, applies proper permissions-policy handling, and supports cross-origin iframe delegation with allow="translator", plus graceful fallbacks when APIs are unavailable.

Quick Start

Integrate and test browser translation by checking availability for a language pair, creating a session, and translating a sample sentence.

Frequently Asked Questions about translator-api

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check browser Translator API availability for a specific language pair?▼

Browser Translator API availability is checked using the Translator.availability() method before creating sessions. This verifies language-pair support and secure context to ensure on-device translation is viable in your web app.

How do I implement on-device translation in JavaScript?▼

On-device translation is implemented by creating a fixed language-pair session with Translator.create(), then calling translate() or translateStreaming(). This workflow handles text translation directly in the browser without server requests.

Does the browser Translator API require a secure context?▼

Yes, the browser Translator API requires a secure context. Implementations must enforce secure context checks, apply permissions-policy handling, and support cross-origin iframe delegation using allow="translator" for proper security compliance.

How do I handle model downloads when using on-device translation?▼

Model download UX during on-device translation is handled by monitoring download progress during Translator.create() session establishment. You can measure input usage with measureInputUsage() to maintain efficient translation workflows.

Can I use translateStreaming() for real-time browser translation?▼

Yes, translateStreaming() enables real-time browser translation by processing continuous text streams. It is called after establishing a fixed language-pair session via Translator.create() to provide live translation workflows.

What permissions-policy is needed for cross-origin iframe translation?▼

Cross-origin iframe translation requires the allow="translator" permissions-policy. This delegates on-device translation capabilities securely while enforcing secure context and providing graceful fallbacks when APIs are unavailable.

Related Skills

Explore More Software Engineering Skills→
GoogleChromeGoogleChrome
926

baseline-status

Verifies web platform feature Browser Baseline statuses and outputs JSON for frontend workflows.

Official
Basic
gooseworks-aigooseworks-ai
6

create-localized-video-variants

Create localized video variants with translated captions, text, and voiceover.

Official
Intermediate
jiaiyanjiaiyan
8

naive-ui-i18n

Configure Naive UI internationalization with NConfigProvider and createLocale for Vue 3 apps.

Community
Advanced
amedinaamedina

Translator API

Translate text and detect languages on-device using Chrome's built-in AI APIs.

Community
Intermediate