Chrome扩展开发：JS实现文本高亮功能的代码问题排查

你当前实现Chrome扩展文本高亮的代码存在多处逻辑错误，具体问题点和修正方案如下：

现有代码核心问题 #

• document.getSelection()返回的是选区对象，不是DOM节点，不存在innerHTML属性，同时选区对象也没有字符串的replace方法，直接调用会抛出类型错误，完全无法实现替换效果
• 兼容旧版IE的document.selection分支存在语法错误：方法名大小写错误（写为document.Selection()）、<u>标签闭合错误写成了开标签、getText()函数在该分支没有返回获取到的选中文本
• 点击自定义的Highlight按钮时，按钮会抢占焦点，导致页面原有文本选区直接丢失，后续逻辑拿不到选中范围
• Chrome作为现代浏览器完全支持标准Selection API，不需要额外兼容旧IE的非标准逻辑

修正后可运行代码 #

// 获取选中的文本内容
function getSelectedText() {
  const selection = window.getSelection();
  return selection ? selection.toString().trim() : '';
}

// 给选中文本添加下划线高亮
function addHighlightToSelection() {
  const selection = window.getSelection();
  // 无有效选区/未选中文本时直接终止
  if (!selection || selection.rangeCount === 0 || selection.isCollapsed) return;

  const selectedText = getSelectedText();
  if (!selectedText) return;

  const range = selection.getRangeAt(0);
  const underlineElement = document.createElement('u');
  // 用u标签包裹选中的内容
  range.surroundContents(underlineElement);
  // 操作完成后清除选区
  selection.removeAllRanges();
}

// 创建页面高亮按钮
const highlightBtn = document.createElement("button");
highlightBtn.textContent = "Highlight";
// 阻止按钮mousedown默认行为，避免点击时丢失文本选区
highlightBtn.addEventListener('mousedown', e => e.preventDefault());
highlightBtn.addEventListener('click', addHighlightToSelection);
document.body.appendChild(highlightBtn);

该实现符合你要求的「高亮不永久留存」的规则：所有下划线效果都是临时修改当前页面DOM，页面刷新后会自动消失。如果后续需要调整高亮样式，只需要把<u>标签替换为带背景色的<mark>标签或自定义样式的span标签即可。

原代码预览截图 #

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