如何从 puppeteer 向 Chrome 扩展程序发送消息？

Question

我编写了一个使用 chrome.tabCapture API 记录屏幕的 chrome 扩展。我希望能够使用 puppeteer 开始和停止录制。

开始录制是一个简单的部分，因为我需要从头开始 - 我只是从内容脚本发送一条消息：

setTimeout(function(){
    chrome.runtime.sendMessage({ action: "START_CAPTURING"}, function(response) {});
}, 100);

现在，我不知道如何从 puppeteer 向后台脚本发送消息以停止捕获。我尝试向页面添加一个按钮并等待内容脚本中的点击事件：

var button = document.getElementById("stopBtn");
  button.addEventListener("click", function() {
    chrome.runtime.sendMessage({ action: "STOP_CAPTURING"}, function(response) {});
  }, false);

有用。这种方法的问题在于，即使我是内容的所有者并且能够添加一个额外的元素只是为了记录，在我看来这不是一个优雅的解决方案。

我希望能够将消息从 puppeteer 发送到在那里声明的扩展或调用函数。

Answer 1

您可以在您的清单中进行设置externally_connectable，然后chrome.runtime.sendMessage将变得可供指定的主机使用。

{
  "name": "My externally connectable extension",
  "externally_connectable": {
    // If this field is not specified, no webpages can connect.
    // You cannot specify "all URLs"
    "matches": [
      "*://*.example.com/*",
      ...
    ]
  },
  ...
}

在木偶操纵者方面，我认为它看起来像：

await page.evaluate(() => {
    chrome.runtime.sendMessage('your extension id', { action: "STOP_CAPTURING"})
});

您的后台工作人员将收到该消息。