未捕获（承诺）{消息：“消息端口在收到响应之前关闭。”}

Question

我需要制作一个扩展程序，每当视频暂停时，它都会从 YouTube 视频中捕获帧，我能够捕获该帧，但似乎无法将其发送到后台。 我禁用了其他扩展，但问题没有解决。

内容.js

// Function to send a message to the background script
function sendMessageToBackground(message) {
    return new Promise((resolve, reject) => {
      chrome.runtime.sendMessage(message, (response) => {
        if (chrome.runtime.lastError) {
          reject(chrome.runtime.lastError);
        } else {
          resolve(response);
        }
      });
    });
  }

  // Function to capture the current video frame
async function captureFrame() {
  const video = document.querySelector('video');
  if (video) {
    // Pause the video
    video.pause();

    // Create a canvas to capture the current frame
    const canvas = document.createElement('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

    // Convert the frame to a data URL
    const frameDataURL = canvas.toDataURL('image/png');
    // Send the frame to the background script
    const response = await sendMessageToBackground({
      action: "processFrame",
      dataURL: frameDataURL
    });

    // Process the annotations received from the background script
    if (response.annotations) {
      // TODO: Overlay annotations on the video
      console.log(response.annotations);
    }
  }
}

// Listen for a message from the popup or background script
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "togglePause") {
    captureFrame().then(sendResponse).catch(console.error);
    return true; // indicates you wish to send a response asynchronously
  }
});

背景.js

// Flag to keep track of extension state
let extensionEnabled = false;

// Listen for messages from content scripts
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  console.log(request.action)
  if (request.action === "toggleExtension") {
    extensionEnabled = !extensionEnabled;
    sendResponse({status: extensionEnabled ? "enabled" : "disabled"});
  }

  // If the content script asks to process the frame
  if (request.action === "processFrame" && extensionEnabled) {
      // to process the frame from the api
    setTimeout(() => {
      sendResponse({ annotations: 
        [
          // dummy data
          {
            "label": "Person",
            "confidence": 0.999,
            "topleft": {
              "x": 0,
              "y": 0
            },
            "bottomright": {
              "x": 100,
              "y": 100
            }
          }
        ] });
    }, 1000);
    return true; // indicates you wish to send a response asynchronously
  }
});

错误

未捕获（承诺）{消息：“消息端口在收到响应之前关闭。”}

我不知道出了什么问题。 还有一个错误

sw.js:1 未捕获（承诺）事件 {isTrusted: true, type: 'error', target: IDBOpenDBRequest, currentTarget: null, eventPhase: 0, ...}

Answer 1

您尝试过增加超时吗？

sendResponse({ annotations: 
    [
      // dummy data
      {
        "label": "Person",
        "confidence": 0.999,
        "topleft": {
          "x": 0,
          "y": 0
        },
        "bottomright": {
          "x": 100,
          "y": 100
        }
      }
    ] });
}, 1000);

错误似乎是由于超时时间太短造成的。

port closed before a response was received.

或者尝试使用等待而不是超时？