JavaScript Support

Both the HTML/CSS API and Screenshot API support JavaScript execution, allowing you to create dynamic content and interact with web pages before capturing images.

HTML/CSS API JavaScript Support

The HTML/CSS API executes JavaScript in your HTML content before capturing the image.

Inline Scripts

{
    "html": "<div id='content'>Loading...</div><script>document.getElementById('content').innerHTML = 'Hello ' + new Date().toLocaleString();</script>"
}

External Scripts

{
    "html": "<div id='chart'></div><script src='https://cdn.jsdelivr.net/npm/chart.js'></script><script>new Chart(document.getElementById('chart'), { /* chart config */ });</script>"
}

Best Practices

1. Wait for Content

   {
       "html": "<div id='root'></div><script>
       setTimeout(() => {
           document.getElementById('root').innerHTML = 'Content loaded';
       }, 1000);</script>"
   }

2. Load Dependencies

   {
       "html": "<div class='content'></div>
       <script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
       <script>
           $('.content').text('Added with jQuery');
       </script>"
   }

Screenshot API JavaScript Support

The Screenshot API allows you to capture screenshots of web pages. Note that JavaScript execution is not supported in the Screenshot API - you can only provide a URL to capture.

Wait for Elements

{
    "url": "https://example.com",
    "wait_for_selector": "#dynamic-content"
}

Handling iframes and Embedded Content

When dealing with iframes or embedded content, wait_for_selector won’t be able to detect elements inside iframes. Instead, use the ms_delay parameter to specify a fixed delay in milliseconds:

{
    "url": "https://example.com",
    "ms_delay": 5000
}

Security Considerations

1. Content Security Policy (CSP)

   • External scripts must be from trusted sources
   • Inline scripts are allowed by default
   • Use HTTPS for external resources

2. Cross-Origin Requests

   • External resources must allow CORS
   • Some APIs may require authentication
   • Consider hosting critical scripts locally

3. Script Timeouts

   • Scripts have a 30-second execution limit
   • Use async/await responsibly
   • Handle timeouts gracefully

Debugging JavaScript

1. Console Logs

   • Console logs are not visible in the API response
   • Use DOM manipulation to show debug info
   • Consider using webhook callbacks for debugging

2. Error Handling

{
    "html": "<div id='content'></div><script>
    try {
        // Your code here
    } catch (e) {
        document.getElementById('content').innerHTML = 'Error: ' + e.message;
    }
    </script>"
}

3. Testing Scripts
   • Test scripts locally first
   • Use Chrome DevTools for debugging
   • Verify timing and async operations