ब्राउज़र कंसोल से कुशल वेब स्क्रैपिंग: जावास्क्रिप्ट से डेटा निकालें और स्टोर करें

ब्राउज़र के डेवलपर टूल्स में मौजूद कंसोल API का उपयोग करके बिना किसी जटिल सेटअप के वेब स्क्रैपिंग करना संभव है। यह लेख आपको दिखाएगा कि कैसे जावास्क्रिप्ट का उपयोग करके किसी भी वेबसाइट से डेटा निकाला जाए और उसे सीधे JSON या CSV फ़ाइल के रूप में डाउनलोड किया जाए।

उच्च-स्तरीय अवलोकन

जब किसी साइट पर बड़ी मात्रा में डेटा हो और पेजिनेशन के कारण सेलेनियम या पपेटियर जैसे टूल्स सेटअप करने में समय लगे, तो ब्राउज़र कंसोल एक त्वरित समाधान प्रदान करता है। मुख्य शर्त यह है कि वेबसाइट सिंगल-पेज एप्लिकेशन (SPA) की तरह व्यवहार करे—यानी पेज रीलोड किए बिना नेविगेशन हो। यदि पेज रीलोड होता है, तो कंसोल में लिखा कोड खो जाएगा।

1. ब्राउज़र से कंसोल ऑब्जेक्ट इंस्टेंस प्राप्त करें

अलग-अलग ब्राउज़र्स में कंसोल API तक पहुंचने का तरीका थोड़ा भिन्न होता है। नीचे दिया गया कोड ब्राउज़र के अनुसार सही इंस्टेंस असाइन करता है:

// कंसोल को साफ़ करने के लिए Console API
console.API;

if (typeof console._commandLineAPI !== 'undefined') {
    console.API = console._commandLineAPI; // Chrome
} else if (typeof console._inspectorCommandLineAPI !== 'undefined') {
    console.API = console._inspectorCommandLineAPI; // Safari
} else if (typeof console.clear !== 'undefined') {
    console.API = console;
}

यदि आप केवल क्रोम उपयोग कर रहे हैं, तो इतना पर्याप्त है:

if (typeof console._commandLineAPI !== 'undefined') {
    console.API = console._commandLineAPI; // Chrome
}

2. जूनियर हेल्पर फ़ंक्शन परिभाषित करें

मान लें कि आपने ब्राउज़र में एक मीडियम स्टोरी खोल रखी है। निम्न कोड DOM एलिमेंट्स से स्टोरी का शीर्षक, क्लैप काउंट, लेखक का नाम, प्रोफ़ाइल इमेज URL, प्रोफ़ाइल विवरण और पढ़ने का समय निकालता है:

const extractStoryData = () => {
    const title = document.querySelector('h1')?.innerText || '';
    const claps = document.querySelector('.clap-count')?.innerText || '0';
    const authorName = document.querySelector('.author-name')?.innerText || '';
    const authorImg = document.querySelector('.author-img')?.src || '';
    const authorBio = document.querySelector('.author-bio')?.innerText || '';
    const readTime = document.querySelector('.read-time')?.innerText || '';

    return { title, claps, authorName, authorImg, authorBio, readTime };
};

आप इसी तर्ज पर स्टोरी के लिंक्स, इमेजेस, एम्बेड्स आदि भी निकाल सकते हैं।

3. सीनियर हेल्पर फ़ंक्शन — console.save

निकाले गए डेटा को फ़ाइल के रूप में सेव करने के लिए console.save फ़ंक्शन परिभाषित करें। यह एक Blob ऑब्जेक्ट बनाता है, उसे एक अस्थायी <a> टैग से जोड़ता है, और क्लिक इवेंट ट्रिगर करके फ़ाइल डाउनलोड करता है।

console.save = (data, filename = 'scraped-data.json') => {
    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    a.click();
    URL.revokeObjectURL(url);
};

डेमो: एक छोटी ऐरे पास करके console.save का त्वरित परीक्षण करें—ब्राउज़र अपने आप JSON फ़ाइल डाउनलोड करेगा।

पूरा कोड एक साथ चलाएं

कंसोल API इंस्टेंस सेट करें
डेटा निकालने वाला हेल्पर फ़ंक्शन परिभाषित करें
console.save फ़ंक्शन जोड़ें

मीडियम स्टोरी पर जाकर उपरोक्त कोड कंसोल में पेस्ट करें और एंटर दबाएं। डेटा JSON फ़ाइल के रूप में डाउनलोड हो जाएगा।

एकाधिक स्टोरीज़ के लिए विस्तार

यदि पब्लिशर का होम पेज SPA की तरह काम करता है (जैसे freeCodeCamp), तो आप एक स्टोरी खोलकर डेटा निकाल सकते हैं, फिर ब्राउज़र के बैक बटन से होम पेज पर लौट सकते हैं—कंसोल कोड बरकरार रहता है। इसे लूप में डालकर कई स्टोरीज़ का डेटा एकत्र करें और अंत में console.save(allStories) कॉल करें।

निष्कर्ष

ब्राउज़र कंसोल स्क्रैपिंग त्वरित, सेटअप-मुक्त और CSS सेलेक्टर्स से परिचित किसी भी डेवलपर के लिए सुलभ है। यह सेलेनियम/पपेटियर का विकल्प नहीं है, लेकिन छोटे-मध्यम कार्यों के लिए अत्यंत प्रभावी है।