将当前加载的 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 历史记录。

browser-extension javascript