浏览器扩展 - 使用内容脚本用 ajax 响应替换选定的文本

如何解决浏览器扩展 - 使用内容脚本用 ajax 响应替换选定的文本

我正在尝试将消息从后台脚本传递到内容脚本。我的后台脚本将使用用户选择的文本进行 ajax 调用，我想用 ajax 响应替换选定的文本。我有两个问题要解决。第一个问题是我无法使用以下代码将消息从后台脚本传递到内容脚本： 背景.js

const doTranslation = (info,tab) => {
  console.log(info,tab);
  axios({
    method: 'POST',url: 'https://libretranslate.com/translate',data: {
      q: info.selectionText,source: 'es',target: 'en'
    }
  }).then( (res) => {
    console.log(res.data.translatedText);
    browser.tabs.query({active: true,currentwindow: true},(tabs) => {
      browser.tabs.sendMessage(tabs[0].id,{translation: res.data.translatedText});
    });
  });
}

我看到的唯一控制台日志是 Hello from the content-script 而不是 ajax 响应。 第二个问题是关于文本替换。如何用响应替换所选文本？目前我在内容脚本中有此代码

console.log('Hello from the content-script');

browser.runtime.onMessage.addListener( (message) => {
    console.log(message);
});

更新

我发现了问题，我没有声明清单文件的 tabs 权限，这导致了第一个问题，即消息从后台传递到内容脚本。现在我正在尝试使用内容脚本替换文本选择，有什么建议吗？

browser.runtime.onMessage.addListener( (message) => {
    console.log(message);
    const selectedText = window.getSelection();
    console.log(selectedText);
    //replacing here
    selectedText.replace(message);
});