mcpField
P
puppeteer

puppeteer

github.com/aidotnetDevelopment85125 installsUpdated 39w ago
Repository

About puppeteer

A skill for automating Chrome or Chromium with Puppeteer. It supports browser tasks such as PDF generation, screenshots, scraping, and form automation.

Key features

  1. 01Headless browser automation
  2. 02Generate PDFs from HTML
  3. 03Capture page screenshots
  4. 04Scrape web page data
  5. 05Automate form entry

Use cases

  1. 01Create a PDF from HTML content
  2. 02Capture a website screenshot
  3. 03Extract data from product pages
  4. 04Fill and submit web forms

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/aidotnet/moyucode --skill puppeteer

After installing, type/puppeteerin Claude Code to confirm it loaded.

Details

From the project README

Puppeteer Tool

Description

Headless Chrome/Chromium automation for PDF generation, screenshots, web scraping, and testing.

Source

Installation

npm install puppeteer

Usage Examples

Generate PDF from HTML
import puppeteer from 'puppeteer';

async function generatePDF(html: string, outputPath: string) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.setContent(html, { waitUntil: 'networkidle0' });
  
  await page.pdf({
    path: outputPath,
    format: 'A4',
    margin: { top: '20mm', right: '20mm', bottom: '20mm', left: '20mm' },
    printBackground: true,
  });
  
  await browser.close();
}

// Usage
const html = `
  <html>
    <head><style>body { font-family: Arial; }</style></head>
    <body><h1>Invoice #001</h1><p>Total: $100.00</p></body>
  </html>
`;
await generatePDF(html, 'invoice.pdf');
Take Screenshot
async function takeScreenshot(url: string, outputPath: string) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.setViewport({ width: 1920, height: 1080 });
  await page.goto(url, { waitUntil: 'networkidle2' });
  
  await page.screenshot({
    path: outputPath,
    fullPage: true,
    type: 'png',
  });
  
  await browser.close();
}
Web Scraping
async function scrapeData(url: string) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.goto(url, { waitUntil: 'domcontentloaded' });
  
  const data = await page.evaluate(() => {
    const items = document.querySelectorAll('.product');
    return Array.from(items).map(item => ({
      title: item.querySelector('h2')?.textContent?.trim(),
      price: item.querySelector('.price')?.textContent?.trim(),
    }));
  });
  
  await browser.close();
  return data;
}
Form Automation
async function submitForm(url: string, formData: Record<string, string>) {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  
  await page.goto(url);
  
  // Fill form fields
  for (const [selector, value] of Object.entries(formData)) {
    await page.type(selector, value);
  }
  
  // Submit
  await page.click('button[type="submit"]');
  await page.waitForNavigation();
  
  await browser.close();
}

PDF Options

interface PDFOptions {
  path?: string;
  scale?: number;                    // 0.1 - 2, default 1
  displayHeaderFooter?: boolean;
  headerTemplate?: string;
  footerTemplate?: string;
  printBackground?: boolean;
  landscape?: boolean;
  pageRanges?: string;               // '1-5, 8, 11-13'
  format?: 'Letter' | 'Legal' | 'A4' | 'A3';
  width?: string;
  height?: string;
  margin?: { top, right, bottom, left };
}

Tags

browser, pdf, screenshot, automation, scraping

Compatibility

  • Codex: ✅
  • Claude Code: ✅

Comments

Markdown supported