如何在 Chrome 插件 MV3 中实现通信？

2024-07-13 14:35:25

如何在 Chrome 插件 MV3 中实现 Service Worker 与 Content Script 通信？

Chrome 扩展程序的开发过程中，Service Worker 和 Content Script 之间的通信是不可或缺的一环，它支撑着各种复杂功能的实现。然而，这部分的开发也常常让开发者犯难。本文将深入探讨两种常用的通信方法，并结合代码示例，帮助你构建高效的通信机制。

常见的通信难题

很多开发者在尝试建立 Service Worker 和 Content Script 之间的通信时，会遇到一些令人头疼的问题，例如：

使用 chrome.tabs.sendMessage 时，浏览器抛出 "Could not establish connection. Receiving end does not exist." 错误，提示无法建立连接。
重复注入 Content Script 时，出现 "cannot redeclare values" 错误，表明值不能被重复声明。

这些问题的根源往往在于开发者对 Chrome Extension 生命周期和通信机制缺乏深入理解。

解决方案：精准击破通信障碍

为了解决上述问题，我们可以采取两种行之有效的策略：

方法一：按需注入 Content Script，避免重复加载

这种方法的精髓在于，只在需要的时候才将 Content Script 注入到目标网页，避免重复注入造成的错误。

Service Worker 代码:

// service-worker.js

async function handleTrackedUrls() {
  const trackedUrls = await getTrackedUrls();
  const activeTimers = getRunningTrackedUrlTimers(trackedUrls);

  for (const timer of activeTimers) {
    if (timer.currTime === timer.defaultTime * 60) {
      // ... 其他逻辑 ...

      // 使用 chrome.scripting.executeScript 按需注入 Content Script
      chrome.scripting.executeScript({
        target: { tabId: timer.tabId },
        files: ['content-script.js'],
      });
    } 
    // ... 其他逻辑 ...
  }
  // ... 其他逻辑 ...
}

Content Script 代码:

// content-script.js

// 创建弹窗元素
const timerPopupContainer = document.createElement("div");
// ... 其他弹窗逻辑 ...

// 监听来自 Service Worker 的消息
chrome.runtime.onMessage.addListener((message) => {
  if (message.action === "show-popup") {
    timerPopupContainer.classList.remove("hide-popup");
  }
});

// 将弹窗元素添加到页面
document.body.appendChild(timerPopupContainer);

这种方法的优势在于按需加载 Content Script，避免了重复注入导致的问题。然而，它需要在 Service Worker 中维护 Content Script 的状态，增加了代码的复杂性。

方法二：预先注入 Content Script，简化通信流程

与方法一不同，这种方法的思路是在扩展程序启动时就将 Content Script 注入所有页面，并通过消息传递机制控制其行为。

manifest.json:

{
  // ... 其他配置 ...

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content-script.js"]
    }
  ],

  // ... 其他配置 ...
}

Content Script 代码:

// content-script.js

// 创建弹窗元素
const timerPopupContainer = document.createElement("div");
// ... 其他弹窗逻辑 ...

// 初始化时隐藏弹窗
timerPopupContainer.classList.add("hide-popup");

// 监听来自 Service Worker 的消息
chrome.runtime.onMessage.addListener((message) => {
  if (message.action === "show-popup") {
    timerPopupContainer.classList.remove("hide-popup");
  }
});

// 将弹窗元素添加到页面
document.body.appendChild(timerPopupContainer);