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

Question

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

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

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

Answer 1

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

Puppeteer 运行目前仅在 Node.Js 上运行，这意味着它是后端解决方案，运行除了 [=55= 之外，您的脚本没有其他替代方法]将其安装在服务器上（浏览器扩展被视为 client-side）。

理论上：*
但是，您可以使用 Express to expose your puppeteer results to an API endpoint, where you could define which page you want to scrape with a GET url parameter (e.g. Google's homepage: 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 关于 client-side puppeteer 用法的常青回答中获得更多想法：

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

*EDIT/WARNING: 因为在服务器上你需要 puppeteer 启动标志，一般来说，我建议改为设置你自己的Linux 服务器上的沙箱，如果你这样做的话（参见上面的 link）。

另一种可能的方法是，如果您创建一个列入白名单的域列表，您可以在其中允许您信任的页面，其他人将被扩展禁止（需要在 server-side 上实现）。

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

Puppeteer in chrome extension, without puppeteer-web

javascript

node.js

google-chrome-extension

puppeteer