如何在Firefox扩展中替换输入元素内的选中文本？

核心问题在于后台脚本无法直接操作页面DOM，必须通过内容脚本（Content Script）完成页面文本的替换操作。以下是具体实现步骤：

1. 修改后台脚本（发送替换指令） #

在你现有的右键菜单监听逻辑中，添加向当前标签页内容脚本发送消息的代码，传递需要替换的目标文本：

browser.contextMenus.onClicked.addListener((info, tab) => {
  const optionSelect = info.menuItemId;         
  const option = optionSelected(optionSelect);   // 修正原代码拼写错误：optionSeleted → optionSelected
  const arrayText = getSelectedTextAsArray(info);
  const newText = applyOption(arrayText, option); // 修正原代码拼写错误：applyoption → applyOption

  // 向当前活跃标签的内容脚本发送替换指令
  browser.tabs.sendMessage(tab.id, {
    action: "replaceSelectedText",
    text: newText
  });
});

2. 编写内容脚本（执行文本替换） #

创建content.js文件，实现针对不同可编辑元素的文本替换逻辑：

// 监听来自后台脚本的消息
browser.runtime.onMessage.addListener((message) => {
  if (message.action === "replaceSelectedText") {
    replaceSelectedText(message.text);
  }
});

function replaceSelectedText(newText) {
  const activeElement = document.activeElement;

  // 处理textarea和文本输入框
  if (activeElement.tagName === "TEXTAREA" || (activeElement.tagName === "INPUT" && activeElement.type === "text")) {
    const start = activeElement.selectionStart;
    const end = activeElement.selectionEnd;
    // 替换选中文本
    activeElement.value = activeElement.value.substring(0, start) + newText + activeElement.value.substring(end);
    // 将光标定位到替换文本末尾
    activeElement.selectionStart = activeElement.selectionEnd = start + newText.length;
    return;
  }

  // 处理contenteditable可编辑元素
  if (activeElement.isContentEditable) {
    const selection = window.getSelection();
    if (selection.rangeCount > 0) {
      const range = selection.getRangeAt(0);
      range.deleteContents();
      range.insertNode(document.createTextNode(newText));
      // 移动光标到替换文本末尾
      selection.collapse(range.endContainer, range.endOffset);
    }
    return;
  }
}

3. 配置manifest.json（权限与脚本注入） #

在扩展的manifest.json中添加必要权限，配置内容脚本的注入范围：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": ["contextMenus", "activeTab"],
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 适配所有页面，可根据需求调整范围
      "js": ["content.js"]
    }
  ]
}

内容的提问来源于stack exchange，提问作者rennoib