谷歌插件开发:content.js 文件详解(手把手带你从零探索开发谷歌插件)

10,502 阅读4分钟

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

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"
      ]
    }
  ]
}

上面的代码中申请扩展程序需要的两个权限:tabsactiveTab。其中,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