将当前加载的 HTML 代码发送 (POST) 到本地托管服务器

如何解决将当前加载的 HTML 代码发送 (POST) 到本地托管服务器

我有一个在本地机器上运行的端点，我想将我在浏览器中打开的任何网页的 html src 发布到它。我编写了一个 chrome 扩展，但内容安全政策不允许我使用 fetch api。

有没有办法专门绕过特定扩展的 CSP。我可以在从我的扩展程序加载页面之前修改 CSP，但这可能存在安全风险，如果我要将其分发给其他人或每天使用。

一种解决方法是访问存储在本机机器上的历史记录，然后直接从我的端点获取每个访问过的 URL。

解决方法

以防万一您在端点上使用 Node.js。

使用 puppeteer 通过 DevTools Protocol 连接到浏览器，并监控 event: 'targetcreated' 以创建新标签页和监控 event: 'load' 以打开标签页导航。然后您可以在每次导航中获得 page.content()。

像这样：

启动浏览器：

chrome.exe --remote-debugging-port=9222

使用此代码连接：

import puppeteer from 'puppeteer';

const browser = await puppeteer.connect({
  browserURL: 'http://localhost:9222',defaultViewport: null,});

try {
  browser.on('targetcreated',async (target) => {
    if (target.type() === 'page') {
      const page = await target.page();
      page.on('load',() => { getData(page); });
    }
  });

  const currentPages = await browser.pages();
  for (const page of currentPages) {
    page.on('load',() => { getData(page); });
  }

  async function getData(page) {
    console.log(await page.title());
  }

} catch (err) { console.error(err); }

目前，对于没有网站图标的网站，'load' 事件会被触发两次，但这可以通过使用简单的 URL 过滤器来消除，例如，Set 中的 URL 历史记录。