feat(script): add new scripting capabilities and documentation

This commit introduces a comprehensive set of new scripts and examples to enhance the scripting capabilities of the crawl4ai project. The changes include the addition of several Python scripts for compiling and executing scripts, as well as a variety of example scripts demonstrating different functionalities such as login flows, data extraction, and multi-step workflows. Additionally, detailed documentation has been created to guide users on how to utilize these new features effectively. The following significant modifications were made: - Added core scripting files: , , and . - Created a new documentation file to provide an overview of the new features. - Introduced multiple example scripts in the directory to showcase various use cases. - Updated and to integrate the new functionalities. - Added font assets for improved documentation presentation. These changes significantly expand the functionality of the crawl4ai project, allowing users to create more complex and varied scripts with ease.
2025-06-06 17:16:53 +08:00
parent e731596315
commit 3f6f2e998c
29 changed files with 2536 additions and 0 deletions
--- a/docs/examples/c4a_script/C4A_SCRIPT_DOCS.md
+++ b/docs/examples/c4a_script/C4A_SCRIPT_DOCS.md
@@ -0,0 +1,312 @@
+# C4A-Script Language Documentation
+
+C4A-Script (Crawl4AI Script) is a simple, powerful language for web automation. Write human-readable commands that compile to JavaScript for browser automation.
+
+## Quick Start
+
+```python
+from c4a_compile import compile
+
+# Write your script
+script = """
+GO https://example.com
+WAIT `#content` 5
+CLICK `button.submit`
+"""
+
+# Compile to JavaScript
+result = compile(script)
+
+if result.success:
+    # Use with Crawl4AI
+    config = CrawlerRunConfig(js_code=result.js_code)
+else:
+    print(f"Error at line {result.first_error.line}: {result.first_error.message}")
+```
+
+## Language Basics
+
+- **One command per line**
+- **Selectors in backticks**: `` `button.submit` ``
+- **Strings in quotes**: `"Hello World"`
+- **Variables with $**: `$username`
+- **Comments with #**: `# This is a comment`
+
+## Commands Reference
+
+### Navigation
+
+```c4a
+GO https://example.com          # Navigate to URL
+RELOAD                          # Reload current page
+BACK                            # Go back in history
+FORWARD                         # Go forward in history
+```
+
+### Waiting
+
+```c4a
+WAIT 3                          # Wait 3 seconds
+WAIT `#content` 10              # Wait for element (max 10 seconds)
+WAIT "Loading complete" 5       # Wait for text to appear
+```
+
+### Mouse Actions
+
+```c4a
+CLICK `button.submit`           # Click element
+DOUBLE_CLICK `.item`            # Double-click element
+RIGHT_CLICK `#menu`             # Right-click element
+CLICK 100 200                   # Click at coordinates
+
+MOVE 500 300                    # Move mouse to position
+DRAG 100 100 500 300           # Drag from one point to another
+
+SCROLL DOWN 500                 # Scroll down 500 pixels
+SCROLL UP                       # Scroll up (default 500px)
+SCROLL LEFT 200                 # Scroll left 200 pixels
+SCROLL RIGHT                    # Scroll right
+```
+
+### Keyboard
+
+```c4a
+TYPE "hello@example.com"        # Type text
+TYPE $email                     # Type variable value
+
+PRESS Tab                       # Press and release key
+PRESS Enter
+PRESS Escape
+
+KEY_DOWN Shift                  # Hold key down
+KEY_UP Shift                    # Release key
+```
+
+### Control Flow
+
+#### IF-THEN-ELSE
+
+```c4a
+# Check if element exists
+IF (EXISTS `.cookie-banner`) THEN CLICK `.accept`
+IF (EXISTS `#user`) THEN CLICK `.logout` ELSE CLICK `.login`
+
+# JavaScript conditions
+IF (`window.innerWidth < 768`) THEN CLICK `.mobile-menu`
+IF (`document.querySelectorAll('.item').length > 10`) THEN SCROLL DOWN
+```
+
+#### REPEAT
+
+```c4a
+# Repeat fixed number of times
+REPEAT (CLICK `.next`, 5)
+
+# Repeat based on JavaScript expression
+REPEAT (SCROLL DOWN 300, `document.querySelectorAll('.item').length`)
+
+# Repeat while condition is true (like while loop)
+REPEAT (CLICK `.load-more`, `document.querySelector('.load-more') !== null`)
+```
+
+### Variables & JavaScript
+
+```c4a
+# Set variables
+SET username = "john@example.com"
+SET count = "10"
+
+# Use variables
+TYPE $username
+
+# Execute JavaScript
+EVAL `console.log('Hello')`
+EVAL `localStorage.setItem('key', 'value')`
+```
+
+### Procedures
+
+```c4a
+# Define reusable procedure
+PROC login
+  CLICK `#email`
+  TYPE $email
+  CLICK `#password`  
+  TYPE $password
+  CLICK `button[type="submit"]`
+ENDPROC
+
+# Use procedure
+SET email = "user@example.com"
+SET password = "secure123"
+login
+
+# Procedures work with control flow
+IF (EXISTS `.login-form`) THEN login
+REPEAT (process_item, 10)
+```
+
+## API Reference
+
+### Functions
+
+```python
+from c4a_compile import compile, validate, compile_file
+
+# Compile script
+result = compile("GO https://example.com")
+
+# Validate syntax only
+result = validate(script)
+
+# Compile from file
+result = compile_file("script.c4a")
+```
+
+### Working with Results
+
+```python
+result = compile(script)
+
+if result.success:
+    # Access generated JavaScript
+    js_code = result.js_code  # List[str]
+    
+    # Use with Crawl4AI
+    config = CrawlerRunConfig(js_code=js_code)
+else:
+    # Handle errors
+    error = result.first_error
+    print(f"Line {error.line}, Column {error.column}: {error.message}")
+    
+    # Get suggestions
+    for suggestion in error.suggestions:
+        print(f"Fix: {suggestion.message}")
+    
+    # Get JSON for UI integration
+    error_json = result.to_json()
+```
+
+## Examples
+
+### Basic Automation
+
+```c4a
+GO https://example.com
+WAIT `#content` 5
+IF (EXISTS `.cookie-notice`) THEN CLICK `.accept`
+CLICK `.main-button`
+```
+
+### Form Filling
+
+```c4a
+SET email = "user@example.com"
+SET message = "Hello, I need help with my order"
+
+GO https://example.com/contact
+WAIT `form` 5
+CLICK `input[name="email"]`
+TYPE $email
+CLICK `textarea[name="message"]`
+TYPE $message
+CLICK `button[type="submit"]`
+WAIT "Thank you" 10
+```
+
+### Dynamic Content Loading
+
+```c4a
+GO https://shop.example.com
+WAIT `.product-list` 10
+
+# Load all products
+REPEAT (CLICK `.load-more`, `document.querySelector('.load-more') !== null`)
+
+# Extract data
+EVAL `
+  const count = document.querySelectorAll('.product').length;
+  console.log('Found ' + count + ' products');
+`
+```
+
+### Smart Navigation
+
+```c4a
+PROC handle_popups
+  IF (EXISTS `.cookie-banner`) THEN CLICK `.accept-all`
+  IF (EXISTS `.newsletter-modal`) THEN CLICK `.close`
+ENDPROC
+
+GO https://example.com
+handle_popups
+WAIT `.main-content` 5
+
+# Navigate based on login state
+IF (EXISTS `.user-avatar`) THEN CLICK `.dashboard` ELSE CLICK `.login`
+```
+
+## Error Messages
+
+C4A-Script provides clear, helpful error messages:
+
+```
+============================================================
+Syntax Error [E001]
+============================================================
+Location: Line 3, Column 23
+Error: Missing 'THEN' keyword after IF condition
+
+Code:
+    3 | IF (EXISTS `.button`) CLICK `.button`
+      |                       ^
+
+Suggestions:
+  1. Add 'THEN' after the condition
+============================================================
+```
+
+Common error codes:
+- **E001**: Missing 'THEN' keyword
+- **E002**: Missing closing parenthesis
+- **E003**: Missing comma in REPEAT
+- **E004**: Missing ENDPROC
+- **E005**: Undefined procedure
+- **E006**: Missing backticks for selector
+
+## Best Practices
+
+1. **Always use backticks for selectors**: `` CLICK `button` `` not `CLICK button`
+2. **Check element existence before interaction**: `IF (EXISTS `.modal`) THEN CLICK `.close`
+3. **Set appropriate wait times**: Don't wait too long or too short
+4. **Use procedures for repeated actions**: Keep your code DRY
+5. **Add comments for clarity**: `# Check if user is logged in`
+
+## Integration with Crawl4AI
+
+```python
+from c4a_compile import compile
+from crawl4ai import CrawlerRunConfig, WebCrawler
+
+# Compile your script
+script = """
+GO https://example.com
+WAIT `.content` 5
+CLICK `.load-more`
+"""
+
+result = compile(script)
+
+if result.success:
+    # Create crawler config with compiled JS
+    config = CrawlerRunConfig(
+        js_code=result.js_code,
+        wait_for="css:.results"
+    )
+    
+    # Run crawler
+    async with WebCrawler() as crawler:
+        result = await crawler.arun(config=config)
+```
+
+That's it! You're ready to automate the web with C4A-Script.
--- a/docs/examples/c4a_script/api_usage_examples.py
+++ b/docs/examples/c4a_script/api_usage_examples.py
@@ -0,0 +1,217 @@
+"""
+C4A-Script API Usage Examples
+Shows how to use the new Result-based API in various scenarios
+"""
+
+from c4a_compile import compile, validate, compile_file
+from c4a_result import CompilationResult, ValidationResult
+import json
+
+
+print("C4A-Script API Usage Examples")
+print("=" * 80)
+
+# Example 1: Basic compilation
+print("\n1. Basic Compilation")
+print("-" * 40)
+
+script = """
+GO https://example.com
+WAIT 2
+IF (EXISTS `.cookie-banner`) THEN CLICK `.accept`
+REPEAT (SCROLL DOWN 300, 3)
+"""
+
+result = compile(script)
+print(f"Success: {result.success}")
+print(f"Statements generated: {len(result.js_code) if result.js_code else 0}")
+
+# Example 2: Error handling
+print("\n\n2. Error Handling")
+print("-" * 40)
+
+error_script = """
+GO https://example.com
+IF (EXISTS `.modal`) CLICK `.close`
+undefined_procedure
+"""
+
+result = compile(error_script)
+if not result.success:
+    # Access error details
+    error = result.first_error
+    print(f"Error on line {error.line}: {error.message}")
+    print(f"Error code: {error.code}")
+    
+    # Show suggestions if available
+    if error.suggestions:
+        print("Suggestions:")
+        for suggestion in error.suggestions:
+            print(f"  - {suggestion.message}")
+
+# Example 3: Validation only
+print("\n\n3. Validation (no code generation)")
+print("-" * 40)
+
+validation_script = """
+PROC validate_form
+  IF (EXISTS `#email`) THEN TYPE "test@example.com"
+  PRESS Tab
+ENDPROC
+
+validate_form
+"""
+
+validation = validate(validation_script)
+print(f"Valid: {validation.valid}")
+if validation.errors:
+    print(f"Errors found: {len(validation.errors)}")
+
+# Example 4: JSON output for UI
+print("\n\n4. JSON Output for UI Integration")
+print("-" * 40)
+
+ui_script = """
+CLICK button.submit
+"""
+
+result = compile(ui_script)
+if not result.success:
+    # Get JSON for UI
+    error_json = result.to_dict()
+    print("Error data for UI:")
+    print(json.dumps(error_json["errors"][0], indent=2))
+
+# Example 5: File compilation
+print("\n\n5. File Compilation")
+print("-" * 40)
+
+# Create a test file
+test_file = "test_script.c4a"
+with open(test_file, "w") as f:
+    f.write("""
+GO https://example.com
+WAIT `.content` 5
+CLICK `.main-button`
+""")
+
+result = compile_file(test_file)
+print(f"File compilation: {'Success' if result.success else 'Failed'}")
+if result.success:
+    print(f"Generated {len(result.js_code)} JavaScript statements")
+
+# Clean up
+import os
+os.remove(test_file)
+
+# Example 6: Batch processing
+print("\n\n6. Batch Processing Multiple Scripts")
+print("-" * 40)
+
+scripts = [
+    "GO https://example1.com\nCLICK `.button`",
+    "GO https://example2.com\nWAIT 2",
+    "GO https://example3.com\nINVALID_CMD"
+]
+
+results = []
+for i, script in enumerate(scripts, 1):
+    result = compile(script)
+    results.append(result)
+    status = "✓" if result.success else "✗"
+    print(f"Script {i}: {status}")
+
+# Summary
+successful = sum(1 for r in results if r.success)
+print(f"\nBatch result: {successful}/{len(scripts)} successful")
+
+# Example 7: Custom error formatting
+print("\n\n7. Custom Error Formatting")
+print("-" * 40)
+
+def format_error_for_ide(error):
+    """Format error for IDE integration"""
+    return f"{error.source_line}:{error.line}:{error.column}: {error.type.value}: {error.message} [{error.code}]"
+
+error_script = "IF EXISTS `.button` THEN CLICK `.button`"
+result = compile(error_script)
+
+if not result.success:
+    error = result.first_error
+    print("IDE format:", format_error_for_ide(error))
+    print("Simple format:", error.simple_message)
+    print("Full format:", error.formatted_message)
+
+# Example 8: Working with warnings (future feature)
+print("\n\n8. Handling Warnings")
+print("-" * 40)
+
+# In the future, we might have warnings
+result = compile("GO https://example.com\nWAIT 100")  # Very long wait
+print(f"Success: {result.success}")
+print(f"Warnings: {len(result.warnings)}")
+
+# Example 9: Metadata usage
+print("\n\n9. Using Metadata")
+print("-" * 40)
+
+complex_script = """
+PROC helper1
+  CLICK `.btn1`
+ENDPROC
+
+PROC helper2
+  CLICK `.btn2`
+ENDPROC
+
+GO https://example.com
+helper1
+helper2
+"""
+
+result = compile(complex_script)
+if result.success:
+    print(f"Script metadata:")
+    for key, value in result.metadata.items():
+        print(f"  {key}: {value}")
+
+# Example 10: Integration patterns
+print("\n\n10. Integration Patterns")
+print("-" * 40)
+
+# Web API endpoint simulation
+def api_compile(request_body):
+    """Simulate API endpoint"""
+    script = request_body.get("script", "")
+    result = compile(script)
+    
+    response = {
+        "status": "success" if result.success else "error",
+        "data": result.to_dict()
+    }
+    return response
+
+# CLI tool simulation
+def cli_compile(script, output_format="text"):
+    """Simulate CLI tool"""
+    result = compile(script)
+    
+    if output_format == "json":
+        return result.to_json()
+    elif output_format == "simple":
+        if result.success:
+            return f"OK: {len(result.js_code)} statements"
+        else:
+            return f"ERROR: {result.first_error.simple_message}"
+    else:
+        return str(result)
+
+# Test the patterns
+api_response = api_compile({"script": "GO https://example.com"})
+print(f"API response status: {api_response['status']}")
+
+cli_output = cli_compile("WAIT 2", "simple")
+print(f"CLI output: {cli_output}")
+
+print("\n" + "=" * 80)
+print("All examples completed successfully!")
--- a/docs/examples/c4a_script/c4a_script_hello_world.py
+++ b/docs/examples/c4a_script/c4a_script_hello_world.py
@@ -0,0 +1,53 @@
+"""
+C4A-Script Hello World
+A concise example showing how to use the C4A-Script compiler
+"""
+
+from c4a_compile import compile
+
+# Define your C4A-Script
+script = """
+GO https://example.com
+WAIT `#content` 5
+IF (EXISTS `.cookie-banner`) THEN CLICK `.accept`
+CLICK `button.submit`
+"""
+
+# Compile the script
+result = compile(script)
+
+# Check if compilation was successful
+if result.success:
+    # Success! Use the generated JavaScript
+    print("✅ Compilation successful!")
+    print(f"Generated {len(result.js_code)} JavaScript statements:\n")
+    
+    for i, js in enumerate(result.js_code, 1):
+        print(f"{i}. {js}\n")
+    
+    # In real usage, you'd pass result.js_code to Crawl4AI:
+    # config = CrawlerRunConfig(js_code=result.js_code)
+    
+else:
+    # Error! Handle the compilation error
+    print("❌ Compilation failed!")
+    
+    # Get the first error (there might be multiple)
+    error = result.first_error
+    
+    # Show error details
+    print(f"Error at line {error.line}, column {error.column}")
+    print(f"Message: {error.message}")
+    
+    # Show the problematic code
+    print(f"\nCode: {error.source_line}")
+    print(" " * (6 + error.column) + "^")
+    
+    # Show suggestions if available
+    if error.suggestions:
+        print("\n💡 How to fix:")
+        for suggestion in error.suggestions:
+            print(f"   {suggestion.message}")
+    
+    # For debugging or logging, you can also get JSON
+    # error_json = result.to_json()
--- a/docs/examples/c4a_script/c4a_script_hello_world_error.py
+++ b/docs/examples/c4a_script/c4a_script_hello_world_error.py
@@ -0,0 +1,53 @@
+"""
+C4A-Script Hello World - Error Example
+Shows how error handling works
+"""
+
+from c4a_compile import compile
+
+# Define a script with an error (missing THEN)
+script = """
+GO https://example.com
+WAIT `#content` 5
+IF (EXISTS `.cookie-banner`) CLICK `.accept`
+CLICK `button.submit`
+"""
+
+# Compile the script
+result = compile(script)
+
+# Check if compilation was successful
+if result.success:
+    # Success! Use the generated JavaScript
+    print("✅ Compilation successful!")
+    print(f"Generated {len(result.js_code)} JavaScript statements:\n")
+    
+    for i, js in enumerate(result.js_code, 1):
+        print(f"{i}. {js}\n")
+    
+    # In real usage, you'd pass result.js_code to Crawl4AI:
+    # config = CrawlerRunConfig(js_code=result.js_code)
+    
+else:
+    # Error! Handle the compilation error
+    print("❌ Compilation failed!")
+    
+    # Get the first error (there might be multiple)
+    error = result.first_error
+    
+    # Show error details
+    print(f"Error at line {error.line}, column {error.column}")
+    print(f"Message: {error.message}")
+    
+    # Show the problematic code
+    print(f"\nCode: {error.source_line}")
+    print(" " * (6 + error.column) + "^")
+    
+    # Show suggestions if available
+    if error.suggestions:
+        print("\n💡 How to fix:")
+        for suggestion in error.suggestions:
+            print(f"   {suggestion.message}")
+    
+    # For debugging or logging, you can also get JSON
+    # error_json = result.to_json()
--- a/docs/examples/c4a_script/demo_c4a_crawl4ai.py
+++ b/docs/examples/c4a_script/demo_c4a_crawl4ai.py
@@ -0,0 +1,285 @@
+"""
+Demonstration of C4A-Script integration with Crawl4AI
+Shows various use cases and features
+"""
+
+import asyncio
+from crawl4ai import AsyncWebCrawler, CrawlerRunConfig
+from crawl4ai import c4a_compile, CompilationResult
+
+async def example_basic_usage():
+    """Basic C4A-Script usage with Crawl4AI"""
+    print("\n" + "="*60)
+    print("Example 1: Basic C4A-Script Usage")
+    print("="*60)
+    
+    # Define your automation script
+    c4a_script = """
+    # Wait for page to load
+    WAIT `body` 2
+    
+    # Handle cookie banner if present
+    IF (EXISTS `.cookie-banner`) THEN CLICK `.accept-btn`
+    
+    # Scroll down to load more content
+    SCROLL DOWN 500
+    WAIT 1
+    
+    # Click load more button if exists
+    IF (EXISTS `.load-more`) THEN CLICK `.load-more`
+    """
+    
+    # Create crawler config with C4A script
+    config = CrawlerRunConfig(
+        url="https://example.com",
+        c4a_script=c4a_script,
+        wait_for="css:.content",
+        verbose=False
+    )
+    
+    print("✅ C4A Script compiled successfully!")
+    print(f"Generated {len(config.js_code)} JavaScript commands")
+    
+    # In production, you would run:
+    # async with AsyncWebCrawler() as crawler:
+    #     result = await crawler.arun(config=config)
+
+
+async def example_form_filling():
+    """Form filling with C4A-Script"""
+    print("\n" + "="*60)
+    print("Example 2: Form Filling with C4A-Script")
+    print("="*60)
+    
+    # Form automation script
+    form_script = """
+    # Set form values
+    SET email = "test@example.com"
+    SET message = "This is a test message"
+    
+    # Fill the form
+    CLICK `#email-input`
+    TYPE $email
+    
+    CLICK `#message-textarea`
+    TYPE $message
+    
+    # Submit the form
+    CLICK `button[type="submit"]`
+    
+    # Wait for success message
+    WAIT `.success-message` 10
+    """
+    
+    config = CrawlerRunConfig(
+        url="https://example.com/contact",
+        c4a_script=form_script
+    )
+    
+    print("✅ Form filling script ready")
+    print("Script will:")
+    print("  - Fill email field")
+    print("  - Fill message textarea")
+    print("  - Submit form")
+    print("  - Wait for confirmation")
+
+
+async def example_dynamic_loading():
+    """Handle dynamic content loading"""
+    print("\n" + "="*60)
+    print("Example 3: Dynamic Content Loading")
+    print("="*60)
+    
+    # Script for infinite scroll or pagination
+    pagination_script = """
+    # Initial wait
+    WAIT `.product-list` 5
+    
+    # Load all products by clicking "Load More" repeatedly
+    REPEAT (CLICK `.load-more`, `document.querySelector('.load-more') !== null`)
+    
+    # Alternative: Scroll to load (infinite scroll)
+    # REPEAT (SCROLL DOWN 1000, `document.querySelectorAll('.product').length < 100`)
+    
+    # Extract count
+    EVAL `console.log('Products loaded: ' + document.querySelectorAll('.product').length)`
+    """
+    
+    config = CrawlerRunConfig(
+        url="https://example.com/products",
+        c4a_script=pagination_script,
+        screenshot=True  # Capture final state
+    )
+    
+    print("✅ Dynamic loading script ready")
+    print("Script will load all products by repeatedly clicking 'Load More'")
+
+
+async def example_multi_step_workflow():
+    """Complex multi-step workflow with procedures"""
+    print("\n" + "="*60)
+    print("Example 4: Multi-Step Workflow with Procedures")
+    print("="*60)
+    
+    # Complex workflow with reusable procedures
+    workflow_script = """
+    # Define login procedure
+    PROC login
+      CLICK `#username`
+      TYPE "demo_user"
+      CLICK `#password`
+      TYPE "demo_pass"
+      CLICK `#login-btn`
+      WAIT `.dashboard` 10
+    ENDPROC
+    
+    # Define search procedure
+    PROC search_product
+      CLICK `.search-box`
+      TYPE "laptop"
+      PRESS Enter
+      WAIT `.search-results` 5
+    ENDPROC
+    
+    # Main workflow
+    GO https://example.com
+    login
+    search_product
+    
+    # Process results
+    IF (EXISTS `.no-results`) THEN EVAL `console.log('No products found')`
+    ELSE REPEAT (CLICK `.add-to-cart`, 3)
+    """
+    
+    # Compile to check for errors
+    result = c4a_compile(workflow_script)
+    
+    if result.success:
+        print("✅ Complex workflow compiled successfully!")
+        print("Workflow includes:")
+        print("  - Login procedure")
+        print("  - Product search")
+        print("  - Conditional cart additions")
+        
+        config = CrawlerRunConfig(
+            url="https://example.com",
+            c4a_script=workflow_script
+        )
+    else:
+        print("❌ Compilation error:")
+        error = result.first_error
+        print(f"  Line {error.line}: {error.message}")
+
+
+async def example_error_handling():
+    """Demonstrate error handling"""
+    print("\n" + "="*60)
+    print("Example 5: Error Handling")
+    print("="*60)
+    
+    # Script with intentional error
+    bad_script = """
+    WAIT body 2
+    CLICK button
+    IF (EXISTS .modal) CLICK .close
+    """
+    
+    try:
+        config = CrawlerRunConfig(
+            url="https://example.com",
+            c4a_script=bad_script
+        )
+    except ValueError as e:
+        print("✅ Error caught as expected:")
+        print(f"  {e}")
+        
+    # Fixed version
+    good_script = """
+    WAIT `body` 2
+    CLICK `button`
+    IF (EXISTS `.modal`) THEN CLICK `.close`
+    """
+    
+    config = CrawlerRunConfig(
+        url="https://example.com",
+        c4a_script=good_script
+    )
+    
+    print("\n✅ Fixed script compiled successfully!")
+
+
+async def example_combining_with_extraction():
+    """Combine C4A-Script with extraction strategies"""
+    print("\n" + "="*60)
+    print("Example 6: C4A-Script + Extraction Strategies")
+    print("="*60)
+    
+    from crawl4ai import JsonCssExtractionStrategy
+    
+    # Script to prepare page for extraction
+    prep_script = """
+    # Expand all collapsed sections
+    REPEAT (CLICK `.expand-btn`, `document.querySelectorAll('.expand-btn:not(.expanded)').length > 0`)
+    
+    # Load all comments
+    IF (EXISTS `.load-comments`) THEN CLICK `.load-comments`
+    WAIT `.comments-section` 5
+    
+    # Close any popups
+    IF (EXISTS `.popup-close`) THEN CLICK `.popup-close`
+    """
+    
+    # Define extraction schema
+    schema = {
+        "name": "article",
+        "selector": "article.main",
+        "fields": {
+            "title": {"selector": "h1", "type": "text"},
+            "content": {"selector": ".content", "type": "text"},
+            "comments": {
+                "selector": ".comment",
+                "type": "list",
+                "fields": {
+                    "author": {"selector": ".author", "type": "text"},
+                    "text": {"selector": ".text", "type": "text"}
+                }
+            }
+        }
+    }
+    
+    config = CrawlerRunConfig(
+        url="https://example.com/article",
+        c4a_script=prep_script,
+        extraction_strategy=JsonCssExtractionStrategy(schema),
+        wait_for="css:.comments-section"
+    )
+    
+    print("✅ Combined C4A + Extraction ready")
+    print("Workflow:")
+    print("  1. Expand collapsed sections")
+    print("  2. Load comments")
+    print("  3. Extract structured data")
+
+
+async def main():
+    """Run all examples"""
+    print("\n🚀 C4A-Script + Crawl4AI Integration Demo\n")
+    
+    # Run all examples
+    await example_basic_usage()
+    await example_form_filling()
+    await example_dynamic_loading()
+    await example_multi_step_workflow()
+    await example_error_handling()
+    await example_combining_with_extraction()
+    
+    print("\n" + "="*60)
+    print("✅ All examples completed successfully!")
+    print("="*60)
+    
+    print("\nTo run actual crawls, uncomment the AsyncWebCrawler sections")
+    print("or create your own scripts using these examples as templates.")
+
+
+if __name__ == "__main__":
+    asyncio.run(main())
--- a/docs/examples/c4a_script/examples/add_to_cart.c4a
+++ b/docs/examples/c4a_script/examples/add_to_cart.c4a
@@ -0,0 +1,7 @@
+GO https://store.example.com/product/laptop
+WAIT `.product-details` 8
+CLICK `button.add-to-cart`
+WAIT `.cart-notification` 3
+CLICK `.cart-icon`
+WAIT `.checkout-btn` 5
+CLICK `.checkout-btn`
--- a/docs/examples/c4a_script/examples/advanced_control_flow.c4a
+++ b/docs/examples/c4a_script/examples/advanced_control_flow.c4a
@@ -0,0 +1,43 @@
+# Advanced control flow with IF, EXISTS, and REPEAT
+
+# Define reusable procedures
+PROC handle_cookie_banner
+  IF (EXISTS `.cookie-banner`) THEN CLICK `.accept-cookies`
+  IF (EXISTS `.privacy-notice`) THEN CLICK `.dismiss-privacy`
+ENDPROC
+
+PROC scroll_to_load
+  SCROLL DOWN 500
+  WAIT 0.5
+ENDPROC
+
+PROC try_login
+  CLICK `#email`
+  TYPE "user@example.com"
+  CLICK `#password`
+  TYPE "secure123"
+  CLICK `button[type="submit"]`
+  WAIT 2
+ENDPROC
+
+# Main script
+GO https://example.com
+WAIT 2
+
+# Handle popups
+handle_cookie_banner
+
+# Conditional navigation based on login state
+IF (EXISTS `.user-menu`) THEN CLICK `.dashboard-link` ELSE try_login
+
+# Repeat scrolling based on content count
+REPEAT (scroll_to_load, 5)
+
+# Load more content while button exists
+REPEAT (CLICK `.load-more`, `document.querySelector('.load-more') && !document.querySelector('.no-more-content')`)
+
+# Process items conditionally
+IF (`document.querySelectorAll('.item').length > 10`) THEN EVAL `console.log('Found ' + document.querySelectorAll('.item').length + ' items')`
+
+# Complex condition with viewport check
+IF (`window.innerWidth < 768 && document.querySelector('.mobile-menu')`) THEN CLICK `.mobile-menu-toggle`
--- a/docs/examples/c4a_script/examples/conditional_login.c4a
+++ b/docs/examples/c4a_script/examples/conditional_login.c4a
@@ -0,0 +1,8 @@
+GO https://myapp.com
+WAIT 2
+IF (EXISTS `.user-avatar`) THEN CLICK `.logout` ELSE CLICK `.login`
+WAIT `#auth-form` 5
+IF (EXISTS `#auth-form`) THEN TYPE "user@example.com"
+IF (EXISTS `#auth-form`) THEN PRESS Tab
+IF (EXISTS `#auth-form`) THEN TYPE "password123"
+IF (EXISTS `#auth-form`) THEN CLICK `button[type="submit"]`
--- a/docs/examples/c4a_script/examples/data_extraction.c4a
+++ b/docs/examples/c4a_script/examples/data_extraction.c4a
@@ -0,0 +1,56 @@
+# Data extraction example
+# Scrapes product information from an e-commerce site
+
+# Navigate to products page
+GO https://shop.example.com/products
+WAIT `.product-list` 10
+
+# Scroll to load lazy-loaded content
+SCROLL DOWN 500
+WAIT 1
+SCROLL DOWN 500
+WAIT 1
+SCROLL DOWN 500
+WAIT 2
+
+# Extract product data
+EVAL `
+  // Extract all product information
+  const products = Array.from(document.querySelectorAll('.product-card')).map((card, index) => {
+    return {
+      id: index + 1,
+      name: card.querySelector('.product-title')?.textContent?.trim() || 'N/A',
+      price: card.querySelector('.price')?.textContent?.trim() || 'N/A',
+      rating: card.querySelector('.rating')?.textContent?.trim() || 'N/A',
+      availability: card.querySelector('.in-stock') ? 'In Stock' : 'Out of Stock',
+      image: card.querySelector('img')?.src || 'N/A'
+    };
+  });
+
+  // Log results
+  console.log('=== Product Extraction Results ===');
+  console.log('Total products found:', products.length);
+  console.log(JSON.stringify(products, null, 2));
+  
+  // Save to localStorage for retrieval
+  localStorage.setItem('scraped_products', JSON.stringify(products));
+`
+
+# Optional: Click on first product for details
+CLICK `.product-card:first-child`
+WAIT `.product-details` 5
+
+# Extract detailed information
+EVAL `
+  const details = {
+    description: document.querySelector('.product-description')?.textContent?.trim(),
+    specifications: Array.from(document.querySelectorAll('.spec-item')).map(spec => ({
+      label: spec.querySelector('.spec-label')?.textContent,
+      value: spec.querySelector('.spec-value')?.textContent
+    })),
+    reviews: document.querySelector('.review-count')?.textContent
+  };
+  
+  console.log('=== Product Details ===');
+  console.log(JSON.stringify(details, null, 2));
+`
--- a/docs/examples/c4a_script/examples/fill_contact.c4a
+++ b/docs/examples/c4a_script/examples/fill_contact.c4a
@@ -0,0 +1,8 @@
+GO https://company.com/contact
+WAIT `form#contact` 10
+TYPE "John Smith"
+PRESS Tab
+TYPE "john@email.com"
+PRESS Tab
+TYPE "Need help with my order"
+CLICK `button[type="submit"]`
--- a/docs/examples/c4a_script/examples/load_more_content.c4a
+++ b/docs/examples/c4a_script/examples/load_more_content.c4a
@@ -0,0 +1,7 @@
+GO https://news.example.com
+WAIT `.article-list` 5
+REPEAT (SCROLL DOWN 500, 3)
+WAIT 1
+REPEAT (CLICK `.load-more`, `document.querySelector('.load-more') !== null`)
+WAIT 2
+IF (`document.querySelectorAll('.article').length > 20`) THEN EVAL `console.log('Loaded enough articles')`
--- a/docs/examples/c4a_script/examples/login_flow.c4a
+++ b/docs/examples/c4a_script/examples/login_flow.c4a
@@ -0,0 +1,36 @@
+# Login flow with error handling
+# Demonstrates procedures, variables, and conditional checks
+
+# Define login procedure
+PROC perform_login
+  CLICK `input#email`
+  TYPE $email
+  CLICK `input#password`
+  TYPE $password
+  CLICK `button.login-submit`
+ENDPROC
+
+# Set credentials
+SET email = "user@example.com"
+SET password = "securePassword123"
+
+# Navigate to login page
+GO https://app.example.com/login
+WAIT `.login-container` 15
+
+# Attempt login
+perform_login
+
+# Wait for page to load
+WAIT 3
+
+# Check if login was successful
+EVAL `
+  if (document.querySelector('.dashboard')) {
+    console.log('Login successful - on dashboard');
+  } else if (document.querySelector('.error-message')) {
+    console.log('Login failed:', document.querySelector('.error-message').textContent);
+  } else {
+    console.log('Unknown state after login');
+  }
+`
--- a/docs/examples/c4a_script/examples/multi_step_workflow.c4a
+++ b/docs/examples/c4a_script/examples/multi_step_workflow.c4a
@@ -0,0 +1,106 @@
+# Multi-step e-commerce workflow
+# Complete purchase flow with procedures and error handling
+
+# Reusable procedures
+PROC search_product
+  CLICK `input.search-bar`
+  TYPE $search_term
+  PRESS Enter
+  WAIT `.search-results` 10
+ENDPROC
+
+PROC add_first_item_to_cart
+  CLICK `.product-item:first-child .add-to-cart`
+  WAIT ".added-to-cart-notification" 3
+ENDPROC
+
+PROC go_to_checkout
+  CLICK `.cart-icon`
+  WAIT `.cart-drawer` 5
+  CLICK `button.proceed-to-checkout`
+  WAIT `.checkout-page` 10
+ENDPROC
+
+PROC fill_customer_info
+  # Billing information
+  CLICK `#billing-firstname`
+  TYPE $first_name
+  CLICK `#billing-lastname`
+  TYPE $last_name
+  CLICK `#billing-email`
+  TYPE $email
+  CLICK `#billing-phone`
+  TYPE $phone
+  
+  # Address
+  CLICK `#billing-address`
+  TYPE $address
+  CLICK `#billing-city`
+  TYPE $city
+  CLICK `#billing-state`
+  TYPE $state
+  CLICK `#billing-zip`
+  TYPE $zip
+ENDPROC
+
+PROC select_shipping
+  CLICK `input[value="standard"]`
+  WAIT 1
+ENDPROC
+
+# Set all required variables
+SET search_term = "wireless headphones"
+SET first_name = "John"
+SET last_name = "Doe"
+SET email = "john.doe@example.com"
+SET phone = "555-0123"
+SET address = "123 Main Street"
+SET city = "San Francisco"
+SET state = "CA"
+SET zip = "94105"
+
+# Main workflow starts here
+GO https://shop.example.com
+WAIT `.homepage-loaded` 10
+
+# Step 1: Search and add to cart
+search_product
+EVAL `console.log('Found', document.querySelectorAll('.product-item').length, 'products')`
+add_first_item_to_cart
+
+# Add a second item
+CLICK `.product-item:nth-child(2) .add-to-cart`
+WAIT 2
+
+# Step 2: Go to checkout
+go_to_checkout
+
+# Step 3: Fill customer information
+fill_customer_info
+
+# Step 4: Select shipping method
+select_shipping
+
+# Step 5: Continue to payment
+CLICK `button.continue-to-payment`
+WAIT `.payment-section` 10
+
+# Log order summary
+EVAL `
+  const orderTotal = document.querySelector('.order-total')?.textContent;
+  const itemCount = document.querySelectorAll('.order-item').length;
+  console.log('=== Order Summary ===');
+  console.log('Items:', itemCount);
+  console.log('Total:', orderTotal);
+  
+  // Get all items
+  const items = Array.from(document.querySelectorAll('.order-item')).map(item => ({
+    name: item.querySelector('.item-name')?.textContent,
+    quantity: item.querySelector('.item-quantity')?.textContent,
+    price: item.querySelector('.item-price')?.textContent
+  }));
+  console.log('Items:', JSON.stringify(items, null, 2));
+`
+
+# Note: Stopping here before actual payment submission
+EVAL `console.log('Workflow completed - stopped before payment submission')`
--- a/docs/examples/c4a_script/examples/navigate_tabs.c4a
+++ b/docs/examples/c4a_script/examples/navigate_tabs.c4a
@@ -0,0 +1,8 @@
+GO https://app.example.com
+WAIT `.nav-menu` 8
+CLICK `a[href="/products"]`
+WAIT 2
+CLICK `a[href="/about"]`
+WAIT 2
+BACK
+WAIT 1
--- a/docs/examples/c4a_script/examples/quick_login.c4a
+++ b/docs/examples/c4a_script/examples/quick_login.c4a
@@ -0,0 +1,8 @@
+GO https://myapp.com/login
+WAIT `input#email` 5
+CLICK `input#email`
+TYPE "user@example.com"
+PRESS Tab
+TYPE "password123"
+CLICK `button.login-btn`
+WAIT `.dashboard` 10
--- a/docs/examples/c4a_script/examples/responsive_actions.c4a
+++ b/docs/examples/c4a_script/examples/responsive_actions.c4a
@@ -0,0 +1,7 @@
+GO https://responsive.site.com
+WAIT 2
+IF (`window.innerWidth < 768`) THEN CLICK `.mobile-menu`
+IF (`window.innerWidth < 768`) THEN WAIT `.mobile-nav` 3
+IF (`window.innerWidth >= 768`) THEN CLICK `.desktop-menu li:nth-child(2)`
+REPEAT (CLICK `.next-slide`, 5)
+IF (EXISTS `.cookie-banner`) THEN CLICK `.accept-cookies`
--- a/docs/examples/c4a_script/examples/scroll_and_click.c4a
+++ b/docs/examples/c4a_script/examples/scroll_and_click.c4a
@@ -0,0 +1,8 @@
+GO https://news.site.com
+WAIT `.article-list` 10
+SCROLL DOWN 500
+WAIT 1
+SCROLL DOWN 500
+WAIT 1
+CLICK `.article:nth-child(5)`
+WAIT `.article-content` 5
--- a/docs/examples/c4a_script/examples/search_product.c4a
+++ b/docs/examples/c4a_script/examples/search_product.c4a
@@ -0,0 +1,7 @@
+GO https://shop.example.com
+WAIT `.search-bar` 10
+CLICK `.search-bar`
+TYPE "wireless headphones"
+PRESS Enter
+WAIT `.results` 5
+CLICK `.product-card:first-child`
--- a/docs/examples/c4a_script/examples/simple_form.c4a
+++ b/docs/examples/c4a_script/examples/simple_form.c4a
@@ -0,0 +1,19 @@
+# Simple form submission example
+# This script fills out a contact form and submits it
+
+GO https://example.com/contact
+WAIT `form#contact-form` 10
+
+# Fill out the form fields
+CLICK `input[name="name"]`
+TYPE "Alice Smith"
+PRESS Tab
+TYPE "alice@example.com"
+PRESS Tab
+TYPE "I'd like to learn more about your services"
+
+# Submit the form
+CLICK `button[type="submit"]`
+
+# Wait for success message
+WAIT "Thank you for your message" 5
--- a/docs/examples/c4a_script/examples/smart_form_fill.c4a
+++ b/docs/examples/c4a_script/examples/smart_form_fill.c4a
@@ -0,0 +1,11 @@
+PROC fill_field
+  TYPE "test@example.com"
+  PRESS Tab
+ENDPROC
+
+GO https://forms.example.com
+WAIT `form` 5
+IF (EXISTS `input[type="email"]`) THEN CLICK `input[type="email"]`
+IF (EXISTS `input[type="email"]`) THEN fill_field
+REPEAT (PRESS Tab, `document.activeElement.type !== 'submit'`)
+CLICK `button[type="submit"]`
--- a/docs/examples/c4a_script/tutorial/assets/DankMono-Bold.woff2
+++ b/docs/examples/c4a_script/tutorial/assets/DankMono-Bold.woff2
--- a/docs/examples/c4a_script/tutorial/assets/DankMono-Italic.woff2
+++ b/docs/examples/c4a_script/tutorial/assets/DankMono-Italic.woff2
--- a/docs/examples/c4a_script/tutorial/assets/DankMono-Regular.woff2
+++ b/docs/examples/c4a_script/tutorial/assets/DankMono-Regular.woff2