keywords: Chrome扩展, 内容脚本, DOM操作, 翻译插件, 词典插件, 获取选中内容

description: 深入探讨如何使用Chrome扩展中的内容脚本与网页进行交互，包括添加和注册内容脚本、操作网页DOM及获取选中文本内容，为翻译和词典功能打下基础。

在本章中，我们将深入探讨如何使用 Chrome 扩展中的内容脚本与网页进行交互。内容脚本是 Chrome 扩展中的一个重要部分，它能够访问和操作网页的 DOM（Document Object Model）。通过内容脚本，我们可以获取网页的选中内容并进行处理，为接下来的翻译和词典功能打下基础。

添加内容脚本content.js

首先，我们需要在项目结构中添加一个新的 JavaScript 文件content.js，它将作为我们内容脚本的入口。我们需要在manifest.json中注册这个脚本，以便 Chrome 能够识别并加载它。

修改manifest.json

在manifest.json中添加以下内容：

  1. {
  2.   "name": "翻译和词典插件",
  3.   "version": "1.0",
  4.   "description": "一个用于翻译和查词的Chrome插件",
  5.   "manifest_version": 3,
  6.   "permissions": ["activeTab", "storage"],
  7.   "background": {
  8.     "service_worker": "background.js"
  9.   },
  10.   "action": {
  11.     "default_popup": "popup.html",
  12.     "default_icon": {
  13.       "16": "images/icon16.png",
  14.       "48": "images/icon48.png",
  15.       "128": "images/icon128.png"
  16.     }
  17.   },
  18.   "content_scripts": [
  19.     {
  20.       "matches": ["<all_urls>"],
  21.       "js": ["content.js"]
  22.     }
  23.   ]
  24. }

在这里，我们通过content_scripts字段声明了内容脚本content.js，并允许它在所有网页上运行。

操作网页的 DOM

一旦内容脚本被加载到网页中，我们可以使用标准的 JavaScript 方法来操作网页的 DOM。以下是一个简单的例子，展示如何在页面上添加一个新的元素，并在用户点击时显示一个消息框。

编写content.js

  1. // content.js
  2. (function () {
  3.   // 在页面上创建一个新的 div 元素
  4.   const newDiv = document.createElement("div");
  5.   newDiv.style.position = "fixed";
  6.   newDiv.style.bottom = "10px";
  7.   newDiv.style.right = "10px";
  8.   newDiv.style.padding = "10px";
  9.   newDiv.style.backgroundColor = "yellow";
  10.   newDiv.textContent = "点击我获取选中内容";
  12.   // 将新元素添加到 body
  13.   document.body.appendChild(newDiv);
  15.   // 添加事件监听器，当用户点击时弹出消息框
  16.   newDiv.addEventListener("click", () => {
  17.     alert("您点击了插件按钮！");
  18.   });
  19. })();

在这个示例中，我们创建了一个新的div元素，并将它固定在页面的右下角。当用户点击这个div时，会弹出一个消息框提示。

获取选中内容的示例

在实际的翻译和词典功能中，我们需要获取用户在网页上选中的文本内容。以下是一个示例，展示如何获取选中的文本并在控制台中输出。

修改content.js

  1. // content.js
  2. (function () {
  3.   // 在页面上创建一个新的 div 元素
  4.   const newDiv = document.createElement("div");
  5.   newDiv.style.position = "fixed";
  6.   newDiv.style.bottom = "10px";
  7.   newDiv.style.right = "10px";
  8.   newDiv.style.padding = "10px";
  9.   newDiv.style.backgroundColor = "yellow";
  10.   newDiv.textContent = "点击我获取选中内容";
  12.   // 将新元素添加到 body
  13.   document.body.appendChild(newDiv);
  15.   // 添加事件监听器，当用户点击时获取选中的文本
  16.   newDiv.addEventListener("click", () => {
  17.     const selectedText = window.getSelection().toString();
  18.     if (selectedText) {
  19.       console.log("选中的文本内容：", selectedText);
  20.     } else {
  21.       alert("请先选中一些文本内容！");
  22.     }
  23.   });
  24. })();

在这个示例中，当用户点击按钮时，脚本会检查当前是否有选中的文本。如果有选中的文本，脚本会在控制台中输出选中的内容；否则，会弹出一个消息框提示用户先选中一些文本内容。

通过本章的学习，我们掌握了如何在 Chrome 扩展中使用内容脚本与网页进行交互。我们学习了如何添加和注册内容脚本，如何操作网页的 DOM，以及如何获取用户选中的文本内容。这些技能是实现翻译和词典功能的基础。在接下来的章节中，我们将探讨如何实现内容脚本与背景脚本之间的消息传递机制。