Need Help with My Live Transcription Browser Extension – Not Working

Hello everyone,

I've been working on a browser extension that should live transcribe any video playing in the browser using the Speech Recognition API. However, I’m running into an issue where it’s not working as expected—the transcription is not appearing, and I’m unsure why.

What I’ve Done So Far:
Manifest.json: I’ve set up the permissions to capture audio and run the necessary scripts.
Background.js: The background script is responsible for capturing audio using chrome.tabCapture.
ContentScript.js: I’m using the Web Speech API (SpeechRecognition) to process the captured audio and transcribe it.
Popup.js: The popup is supposed to display the live transcription.
I’ve tested the extension on both Brave and Chrome browsers, but the transcription still isn’t working.
Key Files:
Manifest.json

{
  "manifest_version": 3,
  "name": "Live Transcription Extension",
  "version": "1.0",
  "description": "A browser extension for live transcription",
  "permissions": [
    "audioCapture",
    "activeTab",
    "storage",
    "tabCapture",
    "microphone"
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["contentScript.js"]
    }
  ],
  "host_permissions": ["<all_urls>"]
}
</all_urls></all_urls>

background.js

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === "start_transcription") {
    chrome.tabCapture.capture({ audio: true, video: false }, (stream) => {
      if (chrome.runtime.lastError || !stream) {
        console.error("Error capturing audio: ", chrome.runtime.lastError);
        sendResponse({ error: "Failed to capture audio" });
        return;
      }

      sendResponse({ stream });
    });
    return true;
  }
});

ContentScript.js

const startSpeechRecognition = () => {
  const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  if (!SpeechRecognition) {
    console.error("Speech Recognition API not supported.");
    return;
  }

  const recognition = new SpeechRecognition();
  recognition.continuous = true;
  recognition.interimResults = true;
  recognition.lang = "en-US";

  recognition.onresult = (event) => {
    let finalTranscript = '';
    for (let i = event.resultIndex; i  {
    console.error("Speech recognition error: ", event.error);
  };

  recognition.start();
};

startSpeechRecognition();

Popup.js

chrome.runtime.onMessage.addListener((message) => {
  if (message.action === 'transcribe') {
    const transcriptionDiv = document.getElementById('transcription');
    transcriptionDiv.innerText += ` ${message.text}`;
  }
});

Popup.html

  <title>Live Transcription</title>


  <h1 id="Live-Transcription">Live Transcription</h1>
  <div id="transcription">
    Transcription will appear here...
  </div>
  <script src="popup.js"></script>

The Problem:
The extension loads fine, but nothing happens when I try to transcribe a video.
No transcription appears in the popup, and I don’t see any obvious errors in the Chrome console.
I also tried running the extension on Brave, and I still get the same results.
What I’ve Tried:
Checked the SpeechRecognition API on the browser—seems to be supported.
Granted microphone permissions to the extension.
Confirmed that the background script captures the audio, but it doesn’t seem to trigger transcription.
Tried testing the extension locally and on production, but it doesn’t make a difference.
Possible Issues:
Microphone permissions: Is there something wrong with how I’m requesting permissions for audio capture?
SpeechRecognition API: Could there be compatibility issues with the browser, or is something blocking the speech recognition?
Transcription handling: I’m unsure if the onresult event in the SpeechRecognition process is firing correctly or if the message isn’t getting to the popup.
Any help or advice would be greatly appreciated! I'm stuck on this for quite a while and would love to get this working.

Thanks in advance!

The above is the detailed content of Need Help with My Live Transcription Browser Extension – Not Working. For more information, please follow other related articles on the PHP Chinese website!