Manifest V3下Content Script无法响应Background消息的问题

你遇到的Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.错误，核心原因有两个：

1. 你的Background Service Worker没有注册任何chrome.runtime.onMessage监听器，无法接收Content Script发送的消息（包括你额外调用的chrome.runtime.sendMessage({ action: "screenshotTaken" })）。
2. Content Script中同时使用了sendResponse（回复Background的初始请求）和额外的sendMessage，后者因为没有对应的监听逻辑直接触发错误。

以下是具体的修复方案：

1. 修复Background脚本的消息监听逻辑 #

在你的background.js中添加顶层的消息监听器，确保能接收Content Script的回复或主动发送的消息：

// background.js
// 注册全局消息监听器
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  // 处理Content Script主动发送的screenshotTaken消息（如果需要保留这个逻辑）
  if (request.action === "screenshotTaken") {
    console.log("已接收截图数据:", request.data);
    // 这里可以添加后续处理逻辑，比如存储到chrome.storage等
  }
  // 若有异步操作，需返回true保持连接
  return true;
});

// 你的原有getFullImg函数保持不变
const getFullImg = () => {
  return new Promise((resolve) => {
    let element = imagesWidgetDocument.querySelector(
      ".rc-imageselect-challenge"
    );
    let rect = element.getBoundingClientRect();
    chrome.runtime.sendMessage(
      { action: "takeScreenshot", rect: rect },
      function (response) {
        console.log(response);
        resolve(response);
      }
    );
  });
};

2. 优化Content Script的消息回复逻辑 #

Content Script中已经通过sendResponse回复了Background的初始请求，无需额外调用chrome.runtime.sendMessage，删掉这一行即可避免错误：

// screenshot.js (Content Script)
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  if (request.action === "takeScreenshot") {
    console.log('Получено');
    let rect = request.rect;
    chrome.tabs.captureVisibleTab({ format: "png", quality: 100 }, function (screenshotUrl) {
      if (screenshotUrl) {
        var img = new Image();
        img.onload = function () {
          var canvas = document.createElement("canvas");
          canvas.width = 500;
          canvas.height = 500;
          let x = rect.left + window.scrollX;
          let y = rect.top + window.scrollY;
          var ctx = canvas.getContext("2d");

          ctx.drawImage(img, x + 110, y + 130, 500, 500, 0, 0, 500, 500);
          var dataURL = canvas.toDataURL("image/png");
          console.log(dataURL);
          // 仅保留sendResponse回复初始请求，删除额外的sendMessage
          sendResponse(dataURL);
        };
        img.src = screenshotUrl;
      } else {
        sendResponse(null);
      }
    });
    return true; // 告知Chrome这是异步响应
  }
});

3. 额外注意事项 #

• Manifest V3的Service Worker是事件驱动的，所有监听器必须在顶层作用域注册，不能放在函数内部，否则Service Worker休眠后会丢失监听逻辑。
• 确认你的扩展已在目标页面激活（可通过Chrome扩展管理页面的"详情"->"在隐身模式下允许"等选项测试）。
• 你的manifest.json权限配置已经满足需求（activeTab、tabs和<all_urls>主机权限），无需额外调整。

内容的提问来源于stack exchange，提问作者Heropaster