40640badad
This commit introduces significant enhancements to the Crawl4AI ecosystem: Chrome Extension - Script Builder (Alpha): - Add recording functionality to capture user interactions (clicks, typing, scrolling) - Implement smart event grouping for cleaner script generation - Support export to both JavaScript and C4A script formats - Add timeline view for visualizing and editing recorded actions - Include wait commands (time-based and element-based) - Add saved flows functionality for reusing automation scripts - Update UI with consistent dark terminal theme (Dank Mono font, green/pink accents) - Release new extension versions: v1.1.0, v1.2.0, v1.2.1 LLM Context Builder Improvements: - Reorganize context files from llmtxt/ to llm.txt/ with better structure - Separate diagram templates from text content (diagrams/ and txt/ subdirectories) - Add comprehensive context files for all major Crawl4AI components - Improve file naming convention for better discoverability Documentation Updates: - Update apps index page to match main documentation theme - Standardize color scheme: "Available" tags use primary color (#50ffff) - Change "Coming Soon" tags to dark gray for better visual hierarchy - Add interactive two-column layout for extension landing page - Include code examples for both Schema Builder and Script Builder features Technical Improvements: - Enhance event capture mechanism with better element selection - Add support for contenteditable elements and complex form interactions - Implement proper scroll event handling for both window and element scrolling - Add meta key support for keyboard shortcuts - Improve selector generation for more reliable element targeting The Script Builder is released as Alpha, acknowledging potential bugs while providing early access to this powerful automation recording feature.
103 lines
5.1 KiB
HTML
103 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" href="popup.css">
|
|
</head>
|
|
<body>
|
|
<div class="popup-container">
|
|
<header>
|
|
<img src="icons/icon-48.png" class="logo" alt="Crawl4AI">
|
|
<div class="header-content">
|
|
<h1>Crawl4AI Assistant</h1>
|
|
<div class="header-stats">
|
|
<a href="https://github.com/unclecode/crawl4ai" target="_blank" class="github-stars">
|
|
<svg class="github-icon" viewBox="0 0 16 16" width="16" height="16">
|
|
<path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
|
|
</svg>
|
|
<span id="stars-count">Loading...</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="mode-selector">
|
|
<button id="schema-mode" class="mode-button schema">
|
|
<div class="icon">📊</div>
|
|
<div class="mode-info">
|
|
<h3>Schema Builder</h3>
|
|
<p>Click elements to build extraction schemas</p>
|
|
</div>
|
|
</button>
|
|
|
|
<button id="script-mode" class="mode-button script">
|
|
<div class="icon">🎯</div>
|
|
<div class="mode-info">
|
|
<h3>Script Builder <span style="color: #ff3c74; font-size: 10px;">(Alpha)</span></h3>
|
|
<p>Record actions to build automation scripts</p>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
|
|
<div id="active-session" class="active-session hidden">
|
|
<div class="session-header">
|
|
<span class="status-dot"></span>
|
|
<span class="session-title">Schema Capture Active</span>
|
|
</div>
|
|
<div class="session-stats">
|
|
<div class="stat">
|
|
<span class="stat-label">Container:</span>
|
|
<span id="container-status" class="stat-value">Not selected</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-label">Fields:</span>
|
|
<span id="fields-count" class="stat-value">0</span>
|
|
</div>
|
|
</div>
|
|
<div class="session-actions">
|
|
<button id="generate-code" class="action-button primary" disabled>
|
|
<span>Generate Code</span>
|
|
</button>
|
|
<button id="stop-capture" class="action-button secondary">
|
|
<span>Stop Capture</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="instructions">
|
|
<h4>How to use:</h4>
|
|
<ol>
|
|
<li>Click "Schema Builder" to start</li>
|
|
<li>Click on a container element (e.g., product card)</li>
|
|
<li>Click individual fields inside and name them</li>
|
|
<li>Generate Python code when done</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<footer>
|
|
<div class="social-links">
|
|
<a href="https://docs.crawl4ai.com" target="_blank" class="social-link">
|
|
<svg viewBox="0 0 24 24" width="16" height="16">
|
|
<path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
|
</svg>
|
|
<span>Docs</span>
|
|
</a>
|
|
<a href="https://twitter.com/unclecode" target="_blank" class="social-link">
|
|
<svg viewBox="0 0 24 24" width="16" height="16">
|
|
<path fill="currentColor" d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
|
|
</svg>
|
|
<span>@unclecode</span>
|
|
</a>
|
|
<a href="https://discord.gg/jP8KfhDhyN" target="_blank" class="social-link">
|
|
<svg viewBox="0 0 24 24" width="16" height="16">
|
|
<path fill="currentColor" d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.09.09 0 00-.07.03c-.18.33-.39.76-.53 1.09a16.09 16.09 0 00-4.8 0c-.14-.34-.35-.76-.54-1.09-.01-.02-.04-.03-.07-.03-1.5.26-2.93.71-4.27 1.33-.01 0-.02.01-.03.02-2.72 4.07-3.47 8.03-3.1 11.95 0 .02.01.04.03.05 1.8 1.32 3.53 2.12 5.24 2.65.03.01.06 0 .07-.02.4-.55.76-1.13 1.07-1.74.02-.04 0-.08-.04-.09-.57-.22-1.11-.48-1.64-.78-.04-.02-.04-.08-.01-.11.11-.08.22-.17.33-.25.02-.02.05-.02.07-.01 3.44 1.57 7.15 1.57 10.55 0 .02-.01.05-.01.07.01.11.09.22.17.33.26.04.03.04.09-.01.11-.52.31-1.07.56-1.64.78-.04.01-.05.06-.04.09.32.61.68 1.19 1.07 1.74.03.01.06.02.09.01 1.72-.53 3.45-1.33 5.25-2.65.02-.01.03-.03.03-.05.44-4.53-.73-8.46-3.1-11.95-.01-.01-.02-.02-.04-.02zM8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12 0 1.17-.84 2.12-1.89 2.12zm6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12 0 1.17-.83 2.12-1.89 2.12z"/>
|
|
</svg>
|
|
<span>Discord</span>
|
|
</a>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="popup.js"></script>
|
|
</body>
|
|
</html> |