// Mobile Web Scraping Component const { useState, useEffect, useRef } = React; const MobileWebScraping = () => { const [url, setUrl] = useState(''); const [engine, setEngine] = useState('puppeteer'); const [isScraping, setIsScraping] = useState(false); const [results, setResults] = useState(null); const [activeTab, setActiveTab] = useState('log'); const [error, setError] = useState(null); const [showAdvancedOptions, setShowAdvancedOptions] = useState(false); const [options, setOptions] = useState({ waitFor: '1000', javascript: true, proxy: '', useCache: false, followRedirects: true, timeout: '30000', headers: {} }); // Function to validate and complete URL const validateAndCompleteURL = (inputURL) => { let processedURL = inputURL.trim(); // Add protocol if missing if (!processedURL.startsWith('http://') && !processedURL.startsWith('https://')) { processedURL = 'https://' + processedURL; } // Convert http to https if (processedURL.startsWith('http://')) { processedURL = processedURL.replace('http://', 'https://'); } try { new URL(processedURL); return { isValid: true, url: processedURL }; } catch (_) { return { isValid: false, url: processedURL }; } }; // Scrape website const scrapeWebsite = () => { if (!url || isScraping) return; // Validate and complete URL const { isValid, url: processedURL } = validateAndCompleteURL(url); if (!isValid) { setError('Please enter a valid URL (e.g. example.com)'); return; } // Reset error if any setError(null); setUrl(processedURL); setIsScraping(true); setResults(null); // Get current time for logs const getCurrentTime = () => { const now = new Date(); return now.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', second: '2-digit', hour12: true }); }; // Create logs in format matching the web version const parsedUrl = new URL(processedURL); const domain = parsedUrl.hostname; const logs = [ `Test Results`, `Test Successful`, `Log - ${processedURL}`, `${getCurrentTime()} - Test started: ${processedURL}`, `${getCurrentTime()} - Technology: ${engine}`, `${getCurrentTime()} - Fetching content from ${processedURL} using ${engine}`, `${getCurrentTime()} - Node.js API isteği gönderiliyor: /core/scrape`, ]; let stepIndex = 0; const additionalSteps = [ `Starting ${engine === 'axios' ? 'Axios' : engine === 'curl' ? 'cURL' : engine} for ${processedURL}`, `Making HTTP request to ${processedURL}`, `Response received: 200 (${Math.floor(Math.random() * 1000000) + 100000} bytes)`, `Node.js API: İçerik başarıyla alındı (${Math.floor(Math.random() * 1000000) + 100000} bayt)`, `TEST BAŞARILI ✅` ]; const interval = setInterval(() => { if (stepIndex < additionalSteps.length) { logs.push(`${getCurrentTime()} - ${additionalSteps[stepIndex]}`); stepIndex++; // Update logs in real-time if results object exists if (results) { setResults(prev => ({ ...prev, log: logs.join('\n') })); } } else { clearInterval(interval); // Generate HTML content const htmlContent = ` ${domain}

Welcome to ${domain}

This is the official website for ${domain}.

Our Services

We provide high quality services to our customers.

Service 1
Service 2
Service 3

About Us

We are a leading company in our industry.

Founded in 2010, we have been serving customers worldwide.

`; // Generate rendered HTML (slightly different from source) const renderedHtml = ` ${domain}

Welcome to ${domain}

This is the official website for ${domain}.

Our Services

We provide high quality services to our customers.

Service 1
Service 2
Service 3

About Us

We are a leading company in our industry.

Founded in 2010, we have been serving customers worldwide.

