折腾Chrome插件，简单地让文本上色~

拾起我们的魔杖，现在我们要将用户选择的文字转化为一道高亮的光辉，在网页上留下我们的印记。本章教你如何将“智能笔记”插件提升到新的高度——实现一个功能，允许用户在网页上高亮。

manifest.json 更新

首先，我们不需要更新manifest.json文件，因为我们已经在之前的章节中为内容脚本添加了必要的权限和指令。

content.js 更新

现在，我们将为content.js添加高亮选中文本的功能。当用户选择了文本并使用我们的上下文菜单选项时，我们将高亮显示该文本。

// content.js

// 在页面上监听鼠标抬起事件，以获取用户选择的文本
document.addEventListener('mouseup', function() {
  let selectedText = window.getSelection();
  if (selectedText.toString().trim().length > 0) {
    // 用户选择了文本，我们可以在这里处理文本
    // 创建高亮显示
    highlightText(selectedText);
  }
});

// 高亮显示选中的文本
function highlightText(selection) {
  const range = selection.getRangeAt(0);
  const span = document.createElement('span');
  span.style.backgroundColor = 'yellow';
  span.classList.add('highlighted-text'); // 添加类以便我们可以更容易地查询所有高亮的文本
  range.surroundContents(span);
}

在content.js中，我们定义了highlightText函数，它接受一个Selection对象作为参数。我们使用getRangeAt(0)获取用户选择的文本范围，然后创建一个新的span元素，并设置背景颜色为黄色以实现高亮效果。最后，我们用这个span包围用户选择的文本。

样式

我们还需要为高亮的文本定义一些基础样式。这可以通过内联样式完成，也可以将样式添加到一个独立的CSS文件中并将其注入页面。

比如，我们可以添加一个styles.css文件：

/* styles.css */
.highlighted-text {
  background-color: yellow; /* 高亮颜色 */
  /* 在这里可以添加更多的样式 */
}

然后，在manifest.json中指定该样式文件被注入：

"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["content.js"],
    "css": ["styles.css"]  /* 添加CSS文件到内容脚本 */
  }
]

小结

这个时候重新运行插件，选择文字之后，会改变背景颜色~

我们已经赋予了“智能笔记”插件一个新技能：抓住文本并用颜色标注它的能力。通过在内容脚本中添加简单的DOM操作和样式注入，用户现在能够在任何网页上高亮他们想要记住的文本，让学习和研究变得更加直观有趣。

在下一章，我们将介绍如何将用户的这些高亮标记保存下来，即便是关闭并重新打开网页后，这些珍贵的印记依旧能够重现。