Chrome扩展Manifest V3截图功能报错：无法建立连接，接收端不存在

针对你遇到的Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist错误，以下是逐步排查和修复方案：

一、优先检查Content Script注入状态 #

打开目标页面的开发者工具 → 切换到Sources标签 → 左侧导航栏展开Content scripts：

• 如果看不到你的content_script.js：
  1. 确认manifest中content_scripts的js路径与实际文件名完全一致（Linux/Mac系统区分大小写）。
  2. 确保测试页面是普通HTTP/HTTPS页面（chrome://、扩展自身页面、PDF等特殊页面不支持content script注入）。
  3. 重新加载扩展：Chrome扩展管理页 → 找到你的扩展 → 点击重新加载按钮，再刷新目标页面。

二、修复Background.js的错误处理与逻辑 #

在chrome.tabs.sendMessage回调中添加错误捕获，同时移除不必要的setTimeout（可能导致Service Worker休眠或Tab状态异常）：

chrome.action.onClicked.addListener(function (tab) {
  chrome.desktopCapture.chooseDesktopMedia(
    ["screen", "window", "tab"],
    tab,
    (streamId) => {
      if (streamId && streamId.length) {
        chrome.tabs.sendMessage(
          tab.id,
          { name: "stream", streamId },
          (response) => {
            // 新增错误捕获，明确问题原因
            if (chrome.runtime.lastError) {
              console.error("消息发送失败：", chrome.runtime.lastError);
              return;
            }
            console.log("收到响应：", response);
          }
        );
      }
    }
  );
});

chrome.runtime.onMessage.addListener((message, sender, senderResponse) => {
  if (message.name === "download" && message.url) {
    chrome.downloads.download(
      {
        filename: "screenshot.png",
        url: message.url,
      },
      (downloadId) => {
        senderResponse({ success: true });
      }
    );
    return true;
  }
});

三、补充Manifest V3必要权限 #

在manifest.json中添加host_permissions，确保content script能在所有页面正常注入：

{
  "name": "Screenshots",
  "version": "0.0.1",
  "description": "Take screenshots",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["desktopCapture", "downloads", "tabs", "nativeMessaging"],
  "host_permissions": ["<all_urls>"], // 新增该行
  "action": {
    "default_title": "Take a Screenshot"
  },
  "icons": {
    "16": "/assets/icon-16.png",
    "32": "/assets/icon-32.png",
    "48": "/assets/icon-48.png",
    "128": "/assets/icon-128.png"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content_script.js"]
    }
  ]
}

四、修复Content Script的媒体约束格式 #

旧的mandatory属性已被废弃，改用标准约束格式，避免后续截图失败：

chrome.runtime.onMessage.addListener((message, sender, senderResponse) => {
    if (message.name === 'stream' && message.streamId) {
        let track, canvas
        navigator.mediaDevices.getUserMedia({
            video: {
                chromeMediaSource: 'desktop',
                chromeMediaSourceId: message.streamId,
                width: { ideal: 1920 },
                height: { ideal: 1080 }
            },
        }).then((stream) => {
            track = stream.getVideoTracks()[0]
            const imageCapture = new ImageCapture(track)
            return imageCapture.grabFrame()
        }).then((bitmap) => {
            track.stop()
            canvas = document.createElement('canvas');
            canvas.width = bitmap.width;
            canvas.height = bitmap.height;
            let context = canvas.getContext('2d');
            context.drawImage(bitmap, 0, 0, bitmap.width, bitmap.height)
            return canvas.toDataURL();
        }).then((url) => {
            chrome.runtime.sendMessage({name: 'download', url}, (response) => {
                if (response.success) {
                    alert("截图已保存");
                } else {
                    alert("截图保存失败")
                }
                canvas.remove()
                senderResponse({success: true})
            })
        }).catch((err) => {
            alert("无法截取屏幕")
            senderResponse({success: false, message: err.message})
        })
        return true;
    }
})

五、验证Service Worker状态 #

打开Chrome扩展管理页 → 你的扩展 → 点击Service Worker的Inspect按钮，查看控制台日志：

• 确认点击扩展图标时，能看到Action clicked on tab: [TabID]的日志输出，说明Service Worker处于活跃状态。

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