如何在Angular网站中用Puppeteer提取navigator.share对话框内的链接

方法1：拦截navigator.share调用 #

直接重写浏览器的navigator.shareAPI，捕获它接收的分享参数，无需深挖Angular内部逻辑：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // 页面加载前注入拦截代码
  await page.evaluateOnNewDocument(() => {
    navigator.share = async (shareData) => {
      // 将分享数据挂载到全局对象供Puppeteer读取
      window.__capturedShareData = shareData;
      // 模拟成功返回，避免页面抛出错误
      return Promise.resolve();
    };
  });

  await page.goto('目标网站地址'); // 替换为你要访问的网站URL

  // 定位并点击分享按钮
  await page.click('.btn.btn-whatsapp.w-100.ng-star-inserted');
  // 读取捕获到的分享数据
  const capturedData = await page.evaluate(() => window.__capturedShareData);

  console.log('提取到的分享链接:', capturedData?.url);
  await browser.close();
})();

方法2：直接调用Angular组件的分享方法 #

如果能定位到按钮绑定的Angular组件方法，可以跳过点击操作，直接调用方法获取链接：

1. 打开浏览器开发者工具，选中分享按钮，查看是否有(click)绑定的方法（比如(click)="handleShare()"）；
2. 用Angular DevTools扩展定位组件实例，确认方法名；
3. 在Puppeteer中调用该方法：

const shareUrl = await page.evaluate(() => {
  // 定位到卡片或按钮所在的组件元素
  const targetElement = document.querySelector('.btn.btn-whatsapp.w-100.ng-star-inserted').closest('卡片容器选择器');
  // 获取Angular组件实例
  const component = ng.probe(targetElement).componentInstance;
  // 调用分享方法，返回链接
  return component.handleShare().then(data => data.url);
});

注：该方法仅适用于未开启代码混淆的Angular项目。

方法3：从DOM或网络请求中提取 #

很多网站的分享链接会提前嵌入DOM，或通过API请求获取：

• 检查卡片元素的data-*属性：

const shareUrl = await page.$eval('.btn.btn-whatsapp.w-100.ng-star-inserted', el => {
  return el.closest('卡片容器选择器').dataset.shareUrl || el.dataset.shareUrl;
});

• 监听网络请求，捕获分享链接接口的响应：

page.on('response', async (res) => {
  // 根据接口特征过滤，比如包含share/link关键词
  if (res.url().match(/share|link/)) {
    const resData = await res.json();
    if (resData.url) console.log('API返回的分享链接:', resData.url);
  }
});

// 点击按钮触发请求
await page.click('.btn.btn-whatsapp.w-100.ng-star-inserted');

内容的提问来源于stack exchange，提问作者Kraken