如何抓取 Open Collective：财务与贡献者数据指南

from playwright.sync_api import sync_playwright

def scrape_opencollective():
    with sync_playwright() as p:
        # 启动支持 JS 的浏览器
        browser = p.chromium.launch(headless=True)
        page = browser.new_page()
        page.goto('https://opencollective.com/discover')
        
        # 等待集体卡片加载
        page.wait_for_selector('.CollectiveCard')
        
        # 从 DOM 中提取数据
        collectives = page.query_selector_all('.CollectiveCard')
        for c in collectives:
            name = c.query_selector('h2').inner_text()
            print(f'Found project: {name}')
            
        browser.close()

scrape_opencollective()

import scrapy
import json

class OpenCollectiveSpider(scrapy.Spider):
    name = 'opencollective'
    start_urls = ['https://opencollective.com/webpack']

    def parse(self, response):
        # Open Collective 使用 Next.js；数据通常位于 script 标签内
        next_data = response.xpath('//script[@id="__NEXT_DATA__"]/text()').get()
        if next_data:
            parsed_data = json.loads(next_data)
            collective = parsed_data['props']['pageProps']['collective']
            
            yield {
                'name': collective.get('name'),
                'balance': collective.get('stats', {}).get('balance'),
                'currency': collective.get('currency')
            }

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://opencollective.com/discover');
  
  // 等待动态内容加载
  await page.waitForSelector('.CollectiveCard');
  
  // 遍历元素以提取名称
  const data = await page.evaluate(() => {
    return Array.from(document.querySelectorAll('.CollectiveCard')).map(el => ({
      name: el.querySelector('h2').innerText
    }));
  });
  
  console.log(data);
  await browser.close();
})();