Chrome扩展开发：获取已加载网页全量HTML、CSS及媒体内容的方法

不需要通过独立爬虫实现。Chrome扩展完全可以依托浏览器已加载的内存资源，拿到和用户当前浏览状态100%匹配的全量页面内容，实现效果比通用爬虫更准确、性能更高。

现有实现的局限 #

你目前使用的document.documentElement.innerHTML，本质上只是DOM树的序列化结构字符串，仅能拿到页面的HTML骨架，其中的CSS、媒体资源还保留着原始外链路径。但这些资源实际上早已经被浏览器下载、解析并存入本地缓存和内存中，完全不需要像通用爬虫一样重新发起网络请求抓取。

具体落地方案 #

• 全量CSS收集
  直接读取浏览器原生document.styleSheets对象，这个对象会自动返回页面所有已加载完成的CSS集合，覆盖内联样式、外链样式、JS动态注入的样式三类来源。
  作为Chrome扩展，只要在manifest配置中声明对应站点的主机权限，就可以绕过同源策略限制，直接读取每条CSS规则的.cssText；遇到跨域导致的规则读取失败时，直接通过带cache: "force-cache"参数的fetch请求，从浏览器本地缓存读取外链CSS的文本内容，无需重新发起跨域网络请求。最后把收集到的全量CSS内嵌到页面的<style>标签中，替换掉原有的<link rel="stylesheet">外链节点即可。

  参考核心实现代码：

  let collectedCSS = "";
  for (const sheet of document.styleSheets) {
    try {
      // 同源权限下直接读取解析好的CSS规则
      for (const rule of sheet.cssRules) {
        collectedCSS += rule.cssText + "\n";
      }
    } catch (e) {
      // 跨域场景下从本地缓存读取CSS文本
      const resp = await fetch(sheet.href, {cache: "force-cache"});
      collectedCSS += await resp.text();
    }
  }
  

• 全量媒体资源收集
  遍历页面所有带资源引用的DOM节点，覆盖范围包括：img/video/audio标签的src属性、元素内联样式中的background-image引用、<source>标签的资源路径。
  同样通过fetch(资源URL, {cache: "force-cache"})从浏览器本地缓存读取资源的Blob内容，核心是这个缓存参数会直接命中浏览器已经存好的页面资源，不会产生新的网络请求。拿到Blob后转成base64格式的DataURL，替换掉DOM中原有的资源路径，所有图片、音视频资源就会完全内嵌到HTML中，没有任何外部链接残留。
• 最终完整内容导出
  等所有CSS、媒体资源都完成内嵌替换后，再通过document.documentElement.outerHTML序列化当前DOM树，得到的就是可以离线打开、渲染效果和用户当前看到的页面完全一致的完整HTML文件。

和爬虫方案的差异对比 #

• 通用爬虫的实现逻辑是从零开始发起流程加载页面，很容易遇到JS动态渲染、懒加载未触发、反爬校验拦截、鉴权头缺失的问题，抓到的内容经常和用户实际看到的页面状态存在偏差
• 扩展方案是直接复用浏览器当前已经渲染完成的内存状态：不管是JS动态生成的DOM、滚动触发过的懒加载图片、需要鉴权才能访问的受保护资源，都是浏览器已经加载完成的现成内容，不需要重新走加载流程，内容准确率远高于爬虫

实现注意事项：不要在无权限的网页上下文直接读取跨域资源，只要在扩展manifest的host_permissions字段中声明对应站点的匹配规则，所有资源读取的跨域限制都会自动解除。

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