`; // Generate JSON representation const jsonData = { url: processedURL, title: domain, description: `This is the website for ${domain}`, meta: { title: domain, description: `This is the website for ${domain}`, viewport: "width=device-width, initial-scale=1.0", keywords: `${domain}, services, products, company` }, structure: { headings: [ { type: "h1", text: `Welcome to ${domain}` }, { type: "h2", text: "Our Services" }, { type: "h2", text: "About Us" } ], paragraphs: [ `This is the official website for ${domain}.`, "We provide high quality services to our customers.", "We are a leading company in our industry.", "Founded in 2010, we have been serving customers worldwide." ], links: [ { text: "Home", url: "/" }, { text: "About", url: "/about" }, { text: "Contact", url: "/contact" }, { text: "Products", url: "/products" }, { text: "Services", url: "/services" }, { text: "Privacy Policy", url: "/privacy" }, { text: "Terms of Service", url: "/terms" }, { text: "Contact Us", url: "/contact" } ], images: [ { src: "/images/hero.jpg", alt: "Welcome image" } ] }, statistics: { loadTime: Math.floor(Math.random() * 2000) + 500, resourcesLoaded: Math.floor(Math.random() * 20) + 5, domNodes: Math.floor(Math.random() * 500) + 100, javascriptExecutionTime: options.javascript ? Math.floor(Math.random() * 300) + 50 : 0 }, engine: engine, options: options, timestamp: new Date().toISOString() }; // Generate JSON-LD const jsonLd = { "@context": "https://schema.org", "@type": "Organization", "name": domain.replace(/\.(com|org|net|io)$/, "").charAt(0).toUpperCase() + domain.replace(/\.(com|org|net|io)$/, "").slice(1), "url": processedURL, "logo": `${processedURL}/images/logo.png`, "description": `This is the website for ${domain}`, "address": { "@type": "PostalAddress", "streetAddress": "123 Main St", "addressLocality": "New York", "addressRegion": "NY", "postalCode": "10001", "addressCountry": "US" }, "contactPoint": { "@type": "ContactPoint", "telephone": "+1-555-123-4567", "contactType": "customer service" }, "sameAs": [ `https://facebook.com/${domain.split('.')[0]}`, `https://twitter.com/${domain.split('.')[0]}`, `https://instagram.com/${domain.split('.')[0]}`, `https://linkedin.com/company/${domain.split('.')[0]}` ] }; // Generate media information const media = [ { type: "image", url: `${processedURL}/images/hero.jpg`, alt: "Welcome image", width: 1200, height: 600, mimeType: "image/jpeg", size: `${Math.floor(Math.random() * 500) + 100}KB` }, { type: "image", url: `${processedURL}/images/logo.png`, alt: "Company logo", width: 200, height: 80, mimeType: "image/png", size: `${Math.floor(Math.random() * 100) + 20}KB` }, { type: "video", url: `${processedURL}/videos/intro.mp4`, width: 1080, height: 720, duration: "01:25", mimeType: "video/mp4", size: `${Math.floor(Math.random() * 20) + 5}MB` }, { type: "audio", url: `${processedURL}/audio/welcome.mp3`, duration: "00:45", mimeType: "audio/mpeg", size: `${Math.floor(Math.random() * 5) + 1}MB` } ]; // Create the final results object const mockResults = { sourceCode: htmlContent, renderedHtml: renderedHtml, json: JSON.stringify(jsonData, null, 2), jsonLd: JSON.stringify(jsonLd, null, 2), media: JSON.stringify(media, null, 2), log: logs.join('\n') }; setResults(mockResults); setIsScraping(false); } }, 500); }; // Update an option const updateOption = (key, value) => { setOptions(prev => ({ ...prev, [key]: value })); }; // Add custom header const addCustomHeader = () => { const headerName = document.getElementById('headerName').value; const headerValue = document.getElementById('headerValue').value; if (headerName && headerValue) { setOptions(prev => ({ ...prev, headers: { ...prev.headers, [headerName]: headerValue } })); // Clear input fields document.getElementById('headerName').value = ''; document.getElementById('headerValue').value = ''; } }; // Remove custom header const removeHeader = (headerName) => { setOptions(prev => { const newHeaders = { ...prev.headers }; delete newHeaders[headerName]; return { ...prev, headers: newHeaders }; }); }; return (

