Chrome 扩展开发：后台脚本（六）

最新推荐文章于 2025-03-08 09:15:00 发布

守城小轩

最新推荐文章于 2025-03-08 09:15:00 发布

阅读量2k

点赞数 44

本文链接：https://blog.csdn.net/qqyy_sj/article/details/146086021

版权

浏览器插件专栏收录该内容

25 篇文章

订阅专栏

引言

在 Chrome 扩展开发过程中，后台脚本（Background Scripts）是实现复杂功能的核心。后台脚本可以在浏览器后台运行，不需要用户主动与其交互，适合处理诸如数据同步、消息传递、事件监听等任务。对于新手开发者而言，了解如何在扩展中使用后台脚本至关重要。

本文将通过一个简单的例子来介绍如何使用 Chrome 扩展的后台脚本功能，具体展示如何通过后台脚本获取扩展的 manifest.json 文件信息，并在前台页面中显示出来。通过这个示例，你将理解后台脚本与前台页面（如 popup）的通信机制，以及它们如何协同工作。

1 后台脚本基础

1.1 什么是后台脚本？

后台脚本是在浏览器后台运行的 JavaScript 代码，它独立于任何具体的页面或浏览器窗口，因此可以处理与页面内容无关的任务。与内容脚本（Content Scripts）不同，后台脚本不会直接操作网页，而是通过监听事件或与扩展的其他组件进行通信，来完成任务。

在扩展中，后台脚本主要有两个版本：

持久化后台脚本：这种类型的后台脚本从扩展启动时就开始运行，并在整个扩展生命周期内保持活动状态。它适用于那些需要持续监控或执行长时间任务的场景。
非持久化后台脚本：Chrome 推出了"事件页面"（Event Pages），其后台脚本仅在必要时加载和运行，任务完成后会被挂起以节省资源。最新的 Chrome 扩展开发中通常使用这种方式，它比持久化后台脚本更节能。

在 Manifest v3 版本中，Chrome 进一步将后台脚本替换为服务工作线程（Service Workers），确保后台任务的运行更加高效。

2 样例：获取 Manifest 文件内容并显示在前台页面

2.1 背景介绍

在 Chrome 扩展中，manifest.json 文件是用来描述扩展的核心配置文件，包含扩展的名称、版本、权限等信息。通过后台脚本，我们可以使用 chrome.runtime.getManifest() 获取该文件的内容。这个示例将展示如何通过后台脚本获取 manifest.json 的内容，并通过前台页面（例如 popup）将其展示给用户。

2.2 后台脚本（`background.js`）

后台脚本通过监听消息传递机制，接收到来自前台页面的请求后，使用 chrome.runtime.getManifest() 获取 manifest 文件的内容，并将其发送回前台页面。

// background.js

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "getManifest") {
    const manifestData = chrome.runtime.getManifest(); // 获取 manifest.json 内容
    sendResponse({ manifest: manifestData });
  }
  return true; // 保持消息通道开放以便异步响应
});

2.3 前台页面 JavaScript（`popup.js`）

在前台页面的 JavaScript 中，通过 chrome.runtime.sendMessage() 向后台脚本发送请求，获取 manifest 的数据。然后，将该数据解析并显示在页面上。

// popup.js

document.addEventListener("DOMContentLoaded", () => {
  // 向后台脚本发送请求，获取 manifest 数据
  chrome.runtime.sendMessage({ action: "getManifest" }, (response) => {
    if (response && response.manifest) {
      const manifestDiv = document.getElementById("manifestData");
      manifestDiv.textContent = JSON.stringify(response.manifest, null, 2); // 美化 JSON 输出
    }
  });
});

2.4 前台页面 HTML（`popup.html`）

前台页面（popup.html）中包含一个用于显示 manifest 数据的 div。在 popup 页面打开后，会自动加载并显示 manifest 文件的内容。

<!-- popup.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Manifest Data</title>
  <style>
    pre {
      white-space: pre-wrap;
      word-wrap: break-word;
    }
  </style>
</head>
<body>
  <h1>Manifest Data</h1>
  <pre id="manifestData">Loading...</pre> <!-- 用于展示 manifest 数据的 div -->

  <script src="popup.js"></script>
</body>
</html>

2.5 `manifest.json`

最后，确保 manifest.json 文件中正确配置了后台脚本和 popup 页面：

{
  "manifest_version": 3,
  "name": "Manifest Fetch Example",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"  // 使用服务工作线程作为后台脚本
  },
  "action": {
    "default_popup": "popup.html"  // 指定 popup 页面
  },
  "permissions": [
  ]
}

3 工作原理与应用场景

3.1 工作原理

当用户点击浏览器工具栏中的扩展图标时，会弹出一个 popup.html 页面。
前台页面（popup）通过 chrome.runtime.sendMessage() 向后台脚本发送一个请求，要求获取 manifest.json 文件的内容。
后台脚本接收到消息后，通过 chrome.runtime.getManifest() API 获取扩展的 manifest 信息，并将其通过消息返回给前台页面。
前台页面接收到响应后，使用 JavaScript 将 manifest 文件的内容格式化并显示在页面上。

3.2 后台脚本的典型使用场景

除了获取 manifest 文件之外，后台脚本在 Chrome 扩展中还有很多实际应用，以下是一些常见的使用场景：

消息路由与处理：后台脚本可以在不同的扩展组件（如 popup、content script、options page）之间充当消息路由器。例如，popup 需要获取当前选项卡的 URL 时，可以通过后台脚本与内容脚本进行通信。
定时任务：后台脚本可以用来执行定期任务，例如每隔一段时间同步数据或检查更新。这通常通过 chrome.alarms API 实现，确保任务在后台周期性运行。
全局数据管理：当扩展需要跨不同页面或窗口共享数据时，后台脚本可以使用 chrome.storage API 管理全局状态，并确保数据在多个会话之间持久化。
浏览器事件监听：后台脚本可以监听浏览器中的全局事件，例如标签页创建、窗口关闭或网络请求。通过这种方式，扩展可以在用户不直接交互的情况下执行操作。

结语

后台脚本是 Chrome 扩展开发中极其重要的一环，特别是当你需要在浏览器后台处理任务或与前台页面通信时。通过本篇文章中的示例，你可以了解到如何通过后台脚本获取扩展的 manifest.json 文件内容，并将其显示在前台页面上。这不仅展示了后台脚本的基本功能，还帮助开发者理解前后台通信的流程。

对于新手开发者而言，掌握后台脚本的工作机制是开发高效 Chrome 扩展的基础。随着你对 Chrome 扩展的深入理解，你可以利用后台脚本来实现更加复杂的功能，例如网络请求拦截、定时任务处理等，从而开发出功能强大且性能优越的浏览器扩展。