我可以在 chrome 扩展中使用 puppeteer

Question

我想构建一个供个人使用的 chrome 扩展。该扩展程序将抓取一些网页并呈现一些信息。所以我认为 puppeteer 可以帮我解决这个问题。我知道我需要在 chrome 扩展中运行节点。是否可以？我找到了一些答案，但它们已经过时了。

Answer 1

我知道这晚了 9 个月，但我在 Window 机器上使用了相同的用例，但您可以使其与 Mac 一起使用。

诀窍是使用 puppeteer-web https://github.com/puppeteer/puppeteer/tree/master/utils/browser#bundling-for-web-browsers

捆绑存储库并将其放置在您的 chrome 扩展文件夹中，然后popup.html使用类似的内容在您的文件夹中引用它

<script src="./puppeteer/utils/browser/puppeteer-web.js"></script>

然后，您需要利用 Chrome 的远程调试功能，因为 puppeteer-web 无法通过它启动自己的实例puppeteer.launch()，只能用于puppeteer.connect()连接到现有的 chrome 实例。

在 Windows 上--remote-debugging-port=9222，按照How to make Chrome always launch with remote-debugging-port flag添加到 chrome 快捷方式的目标字段的末尾

或者在 Mac 上 /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --no-first-run --no-default-browser-check --user-data-dir=$(mktemp -d -t 'chrome-remote_data_dir')

激活远程调试后，您将能够webSocketDebuggerUrl通过http://127.0.0.1:9222/json/version在浏览器上访问来查看该属性。这是browserWSEndpointconnect 方法将调用的。

您还需要将端口地址添加到文件中的permissions数组中，manifest.json否则 ajax 请求将无法在 chrome 扩展中工作。

例如：

"permissions": [ "tabs" , "identity", "http://127.0.0.1:9222/*"],

示例popup.html文件

<!DOCTYPE html>
<html>
  <head>
    <title>Example popup</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div>
      <button id='puppeteer-button'>Do Puppeteer Things</button>
      <script src="./puppeteer/utils/browser/puppeteer-web.js"></script>
      <script type="module" src="popup.js"></script>
    </div>
  </body>
</html>

示例popup.js文件

let browserWSEndpoint = '';
const puppeteer = require("puppeteer");

async function initiatePuppeteer() {
  await fetch("http://127.0.0.1:9222/json/version")
    .then(response => response.json())
    .then(function(data) {
        browserWSEndpoint = data.webSocketDebuggerUrl;
      })
    .catch(error => console.log(error));
}

initiatePuppeteer();

// Assign button to puppeteer function

document
  .getElementById("puppeteer-button")
  .addEventListener("click", doPuppeteerThings);

async function doPuppeteerThings() {
  const browser = await puppeteer.connect({
    browserWSEndpoint: browserWSEndpoint
  });
  const page = await browser.newPage();

  // Your puppeteer code goes here

}

希望有帮助，尽管我感觉有点笨拙，但通过将远程调试附加到我的工作窗口机器上的目标字段，我没有遇到任何问题。我写了一篇关于它的简短博客文章，在此处突出显示了更好的语法。

Answer 2

实际上这是可能的，但有一些限制。Puppeteer 使用devtools-protocol ( https://chromedevtools.github.io/devtools-protocol/ )，当您在扩展清单https://developer.chrome.com/extensions/debugger 中启用 deubgger 时，该协议在 chrome 扩展中可用。但内部扩展只提供最新、稳定版本的协议（目前是 1.3 https://chromedevtools.github.io/devtools-protocol/1-3）。

但在我看来，您不需要devtools-protocol来处理您的问题。只需使用标准扩展 API https://developer.chrome.com/extensions/api_index打开您需要的任何 URL ( chrome.tabs.update )，解析 content.js 中的页面并根据需要处理该数据。