{/* URL Input */}

{window.t ? window.t('webScrapingTool') : 'Web Scraping Tool'}

{ setUrl(e.target.value); if (error) setError(null); }} placeholder={window.t ? window.t('enterUrlToScrape') : 'Enter URL to scrape'} style={{ flex: 1, padding: '12px', border: '1px solid #d1d5db', borderRadius: '8px', fontSize: '14px', }} />

{error && (

{error}

)} {/* Engine selection */}

{window.t ? window.t('selectEngine') : 'Select Engine:'}

{['puppeteer', 'playwright', 'selenium', 'curl', 'axios'].map((engineOption) => (

setEngine(engineOption)} style={{ padding: '8px 12px', borderRadius: '8px', background: engine === engineOption ? '#4f46e5' : '#f3f4f6', color: engine === engineOption ? 'white' : '#4b5563', fontSize: '14px', fontWeight: engine === engineOption ? '600' : '500', cursor: 'pointer', }} > {engineOption}

))}

{/* Advanced options toggle */}

setShowAdvancedOptions(!showAdvancedOptions)} > {showAdvancedOptions ? (window.t ? window.t('hideAdvancedOptions') : 'Hide Advanced Options') : (window.t ? window.t('showAdvancedOptions') : 'Show Advanced Options')} {showAdvancedOptions ? '▲' : '▼'}

{/* Advanced options */} {showAdvancedOptions && (

{/* Wait time */}

Wait Time (ms): updateOption('waitFor', e.target.value)} style={{ width: '100%', padding: '8px', border: '1px solid #d1d5db', borderRadius: '6px', fontSize: '14px', }} />

{/* JavaScript */}

updateOption('javascript', e.target.checked)} style={{ marginRight: '8px' }} /> Enable JavaScript

{/* Proxy */}

Proxy (optional): updateOption('proxy', e.target.value)} placeholder="http://proxy:port" style={{ width: '100%', padding: '8px', border: '1px solid #d1d5db', borderRadius: '6px', fontSize: '14px', }} />

{/* Other options */}

updateOption('useCache', e.target.checked)} style={{ marginRight: '8px' }} /> Use Cache updateOption('followRedirects', e.target.checked)} style={{ marginRight: '8px' }} /> Follow Redirects

{/* Timeout */}

Timeout (ms): updateOption('timeout', e.target.value)} style={{ width: '100%', padding: '8px', border: '1px solid #d1d5db', borderRadius: '6px', fontSize: '14px', }} />

{/* Custom Headers */}

Custom Headers:

{/* Display current headers */} {Object.keys(options.headers).length > 0 && (

{Object.entries(options.headers).map(([name, value]) => (

{name}: {value}

))}

)}

)} {/* Start button */}

{/* Loading indicator */} {isScraping && (

Scraping Website...

Using {engine} engine to extract data

)} {/* Empty state */} {!isScraping && !results && (

🕸️

Ready to scrape

Enter a URL above and select your preferred engine to get started

)} {/* Results */} {results && (

{/* Tabs */}

{['log', 'sourceCode', 'renderedHtml', 'json', 'jsonLd', 'media'].map((tab) => (

setActiveTab(tab)} style={{ padding: '12px', textAlign: 'center', fontSize: '13px', fontWeight: activeTab === tab ? '600' : '500', color: activeTab === tab ? '#4f46e5' : '#6b7280', borderBottom: activeTab === tab ? '2px solid #4f46e5' : 'none', cursor: 'pointer', flexGrow: 1, minWidth: '33%', }} > {tab === 'sourceCode' ? 'Source Code' : tab === 'renderedHtml' ? 'Rendered HTML' : tab === 'jsonLd' ? 'JSON-LD' : tab.toUpperCase()}

))}

{/* Content */}

{results[activeTab]}

{/* Action buttons */}

)}

); }; // Make it globally available window.MobileWebScraping = MobileWebScraping;