Javascript chorme扩展-如何替换用户选择的文本

我正在做一个浏览器扩展。我想获得用户选择，并在用户单击上下文菜单语音后进行翻译。我已经实现了这段代码，但没有按预期工作。我在instagram上进行了测试，似乎正在进入DM输入字段。同样的代码在facebook短信输入或状态文本区中无法正常工作。翻译后如何管理所选文本

background.js

constprocessselection=（信息，选项卡）=>{
axios({
方法：“GET”，
网址：'https://translate.googleapis.com/translate_a/single',
参数：{
客户：“gtx”，
sl:'自动'，
tl:‘恩’，
dt：‘t’，
q:info.selectionText
}
})。然后（（res）=>{
browser.tabs.sendMessage（tab.id，{translation:res.data[0][0][0]}）；
});
}
browser.contextMenus.create({
id:“选择转换”，
标题：“翻译选择”，
上下文：[‘可编辑’，‘选择’]
});
browser.contextMenus.onClicked.addListener（processSelection）；

content-script.js

browser.runtime.onMessage.addListener（（消息）=>{
控制台日志（消息）；
const selectedText=window.getSelection（）；
常量范围=selectedText.getRangeAt（0）；
控制台日志（范围）；
//我尝试使用deleteContents（），但如果不选择节点，它将无法工作
range.selectNodeContents（range.commonAncestorContainer）；
range.deleteContents（）；
//有时，如果未使用selectNodeContents，文本会附加到文本输入/文本区域之外
range.insertNode（document.createTextNode（message.translation））；
});

我还有一个疑问是关于上下文菜单。如果我想在主菜单中添加一些子菜单，我将如何处理单击事件？我想让用户能够使用其他上下文菜单选择目标语言，但不确定如何继续。 谢谢你的帮助