Chrome拡張機能上で、音声文字起こしの機能を提供するにはどのような方法がありますか?

以下では、Manifest V3 (MV3) ベースの Chrome 拡張機能に文字起こし(音声→テキスト)機能を実装する代表的な 3 つのアプローチと、実装時の注意点/最小構成サンプルをまとめます。


1. ブラウザ内蔵エンジン(Web Speech API)

特徴

MV3 での実装のポイント

  1. Service Worker からは直接マイクを開けないため、 chrome.offscreen.createDocument()オフスクリーンドキュメントを生成し、その中で SpeechRecognition を実行する。(developer.chrome.com)
  2. マニフェストには特別なパーミッションは不要だが、ユーザ初回実行時にマイク許可ダイアログが出る。
  3. onend で自動停止するため、連続認識させる場合は再帰的に start() し直す。
// manifest.json(抜粋)
{
  "manifest_version": 3,
  "name": "Mic Dictation",
  "version": "1.0.0",
  "background": { "service_worker": "bg.js" },
  "permissions": ["offscreen"]
}

// bg.js(2スペースインデント)
chrome.action.onClicked.addListener(async () => {
  await chrome.offscreen.createDocument({
    url: 'offscreen.html',
    reasons: ['USER_MEDIA'],
    justification: 'Microphone dictation'
  });
  chrome.runtime.sendMessage({ type: 'start-mic' });
});

<!-- offscreen.html -->
<script>
  async function run() {
    const rec = new (window.SpeechRecognition || webkitSpeechRecognition)();
    rec.lang = 'ja-JP';
    rec.interimResults = true;
    rec.onresult = e => {
      const txt = Array.from(e.results)
        .map(r => r[0].transcript).join('');
      chrome.runtime.sendMessage({ type: 'transcript', txt });
    };
    rec.onend = () => rec.start();  // 連続認識
    rec.start();
  }
  run();
</script>

メリット:キー管理が不要/実装が最小限。 制限:誤認識・タイムアウト・Chrome のみ動作という制約あり。(stackoverflow.com)


2. タブ/システム音声をクラウド STT(例: OpenAI Whisper API)へ送信

典型的ユースケース