chrome background 和 conten 两个js

1. background.js (背景脚本)

background.js 是 Chrome 扩展中的后台脚本，负责处理扩展的核心逻辑，通常在后台持续运行（在 Manifest V3 中改为 service worker 形式）。它可以监听浏览器事件、管理扩展的状态、与浏览器的 API 交互等。这个脚本通常没有直接与网页内容互动，但可以执行需要长期保持状态的任务。

主要特点：

• 持久运行：在 Manifest V2 中，background.js 会随着浏览器的开启和关闭而加载或卸载，始终在后台运行。在 Manifest V3 中，background.js 被替换为 Service Worker，会在需要时加载，完成任务后进入休眠状态。
• 事件驱动：background.js 可以响应浏览器事件（如 tab 的创建或关闭、网络请求拦截等），并执行相应操作。
• 全局状态管理：它可以在扩展的生命周期内保存和管理全局状态，支持持久化的复杂逻辑。
• 与浏览器 API 交互：可以调用很多 Chrome 扩展 API，例如管理书签、cookies、浏览历史记录、网络请求等。
• 与其他脚本通信：它通常会与 content.js 通信，处理来自页面的数据或请求，并进行进一步操作。

示例代码：

chrome.runtime.onInstalled.addListener(function() {
  console.log("扩展已安装");
});

chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    console.log("捕获的请求：", details);
    return { cancel: false }; // 可以取消请求或修改其行为
  },
  { urls: ["<all_urls>"] },
  ["blocking"]
);

2. content.js (内容脚本)

content.js 是 Chrome 扩展中的内容脚本，负责直接与网页内容交互。它在用户访问网页时注入到页面中，允许开发者操作 DOM，修改页面内容，或者响应用户行为。

主要特点：

• 嵌入网页中：content.js 是直接嵌入到浏览器加载的网页中的，它有能力访问和操作网页的 DOM 元素。
• 与页面隔离：虽然 content.js 可以操作页面的 DOM，但它在与页面运行的 JavaScript 代码之间有着隔离的执行环境，避免冲突。它可以通过 message passing 与页面脚本或 background.js 通信。
• 无法访问扩展 API：content.js 无法直接访问 Chrome 扩展 API（如 chrome.tabs），但可以通过与 background.js 通信来间接调用这些 API。
• 实时操作页面：它可以在页面加载后立即运行并修改页面内容，适合做页面注入、广告屏蔽等操作。

示例代码：

// 修改页面内容
document.body.style.backgroundColor = 'blue';

// 与 background.js 通信
chrome.runtime.sendMessage({ message: "从 content.js 发送的消息" }, function(response) {
  console.log("来自 background.js 的响应:", response);
});

3. 两者的区别与协作

• 运行环境不同：background.js 运行在 Chrome 扩展的后台，不直接与网页内容交互；而 content.js 是嵌入到特定网页中的，能够直接操作网页内容。
• API 访问权限不同：background.js 能够调用所有 Chrome 扩展 API，例如 tabs、cookies 等；content.js 只能通过消息传递与 background.js 交互，间接访问这些 API。
• 生命周期不同：background.js 在浏览器打开时启动，在浏览器关闭时停止（Manifest V3 中则是按需启动和休眠）；而 content.js 只在加载网页时运行，并在该网页关闭时结束。
• 通信机制：background.js 和 content.js 通过 消息传递机制（Message Passing） 进行通信。content.js 可以向 background.js 发送消息，请求执行某些浏览器相关的任务，background.js 处理后再返回结果。

通信示例：

• content.js 发送消息：

  chrome.runtime.sendMessage({ action: “getData” }, function(response) {
  console.log(“收到的 response:”, response);
  });

• background.js 处理消息：

  chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action === “getData”) {
  sendResponse({ data: “这里是后台处理的结果” });
  }
  });

4. 应用场景举例

• background.js：
  • 处理和管理长期运行的任务，例如网络请求拦截、事件监听等。
  • 管理全局状态，比如扩展的设置选项、用户数据等。
  • 与 Chrome API 交互，获取浏览器的状态或修改浏览器行为。
• content.js：
  • 修改网页内容，如注入自定义的 JavaScript 或 CSS。
  • 实现与用户交互的功能，比如捕获表单输入、按钮点击事件等。
  • 读取页面中的数据，并将其发送给 background.js 进行进一步处理。