谷歌插件开发：content.js 文件详解（手把手带你从零探索开发谷歌插件）

我正在参加「掘金·启航计划」

content.js 作为Chrome浏览器插件中的一个组件，它可以与页面交互并修改DOM元素、注入JavaScript代码等，用于处理特定网页上的内容。本节将详细介绍 content.js 的相关知识，包括它的作用、使用方法及注意事项等。

---

课程目录（暂定18节）

后续可持续关注此贴，目录路径都会补上，点击即可跳转前往

1. 序章：拓展技术池，一起来探索谷歌插件吧！
2. 插件结构：manifest.json 配置文件详解
3. 实战开发：创建自己的第一个Google插件
4. 插件结构：background.js 文件详解
5. 进阶高级：Browser Action API 详解
6. 进阶高级：Tabs Manager API 详解
7. 谷歌插件开发：content.js 文件详解
8. 谷歌插件开发：Content Script API 详解
9. 谷歌插件开发：Message Passing API 详解
10. 谷歌插件开发：Storage API 详解
11. 谷歌插件开发：File System Access API 详解
12. 谷歌插件开发：XMLHttpRequest 详解
13. 进阶高级：Bookmarks API 详解
14. 进阶高级：Downloads API 详解
15. 进阶高级：如何使用vue来开发一款Google插件
16. 实战开发：从零开发一款企业级Google插件（上）
17. 实战开发：从零开发一款企业级Google插件（下）
18. 收官之作：总结与展望

一. 基本介绍

content.js 的最主要的作用就是与页面进行交互，通过JavaScript语言来改变页面的展示效果或者实现某些特定的功能。例如，我们可以使用 content.js 在网页上添加新的按钮、文本框、下拉框等控件，以方便用户对网页进行操作。content.js 可以轻松地对DOM元素进行增删改查等操作，例如，在页面上隐藏某些元素、修改文字或颜色等。

content.js 还可以向当前页面注入JavaScript代码，以实现更加复杂的功能。例如，可以通过注入JS脚本，来自动化测试网页、爬取网页数据等。

而在插件开发中创建 content.js 文件非常简单，只需要在 manifest.json 文件中定义即可。如下所示：

{
  "name": "My Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "This is an example extension",
  "content_scripts": [
    {
      "matches": ["https://*.google.com/*"],
      "js": ["content.js"]
    }
  ]
}

其中，matches表示需要操作的URL地址，这里使用通配符*代表所有网址，也可以指定某个具体的网站；js表示需要执行的JavaScript代码文件，这里是 content.js。

需要注意的事项 ⚠️

1.合理规划脚本结构

良好的脚本结构对于代码的可读性和维护性都非常重要。建议将不同的功能分离到不同的文件中，以提高代码的结构化和可维护性。

2.避免冲突

content.js 直接操作网页DOM，可能会与网页原有的JavaScript代码产生冲突，导致页面崩溃。因此，我们需要避免在 content.js 中使用与网页原有代码相同的变量名和函数名。

3.安全问题

content.js 可以访问用户的隐私数据，因此需要做好安全防护工作，确保脚本不会泄露用户信息。同时，在开发过程中，需要注意脚本的权限设置，避免给予过多的权限。

---

二. 服务通信

另外，content.js 还可以与后端服务器进行通信，实现更加高级的功能，如检测用户行为、跟踪统计数据等。例如，我们可以使用 content.js 来获取页面上的一些信息，然后将这些信息发送到后端服务器进行处理，最后返回处理结果并在页面上展示。

下面我们来做一个示例应用：从当前页面获取所有图片的URL地址，并发送到后端服务器进行处理，最后在页面上展示处理结果。

创建manifest.json文件，并添加以下内容

{
  "name": "Get Images",
  "manifest_version": 2,
  "version": "1.0",
  "description": "Get all images on a page and send to backend server for processing",
  "permissions": ["activeTab", "tabs", "http://*/*", "https://*/*"],
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["content.js"]
    }
  ]
}

然后创建content.js文件，并添加以下内容：

// 获取所有图片的URL地址
var images = document.querySelectorAll('img');
var urls = [];
for (var i = 0; i < images.length; i++) {
  urls.push(images[i].src);
}

// 发送请求到后端服务器
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://baidu.com/process-images', true);
xhr.setRequestHeader('Content-type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    // 处理后端服务器返回的结果
    var response = JSON.parse(xhr.responseText);
    displayResult(response);
  }
};

// 将图片URL地址转为JSON格式并发送
var data = JSON.stringify({urls: urls});
xhr.send(data);

// 在页面上展示处理结果
function displayResult(result) {
  var div = document.createElement('div');
  div.style.background = 'yellow';
  div.style.padding = '10px';
  div.innerText = result.message;
  document.body.appendChild(div);
}

以上代码首先通过querySelectorAll方法获取所有图片元素，并提取它们的src属性，然后将这些URL地址保存到数组中。接下来，使用XMLHttpRequest对象向后端服务器发送一个POST请求，携带所有图片URL地址的JSON格式数据。当服务器处理完成后，返回一个包含处理结果信息的JSON格式数据，在客户端使用displayResult函数将结果展示在页面上。

上面仅作一个简单示例，并不作为本节学习目标，如果需要完美运行，需要准备一个接口替换https://baidu.com/process-images；代码运行结果为：打开一个包含多个图片的页面。插件将自动获取所有图片的URL地址，并发送到后端服务器进行处理，最后在页面上展示处理结果。如果一切正常，就能够看到一个黄色背景的提示框，里面包含了处理结果信息。

