使用Rod获取同源JavaScript和CSS资源的方法

Rod作为一个强大的Go语言浏览器自动化工具，提供了丰富的功能来监控和分析网页加载过程中的各种资源。本文将详细介绍如何利用Rod来获取网页加载过程中所有同源的JavaScript和CSS资源。

问题背景

在网页开发和分析过程中，我们经常需要了解页面加载了哪些JavaScript和CSS资源。特别是同源资源（即与主页面相同域名下的资源），这些资源通常包含了网站的核心功能和样式。

解决方案

Rod提供了网络事件监听功能，可以捕获页面加载过程中的各种网络请求。关键在于正确设置事件监听器的时机和过滤条件。

关键实现步骤

1. 事件监听时机：必须在页面导航之前设置好事件监听器，否则会错过早期的资源加载事件。

2. 资源类型过滤：通过检查NetworkResourceTypeScript和NetworkResourceTypeStylesheet来识别JavaScript和CSS资源。

3. 同源判断：可以通过比较请求URL和文档URL的域名部分来确保只捕获同源资源。

示例代码

// 必须在导航前设置事件监听
page := browser.MustPage()

// 准备收集资源URL
var resources []string

// 启动事件监听协程
go page.EachEvent(func(e *proto.NetworkRequestWillBeSent) {
    if e.Type == proto.NetworkResourceTypeScript || 
       e.Type == proto.NetworkResourceTypeStylesheet {
        // 这里可以添加同源判断逻辑
        resources = append(resources, e.Request.URL)
    }
})()

// 然后进行页面导航
page.MustNavigate("目标URL").MustWaitLoad()

注意事项

1. 事件顺序：网络事件的触发顺序很重要，过早或过晚设置监听器都会导致遗漏。

2. 资源完整性：某些资源可能是动态加载的，需要确保页面完全加载后再收集结果。

3. 性能考虑：大量资源监听可能会影响性能，建议在不需要时及时取消监听。

高级技巧

对于更复杂的场景，可以结合以下方法：

1. 框架资源：通过检查FrameID来区分主页面和iframe中的资源。

2. 资源内容：除了URL，还可以获取资源的内容和大小等信息。

3. 加载时序：记录资源加载的时间戳，分析页面加载性能。

通过以上方法，开发者可以全面掌握网页加载的资源情况，为性能优化和安全分析提供有力支持。