skills.rest
missingbulb
missingbulbCOMMUNITY
Explore all skills by this author →
GitHub

web-speech-io

Wire browser speech recognition and text-to-speech APIs into web applications.

Updated Jul 4, 2026
Search Tags:#text-to-speech#speech recognition#chrome extension#mv3#webkitspeechrecognition#chrome.tts#voice io
One-click install
npx skills add https://github.com/missingbulb/CrosswordChat --skill web-speech-io-missingbulb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-speech-io
Source: https://github.com/missingbulb/CrosswordChat/tree/main/.claudinite/shared/packs/web-speech/skills/web-speech-io
Command: npx skills add https://github.com/missingbulb/CrosswordChat --skill web-speech-io-missingbulb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Browser voice I/O is easy to get subtly wrong: recognition APIs only exist in document contexts, speechSynthesis is undefined in MV3 service workers, and live microphone capture survives bfcache freezes unless released on pagehide. This Skill encodes those constraints so voice features work correctly the first time. ## Core Features & Use Cases - Recognition wiring: Add speech-to-text via webkitSpeechRecognition with a feature-detected fallback to the unprefixed SpeechRecognition constructor. - Synthesis wiring: Speak output with chrome.tts from an MV3 service worker or speechSynthesis from a document context, choosing the right API per context. - Lifecycle safety: Release microphone capture (recognizers and getUserMedia tracks) on pagehide so bfcache-frozen pages do not keep the mic live. - Use Case: When adding a voice-controlled feature to a Chrome extension, use this Skill to place recognition in a content script, route speaking through chrome.tts in the service worker, and pass the declared architecture checks. ## Quick Start Wire speech recognition and text-to-speech into my extension following the web-speech-io guidance.

Frequently Asked Questions about web-speech-io

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

FAQPage Schema
How do I add speech recognition to a Chrome extension?▼

Speech recognition via webkitSpeechRecognition requires a document context, so place it in a content script, side panel, popup, or offscreen document rather than the MV3 service worker. Resolve the constructor with globalThis.SpeechRecognition ?? globalThis.webkitSpeechRecognition and gate usage on its availability.

How do I use text-to-speech in an MV3 service worker?▼

Use chrome.tts in the MV3 service worker, which is extension-only and requires the tts permission. speechSynthesis and SpeechSynthesisUtterance live on window and are undefined in a service worker, so reserve them for document contexts.

Why does webkitSpeechRecognition throw a ReferenceError?▼

Chrome exposes recognition only under the webkit prefix, and other contexts may expose neither variant, so the bare prefixed constructor throws where the global is absent. Feature-detect with globalThis.SpeechRecognition ?? globalThis.webkitSpeechRecognition and degrade to a no-op when unavailable.

Why does the microphone stay on after navigating away?▼

A page frozen into the bfcache is suspended, not destroyed, so a live recognizer or getUserMedia stream keeps the microphone active. Add a pagehide listener that aborts the recognizer and stops getUserMedia tracks, since pagehide fires on both unload and bfcache freeze.

Can speechSynthesis run in a service worker?▼

No, speechSynthesis is a window API and is undefined in service workers, so referencing it there silently fails. Speak from the worker with chrome.tts instead, and use speechSynthesis only in document contexts like content scripts or pages.

Related Skills

Explore More Software Engineering Skills→
fanthusfanthus

chrome-extension

Create and modify Chrome extensions with Manifest V3 scaffolding and messaging.

Community
Basic
johnnystefanjohnnystefan

pattern-mediator

Route component interactions through a mediator interface with a notify method.

Community
Intermediate
AncienttwoAncienttwo
407

claude-review

Review code changes with a different model before merging.

Community
Intermediate
harshav167harshav167

speech-recognition

Transcribe live microphone or pre-recorded audio into text using Apple's Speech framework.

Community
Advanced