由此说明 content.js 可以与后端服务器进行通信，实现更加高级的功能，如检测用户行为、跟踪统计数据等。在实际应用中，我们可以通过 content.js 获取页面上的一些信息，然后将这些信息发送到后端服务器进行处理，最后返回处理结果并在页面上展示，从而提高网站的交互性和用户体验。

最后，我们需要注意以下几点：

1.安全性

在使用 content.js 与后端服务器进行通信时，需要注意数据的安全性。建议使用HTTPS协议传输数据，同时对敏感信息进行加密处理，以避免信息泄露。

2.性能问题

content.js 可能会影响页面的加载速度和性能，因此需要注意代码的优化和精简。避免不必要的DOM操作、减少HTTP请求等都有助于提高性能和用户体验。

3.跨域问题

由于浏览器的同源策略，content.js 无法直接访问跨域资源，如其他网站的API接口。如果需要获取跨域资源，可以使用JSONP、CORS等技术进行处理。

---

三. 应用示例

下面我们来实现一个在 Google 搜索页面中高亮显示特定关键词的示例，以帮助您更好地理解 content.js 的作用。

先看一下规划的目录结构：

我们先在扩展程序根目录下创建 manifest.json 文件，并添加以下配置：

{
  "manifest_version": 2,
  "name": "高亮显示特定关键词",
  "version": "1.0",
  "description": "Highlight specific keywords on Google search results page",
  "permissions": [
    "tabs",
    "activeTab"
  ],
  "browser_action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": [
        "https://www.google.com/search*"
      ],
      "js": [
        "content.js"
      ]
    }
  ]
}

上面的代码中申请扩展程序需要的两个权限：tabs 和 activeTab。其中，tabs 权限允许扩展程序打开和关闭浏览器标签页，activeTab 权限允许扩展程序获取当前浏览器窗口的活动标签页。

然后声明在满足特定 URL 匹配条件下运行的 content.js 脚本，即只有在打开 Google 搜索页面时才会运行 content.js 脚本文件。

接下来我们在 popup.html 中添加以下内容：

<!DOCTYPE html>
<html>

  <head>
    <title>My Extension</title>
    <script src="popup.js"></script>
  </head>

  <body>
    <h1>My Extension</h1>
    <p>Enter keywords to highlight:</p>
    <input type="text" id="keywords" />
    <button id="highlightBtn">Highlight</button>
  </body>

</html>

此处添加了一个简单的文本框和按钮，以便用户输入要突出显示的关键词。

然后在 popup.js 中添加以下内容：

function highlightKeywords() {
  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    var keywords = document.getElementById("keywords").value;
    chrome.tabs.sendMessage(tabs[0].id, { keywords: keywords });
  });
}

document.addEventListener("DOMContentLoaded", function () {
  document.getElementById("highlightBtn").addEventListener("click", highlightKeywords);
});

这段代码定义了一个函数 highlightKeywords() 和一个事件监听器，主要功能是与 content.js 脚本通信并将用户在弹出窗口中输入的关键字发送给 content.js。

步骤如下：

1. highlightKeywords 函数使用 Chrome 扩展程序 API 的 chrome.tabs.query() 方法查找当前活动标签页，然后获取 文本框的值。
2. 然后使用 chrome.tabs.sendMessage() 方法向当前活动标签页发送包含 keywords 的消息。
3. 在 DOM 内容加载完成时，添加一个点击事件监听器，当用户单击按钮时调用函数，触发与content.js 的通信操作。

接下来我们在 content.js 中添加以下内容：

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  if (request.keywords && request.keywords.length > 0) {
    var keywords = request.keywords.split(",");
    for (var i = 0; i < keywords.length; i++) {
      var regex = new RegExp(keywords[i], "ig");
      var matches = document.body.innerHTML.match(regex);
      if (matches) {
        for (var j = 0; j < matches.length; j++) {
          var span = document.createElement("span");
          span.style.backgroundColor = "yellow";
          span.textContent = matches[j];
          matches[j] = matches[j].replace(/[-[]/{}()*+?.\^$|]/g, "\$&");
          document.body.innerHTML = document.body.innerHTML.replace(new RegExp(matches[j], "g"), span.outerHTML);
        }
      }
    }
  }
});

这段代码用于接收来自 popup.js 脚本的消息，并在网页中查找并突出显示匹配的关键字。

步骤如下：

1. 当从 popup.js 发送的消息包含 keywords 属性且长度大于 0 时，将其视为要突出显示的关键字。
2. 将 request.keywords 字符串按逗号分隔为数组 keywords，以便处理多个关键字。
3. 使用 RegExp() 构造函数创建不区分大小写、全局匹配的正则表达式 regex。
4. 在 HTML 页面中查找与 regex 匹配的文本，将结果存储在 matches 数组中。
5. 如果 matches 不为空，则使用循环遍历 matches 数组，并为每个匹配项创建一个 span 元素，设置其背景色为黄色，并用匹配的文本填充其内容。
6. 对于每个匹配项，在原始字符串中替换其所有出现的实例（使用 replace() 方法和一个新的全局正则表达式），将其替换为 span 元素的 HTML 表示形式，以实现突出显示效果。

总的来说此处定义了一个监听来自 popup.js 发送的消息的函数，当收到包含关键词列表的消息时，使用正则表达式来查找匹配项，并将其用黄色背景突出显示。

以上就是一个完整Chrome插件示例，该插件可以在 Google 搜索页面中高亮显示您输入的特定关键词，下面我们来看看效果：

---

本节课程源码 📥

链接: pan.baidu.com/s/16EfjPVDn… 提取码: 6666