拾起我们的魔杖，现在我们要将用户选择的文字转化为一道高亮的光辉，在网页上留下我们的印记。本章教你如何将“智能笔记”插件提升到新的高度——实现一个功能，允许用户在网页上高亮。
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操作和样式注入，用户现在能够在任何网页上高亮他们想要记住的文本，让学习和研究变得更加直观有趣。
在下一章，我们将介绍如何将用户的这些高亮标记保存下来，即便是关闭并重新打开网页后，这些珍贵的印记依旧能够重现。
