${this.escapeHtml(markdown)}${this.escapeHtml(markdown)}
+
+ Markdown Preview
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `;
+
+ document.body.appendChild(this.modal);
+
+ // Make modal draggable
+ if (window.C4AI_Utils && window.C4AI_Utils.makeDraggable) {
+ window.C4AI_Utils.makeDraggable(this.modal);
+ }
+
+ // Position preview modal
+ this.modal.style.position = 'fixed';
+ this.modal.style.top = '50%';
+ this.modal.style.left = '50%';
+ this.modal.style.transform = 'translate(-50%, -50%)';
+ this.modal.style.zIndex = '999999';
+
+ this.setupEventListeners();
+ }
+
+ setupEventListeners() {
+ // Close button
+ this.modal.querySelector('.c4ai-preview-close').addEventListener('click', () => {
+ this.hide();
+ });
+
+ // Tab switching
+ this.modal.querySelectorAll('.c4ai-tab').forEach(tab => {
+ tab.addEventListener('click', (e) => {
+ const tabName = e.target.dataset.tab;
+ this.switchTab(tabName);
+ });
+ });
+
+ // Wrap toggle
+ const wrapToggle = this.modal.querySelector('.c4ai-wrap-toggle');
+ wrapToggle.addEventListener('click', () => {
+ const panes = this.modal.querySelectorAll('.c4ai-preview-pane');
+ panes.forEach(pane => {
+ pane.classList.toggle('wrap');
+ });
+ wrapToggle.classList.toggle('active');
+ });
+
+ // Options change
+ this.modal.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
+ checkbox.addEventListener('change', async (e) => {
+ this.markdownOptions[e.target.name] = e.target.checked;
+
+ // Handle text-only mode dependencies
+ if (e.target.name === 'textOnly' && e.target.checked) {
+ const preserveLinksCheckbox = this.modal.querySelector('input[name="preserveLinks"]');
+ if (preserveLinksCheckbox) {
+ preserveLinksCheckbox.checked = false;
+ preserveLinksCheckbox.disabled = true;
+ this.markdownOptions.preserveLinks = false;
+ }
+
+ const includeImagesCheckbox = this.modal.querySelector('input[name="includeImages"]');
+ if (includeImagesCheckbox) {
+ includeImagesCheckbox.disabled = true;
+ }
+ } else if (e.target.name === 'textOnly' && !e.target.checked) {
+ // Re-enable options when text-only is disabled
+ const preserveLinksCheckbox = this.modal.querySelector('input[name="preserveLinks"]');
+ if (preserveLinksCheckbox) {
+ preserveLinksCheckbox.disabled = false;
+ }
+
+ const includeImagesCheckbox = this.modal.querySelector('input[name="includeImages"]');
+ if (includeImagesCheckbox) {
+ includeImagesCheckbox.disabled = false;
+ }
+ }
+
+ // Update markdown content
+ await this.updateContent();
+ });
+ });
+
+ // Action buttons
+ this.modal.querySelector('.c4ai-copy-markdown-btn').addEventListener('click', () => {
+ this.copyToClipboard();
+ });
+
+ this.modal.querySelector('.c4ai-download-btn').addEventListener('click', () => {
+ this.downloadMarkdown();
+ });
+ }
+
+ switchTab(tabName) {
+ // Update active tab
+ this.modal.querySelectorAll('.c4ai-tab').forEach(tab => {
+ tab.classList.toggle('active', tab.dataset.tab === tabName);
+ });
+
+ // Update active pane
+ this.modal.querySelectorAll('.c4ai-preview-pane').forEach(pane => {
+ pane.classList.toggle('active', pane.dataset.pane === tabName);
+ });
+ }
+
+ async updateContent() {
+ if (!this.onGenerateMarkdown) return;
+
+ try {
+ // Generate markdown with current options
+ this.currentMarkdown = await this.onGenerateMarkdown(this.markdownOptions);
+
+ // Update markdown pane
+ const markdownPane = this.modal.querySelector('[data-pane="markdown"]');
+ markdownPane.innerHTML = `${this.escapeHtml(this.currentMarkdown)}${html}
`;
+ } else {
+ // Fallback
+ previewPane.innerHTML = `${this.escapeHtml(this.currentMarkdown)}
-
- })
-
-
-
- `;
- document.body.appendChild(this.toolbar);
-
- // Add event listeners for toolbar buttons
- document.getElementById('c4ai-pause').addEventListener('click', () => this.togglePause());
- document.getElementById('c4ai-generate').addEventListener('click', () => this.stopAndGenerate());
- document.getElementById('c4ai-close').addEventListener('click', () => this.stop());
-
- // Make toolbar draggable
- window.C4AI_Utils.makeDraggable(this.toolbar);
- }
-
- attachEventListeners() {
- document.addEventListener('mousemove', this.handleMouseMove, true);
- document.addEventListener('click', this.handleClick, true);
- document.addEventListener('keydown', this.handleKeyPress, true);
- }
-
- detachEventListeners() {
- document.removeEventListener('mousemove', this.handleMouseMove, true);
- document.removeEventListener('click', this.handleClick, true);
- document.removeEventListener('keydown', this.handleKeyPress, true);
- }
-
- handleMouseMove(e) {
- if (this.isPaused) return;
-
- const element = document.elementFromPoint(e.clientX, e.clientY);
- if (element && !this.isOurElement(element)) {
- this.highlightElement(element);
- }
- }
-
- handleClick(e) {
- if (this.isPaused) return;
-
- const element = e.target;
-
- if (this.isOurElement(element)) {
- return;
- }
-
- e.preventDefault();
- e.stopPropagation();
-
- if (this.mode === 'container') {
- this.selectContainer(element);
- } else if (this.mode === 'field') {
- this.selectField(element);
- }
- }
-
- handleKeyPress(e) {
- if (e.key === 'Escape') {
- this.stop();
- }
- }
-
- isOurElement(element) {
- return window.C4AI_Utils.isOurElement(element);
- }
-
- togglePause() {
- this.isPaused = !this.isPaused;
- const pauseBtn = document.getElementById('c4ai-pause');
- if (this.isPaused) {
- pauseBtn.innerHTML = ' Resume';
- pauseBtn.classList.add('c4ai-paused');
- this.highlightBox.style.display = 'none';
- } else {
- pauseBtn.innerHTML = ' Pause';
- pauseBtn.classList.remove('c4ai-paused');
- }
- }
-
- stopAndGenerate() {
- if (!this.container || this.fields.length === 0) {
- alert('Please select a container and at least one field before generating code.');
- return;
- }
-
- const code = this.generateCode();
- this.showCodeModal(code);
- }
-
- highlightElement(element) {
- const rect = element.getBoundingClientRect();
- this.highlightBox.style.cssText = `
- left: ${rect.left + window.scrollX}px;
- top: ${rect.top + window.scrollY}px;
- width: ${rect.width}px;
- height: ${rect.height}px;
- display: block;
- `;
-
- if (this.mode === 'container') {
- this.highlightBox.className = 'c4ai-highlight-box c4ai-container-mode';
- } else {
- this.highlightBox.className = 'c4ai-highlight-box c4ai-field-mode';
- }
- }
-
- selectContainer(element) {
- // Remove previous container highlight
- if (this.container) {
- this.container.element.classList.remove('c4ai-selected-container');
- }
-
- this.container = {
- element: element,
- html: element.outerHTML,
- selector: this.generateSelector(element),
- tagName: element.tagName.toLowerCase()
- };
-
- element.classList.add('c4ai-selected-container');
- this.mode = 'field';
- this.updateToolbar();
- this.updateStats();
- }
-
- selectField(element) {
- // Don't select the container itself
- if (element === this.container.element) {
- return;
- }
-
- // Check if already selected - if so, deselect it
- if (this.selectedElements.has(element)) {
- this.deselectField(element);
- return;
- }
-
- // Must be inside the container
- if (!this.container.element.contains(element)) {
- return;
- }
-
- this.showFieldDialog(element);
- }
-
- deselectField(element) {
- // Remove from fields array
- this.fields = this.fields.filter(f => f.element !== element);
-
- // Remove from selected elements set
- this.selectedElements.delete(element);
-
- // Remove visual selection
- element.classList.remove('c4ai-selected-field');
-
- // Update UI
- this.updateToolbar();
- this.updateStats();
- }
-
- showFieldDialog(element) {
- const dialog = document.createElement('div');
- dialog.className = 'c4ai-field-dialog';
-
- const rect = element.getBoundingClientRect();
- dialog.style.cssText = `
- left: ${rect.left + window.scrollX}px;
- top: ${rect.bottom + window.scrollY + 10}px;
- `;
-
- dialog.innerHTML = `
-
-
-
-
- `;
-
- document.body.appendChild(dialog);
-
- const input = dialog.querySelector('#c4ai-field-name');
- const saveBtn = dialog.querySelector('#c4ai-field-save');
- const cancelBtn = dialog.querySelector('#c4ai-field-cancel');
-
- const save = () => {
- const fieldName = input.value.trim();
- if (fieldName) {
- this.fields.push({
- name: fieldName,
- value: element.textContent.trim(),
- element: element,
- selector: this.generateSelector(element, this.container.element)
- });
-
- element.classList.add('c4ai-selected-field');
- this.selectedElements.add(element);
- this.updateToolbar();
- this.updateStats();
- }
- dialog.remove();
- };
-
- const cancel = () => {
- dialog.remove();
- };
-
- saveBtn.addEventListener('click', save);
- cancelBtn.addEventListener('click', cancel);
- input.addEventListener('keypress', (e) => {
- if (e.key === 'Enter') save();
- if (e.key === 'Escape') cancel();
- });
-
- input.focus();
- }
-
- generateSelector(element, context = document) {
- // Try to generate a robust selector
- if (element.id) {
- return `#${CSS.escape(element.id)}`;
- }
-
- // Check for data attributes (most stable)
- const dataAttrs = ['data-testid', 'data-id', 'data-test', 'data-cy'];
- for (const attr of dataAttrs) {
- const value = element.getAttribute(attr);
- if (value) {
- return `[${attr}="${value}"]`;
- }
- }
-
- // Check for aria-label
- if (element.getAttribute('aria-label')) {
- return `[aria-label="${element.getAttribute('aria-label')}"]`;
- }
-
- // Try semantic HTML elements with text
- const tagName = element.tagName.toLowerCase();
- if (['button', 'a', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(tagName)) {
- const text = element.textContent.trim();
- if (text && text.length < 50) {
- // Use tag name with partial text match
- return `${tagName}`;
- }
- }
-
- // Check for simple, non-utility classes
- const classes = Array.from(element.classList)
- .filter(c => !c.startsWith('c4ai-')) // Exclude our classes
- .filter(c => !c.includes('[') && !c.includes('(') && !c.includes(':')) // Exclude utility classes
- .filter(c => c.length < 30); // Exclude very long classes
-
- if (classes.length > 0 && classes.length <= 3) {
- const selector = classes.map(c => `.${CSS.escape(c)}`).join('');
- try {
- if (context.querySelectorAll(selector).length === 1) {
- return selector;
- }
- } catch (e) {
- // Invalid selector, continue
- }
- }
-
- // Use nth-child with simple parent tag
- const parent = element.parentElement;
- if (parent && parent !== context) {
- const siblings = Array.from(parent.children);
- const index = siblings.indexOf(element) + 1;
- // Just use parent tag name to avoid recursion
- const parentTag = parent.tagName.toLowerCase();
- return `${parentTag} > ${tagName}:nth-child(${index})`;
- }
-
- // Final fallback
- return tagName;
- }
-
- updateToolbar() {
- document.getElementById('c4ai-mode').textContent =
- this.mode === 'container' ? 'Select Container' : 'Select Fields';
-
- document.getElementById('c4ai-container').textContent =
- this.container ? `${this.container.tagName} โ` : 'Not selected';
-
- // Update fields list
- const fieldsList = document.getElementById('c4ai-fields-list');
- const fieldsItems = document.getElementById('c4ai-fields-items');
-
- if (this.fields.length > 0) {
- fieldsList.style.display = 'block';
- fieldsItems.innerHTML = this.fields.map(field => `
- Name this field:
- -
- Content: ${element.textContent.trim().substring(0, 50)}...
-
-
-
-
-
- Transform any website into structured data with just a few clicks! The Crawl4AI Assistant Chrome Extension provides three powerful tools for web scraping and data extraction.
- ๐ NEW: Schema Builder now extracts data INSTANTLY without any LLM! Test your schema and see JSON results immediately in the browser!
+ ๐ NEW: Click2Crawl extracts data INSTANTLY without any LLM! Test your schema and see JSON results immediately in the browser!
-
Schema Builder
-Extract data instantly without LLMs - see results in real-time!
+Click2Crawl
+Visual data extraction - click elements to build schemas instantly!
@@ -77,8 +77,8 @@
-
Click2Crawl (New!)
-Select multiple elements to extract clean markdown "as you see"
+Markdown Extraction (New!)
+Convert any webpage content to clean markdown with Visual Text Mode
-
-
+
+
-
-
Schema Builder
+Click2Crawl
Visual data extraction
Available
@@ -154,11 +154,11 @@
Alpha
+
@@ -166,11 +166,11 @@
-
Click2Crawl
-Markdown extraction
+Markdown Extraction
+Content to markdown
New!
-
-
+
+
-
๐ Schema Builder
- No LLM needed - Extract data instantly! +๐ฏ Click2Crawl
+ Click elements to build extraction schemas - No LLM needed!
@@ -199,8 +199,8 @@
-
- 3
-
@@ -268,11 +269,11 @@
Test & Extract Data NOW!
-๐ Click "Test Schema" to extract ALL matching data instantly - no coding required!
+Test & Extract Data Instantly!
+๐ Click "Test Schema" to see extracted JSON immediately - no LLM or coding required!
โก See extracted JSON immediately
@@ -210,11 +210,12 @@
๐ Zero LLM dependency
- ๐ Instant data extraction
- ๐ฏ Smart selector generation
- ๐ Ready-to-run Python code
- โจ Preview matching elements
- ๐ฅ Download JSON results
+ ๐ Instant JSON extraction
+ ๐ฏ Visual element selection
+ ๐ Export Python code
+ โจ Live preview
+ ๐ฅ Download results
+ ๐ Export to markdown
+
+
@@ -326,26 +327,26 @@
-
๐ Click2Crawl
- Select multiple elements to extract clean markdown +๐ Markdown Extraction
+ Convert webpage content to clean markdown "as you see"
@@ -312,9 +313,9 @@
Multi-select with Ctrl/Cmd
- Visual Text Mode
- Smart formatting
- Cloud export (soon)
+ Visual Text Mode (As You See)
+ Clean markdown output
+ Export to Crawl4AI Cloud (soon)
See the Generated Code & Extracted Data
-
+
-
+
-
+
-
+
- schema_extraction.py
+ click2crawl_extraction.py
#!/usr/bin/env python3
"""
๐ NO LLM NEEDED! Direct extraction with CSS selectors
-Generated by Crawl4AI Chrome Extension
+Generated by Crawl4AI Chrome Extension - Click2Crawl
"""
import asyncio
@@ -353,7 +354,7 @@ Generated by Crawl4AI Chrome Extension
from crawl4ai import AsyncWebCrawler, BrowserConfig, CrawlerRunConfig
from crawl4ai.extraction_strategy import JsonCssExtractionStrategy
-# The EXACT schema from your visual clicks - no guessing!
+# The EXACT schema from Click2Crawl - no guessing!
EXTRACTION_SCHEMA = {
"name": "Product Catalog",
"baseSelector": "div.product-card", # The container you selected
@@ -515,7 +516,7 @@ asyncio.run(automate_shopping())
@@ -692,20 +693,20 @@ Today, finding a 24-hour restaurant in Manhattan requires genuine effort. The pa
@@ -758,7 +759,10 @@ Today, finding a 24-hour restaurant in Manhattan requires genuine effort. The pa
// Show corresponding content
const toolId = this.getAttribute('data-tool');
- document.getElementById(toolId).classList.add('active');
+ const contentElement = document.getElementById(toolId);
+ if (contentElement) {
+ contentElement.classList.add('active');
+ }
});
});
diff --git a/docs/md_v2/apps/crawl4ai-assistant/manifest.json b/docs/md_v2/apps/crawl4ai-assistant/manifest.json
index 663a7208..cbf144d7 100644
--- a/docs/md_v2/apps/crawl4ai-assistant/manifest.json
+++ b/docs/md_v2/apps/crawl4ai-assistant/manifest.json
@@ -1,7 +1,7 @@
{
"manifest_version": 3,
"name": "Crawl4AI Assistant",
- "version": "1.2.1",
+ "version": "1.3.0",
"description": "Visual schema and script builder for Crawl4AI - Build extraction schemas and automation scripts by clicking and recording actions",
"permissions": [
"activeTab",
@@ -25,11 +25,12 @@
"js": [
"libs/marked.min.js",
"content/shared/utils.js",
- "content/schemaBuilder.js",
+ "content/markdownPreviewModal.js",
+ "content/click2crawl.js",
"content/scriptBuilder.js",
"content/contentAnalyzer.js",
"content/markdownConverter.js",
- "content/click2CrawlBuilder.js",
+ "content/markdownExtraction.js",
"content/content.js"
],
"css": ["content/overlay.css"],
diff --git a/docs/md_v2/apps/crawl4ai-assistant/popup/popup.css b/docs/md_v2/apps/crawl4ai-assistant/popup/popup.css
index 4cd75583..4ff8e1bb 100644
--- a/docs/md_v2/apps/crawl4ai-assistant/popup/popup.css
+++ b/docs/md_v2/apps/crawl4ai-assistant/popup/popup.css
@@ -38,6 +38,8 @@ body {
font-family: var(--font-primary);
background: #0a0a0a;
color: #e0e0e0;
+ border-radius: 16px;
+ overflow: hidden;
}
.popup-container {
diff --git a/docs/md_v2/apps/crawl4ai-assistant/popup/popup.html b/docs/md_v2/apps/crawl4ai-assistant/popup/popup.html
index f974f366..6a54f6e3 100644
--- a/docs/md_v2/apps/crawl4ai-assistant/popup/popup.html
+++ b/docs/md_v2/apps/crawl4ai-assistant/popup/popup.html
@@ -23,15 +23,15 @@
-
Direct
-
- Get CrawlResult Without Code
+Direct Data Download
Skip the code generation entirely! Get extracted data directly in the extension as a CrawlResult object, ready to download as JSON.
+Skip the code generation entirely! Download extracted data directly from Click2Crawl as JSON or CSV files.
-
๐ One-click extraction โข No Python needed โข Export to JSON/CSV
+ ๐ One-click download โข No Python needed โข Multiple export formats
AI
-
- Smart Schema Suggestions
+Smart Field Detection
AI-powered field detection that automatically suggests the most likely data fields on any page, making schema building even faster.
+AI-powered field detection for Click2Crawl that automatically suggests the most likely data fields on any page.
๐ค Auto-detect fields โข Smart naming โข Pattern recognition
+