javascript - chrome 扩展中的 Puppeteer，没有 puppeteer-web

Question

是否可以创建一个 chrome 扩展，包含一个 puppeteer 脚本来抓取并执行一些浏览器自动化。

我想创建一个用户输入 url 单击按钮然后运行 ​​puppeteer 脚本的地方，如果可以的话，最好的实现方式是什么？

看到一些提到 puppeteer-web 的答案，但似乎 Puppeteer 团队删除了 puppeteer-web，是否有新的实现方式？

Answer 1

简短的回答是:不，这是不可能的。

Puppeteer 目前仅在 Node.Js 上运行，这意味着它是一个后端解决方案，除了在服务器上运行脚本之外，没有其他方法可以运行脚本(浏览器扩展被视为客户端)。

理论上:*
但是，您可以使用 Express将您的 puppeteer 结果暴露给 API 端点，您可以在其中定义要使用 GET url 参数抓取的页面(例如 Google 的主页:https://my-server.com/my-puppeteer-endpoint?url=https://google.com)。这可以通过您的扩展程序的点击来调用。

注意:这意味着 https://my-server.com 应该可以 24/7 全天候为您的扩展服务。例如，这就是 Grammarly 或 Google Translate 浏览器扩展与其官方 API 通信的方式。

建议解决方案的片段:

// puppeteer
const getPage = async (url) => {
...
  await page.goto(url)
...
  return resultsOfScraping
}

// express
app.get('/my-puppeteer-endpoint', async (req, res) => {
  try {
    const url = req.query.url
    const response = await getPage(url)
    res.json(response)
    console.log(`/my-puppeteer-endpoint?url=${url} endpoint has been called!`)
  } catch (e) {
    console.error(e)
  }
})

您可以从 Thomas Dondorf 关于客户端 puppeteer 使用的常青回答中获得更多想法:How to make Puppeteer work with a ReactJS application on the client-side

---

在扩展方面，您需要确保您允许您的服务器 https://my-server.com 在没有 CORS 错误的情况下被调用，参见 this question/answer .

---

*编辑/警告:在服务器上你需要 '--no-sandbox' puppeteer 启动标志，一般来说，我建议您改为在 Linux 服务器上设置自己的沙箱，如果您愿意的话(请参阅上面的链接)。

另一种可能的方法是，如果您创建一个列入白名单的域列表，您可以在其中允许您信任的页面，其他人将被扩展程序禁止(需要在服务器端实现)。