I’m building a Chrome extension that performs Automatic Speech Recognition (ASR) on audio data. The transcription happens in chunks, and I want to send progress updates to the content script while transcription is still in progress. However, I’ve encountered an issue where the updates only seem to be sent after the entire transcription process finishes, rather than in real-time as I would like.

What I’ve Tried:

• Atomics: Tried using shared memory and atomic operations, but this didn’t help with sequential message passing.
• setTimeout: Introduced small delays between update sends using setTimeout, but it still doesn’t send updates sequentially during the transcription process.
• Promisifying chrome.tabs.sendMessage: I attempted to use promises to ensure sequential message sending, but updates still get queued and sent after the transcription is complete.
• Shared Array Buffers: Tried using shared buffers to improve message passing, but this also hasn’t worked.

I want to update the content script with each chunk of transcribed text while it’s still processing the audio. However, it seems like the message is only sent after the entire transcription finishes, likely because of the synchronous nature of chrome.tabs.sendMessage. I’ve also tried promisifying and using async/await, but I still cannot achieve sequential message passing.

Code Example:

const sendMessageToContentScript = (message) => {
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    if (tabs.length === 0) {
      console.warn("No active tab found.");
      return;
    }
    const activeTabId = tabs[0].id;
    chrome.tabs.sendMessage(activeTabId, message, (response) => {
      if (chrome.runtime.lastError) {
        console.warn("Error sending message:", chrome.runtime.lastError.message);
      } else {
        console.log("Response from content script:", response);
      }
    });
  });
};

const callback_function = (item) => {
  let last = chunks_to_process[chunks_to_process.length - 1];
  last.tokens = [...item[0].output_token_ids];
  
  let data = transcriber.tokenizer._decode_asr(chunks_to_process, {
    time_precision: time_precision,
    return_timestamps: true,
    force_full_sequences: false,
  });

  console.info(data);

  sendMessageToContentScript({
    status: "update",
    task: "automatic-speech-recognition",
    data: data,
  });

  return data;
};

What Happens:

• The updates are queued and only sent after the transcription is complete.
• The real-time update sending does not occur as expected, and updates are only delivered once the entire transcription process has finished.
• The chrome.tabs.sendMessage calls are not sent sequentially as the transcription progresses but rather after the full process completes.

What I’m Trying to Achieve:

• Send updates to the content script in real-time as transcription chunks are processed.
• Ensure that chrome.tabs.sendMessage is executed sequentially and messages are sent after each chunk is processed, not all at once after the transcription is finished.
• My code is available here: https://github.com/yashrajbharti/captions-on-the-fly