Javascript 为什么在chrome extension'；中以消息形式发送后未接收到话语对象；谁在发信息？

我正在构建一个文本到语音的chrome扩展，因此我将一个话语对象从popup.js传递到content.js，其中包含用户选择的所有数据，如语音、音调和速率，单击speak按钮后，我将该对象发送到content.js

以下是SpeechSynthesis webAPI的链接：

popup.js：

speakBtn.addEventListener('click', e => {
    const utterance = new SpeechSynthesisUtterance('hello world');
    utterance.voice = selectedVoice;
    utterance.pitch = pitch;
    utterance.rate = rate;
    console.log(utterance);
    chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
        console.log('sent msg')
        chrome.tabs.sendMessage(tabs[0].id, utterance);
    });
})

content.js：

chrome.runtime.onMessage.addListener((message, sender, senderResponse) => {
    console.log('received msg');
    console.log(message);
    utterance = message;
    speak();
});

function speak() {
    if (utterance) {
        synth.speak(utterance);
    }
}

但是当我在content.js中收到消息时，对象不会出现

popup.js中的对象： content.js中的对象： 一个错误也出现了，我不明白。我应该怎么做来解决这个错误呢

谢谢大家!

消息只能传输，因此无法工作。您可能必须在内容脚本中使用合成API。或者，在添加到网页的页面中执行此操作。