如何使用Puppeteer提取网站源码中全部链接、JS及样式文件引用

一、提取页面所有静态资源URL（含JS、CSS、字体、图片等） #

实现思路：页面加载完成后，在浏览器执行上下文遍历所有带资源引用属性的DOM节点，收集所有有效资源链接后去重存入数组，不需要解析a标签的跳转链接。

完整实现代码 #

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();
  // 可替换为你需要抓取的目标地址
  await page.goto('https://www.example.com', { waitUntil: 'networkidle2' });

  const allResourceLinks = await page.evaluate(() => {
    const links = [];
    // 遍历所有带src属性的节点：script、img、iframe、video、audio等
    document.querySelectorAll('[src]').forEach(el => {
      if (el.src && !links.includes(el.src)) links.push(el.src);
    });
    // 遍历所有带href属性的非a标签节点：link样式表、icon等
    document.querySelectorAll('[href]:not(a)').forEach(el => {
      if (el.href && !links.includes(el.href)) links.push(el.href);
    });

    // 符合你需求的for循环写入数组逻辑
    const resultArray = [];
    for (const L of links) {
      resultArray.push(L);
    }
    return resultArray;
  });

  // 输出所有资源链接数组
  console.log('所有资源链接：', allResourceLinks);

  await browser.close();
})();

上述代码会自动跳过a标签的跳转链接，仅收集源码中引用的静态资源URL。

二、提取页面所有script标签内容 #

不需要访问view-source页面，页面加载完成后直接在浏览器上下文获取所有script标签的内容即可，内联script直接取文本内容，外联script可以通过src属性关联，如果你需要外联script的源码内容可以额外发起请求获取。

完整实现代码（以nike官网为例） #

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();
  await page.goto('https://www.nike.com/', { waitUntil: 'networkidle2' });

  const allScriptContent = await page.evaluate(() => {
    const scripts = document.querySelectorAll('script');
    const scriptList = [];
    scripts.forEach((script, index) => {
      scriptList.push({
        // 标签序号，方便定位
        index: index + 1,
        // 如果是外联script则返回src
        src: script.src || null,
        // 如果是内联script则返回文本内容
        inlineContent: script.textContent || null
      });
    });
    return scriptList;
  });

  // 输出所有script内容到控制台
  allScriptContent.forEach(item => {
    console.log(`===== 第${item.index}个script标签 =====`);
    if (item.src) console.log('外联script地址：', item.src);
    if (item.inlineContent) console.log('内联script内容：', item.inlineContent);
    console.log('\n');
  });

  await browser.close();
})();

注意事项 #

• 如果你需要收集页面加载过程中动态请求的资源，可以结合page.on('request')事件监听所有网络请求，收集所有请求URL即可。
• 部分网站会有反爬机制，可能需要配置请求头、开启指纹模拟才能正常获取源码内容。

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