TL;DR क्रॉलर क्रोम एक्सटेंशन बिल्डर

एक Chrome एक्सटेंशन (Manifest V3) बनाएं जिसका नाम "TL;DR Crawler" है जो किसी भी सामान्य वेब पेज पर काम करता है। यह क्या करता है टूलबार आइकन पर क्लिक करें: एक लाइन-ड्रॉन स्पाइडर वर्तमान पेज पर दिखाई देता है, आपके कर्सर का अनुसरण करता है (स्क्रॉल करते समय भी), जिस टेक्स्ट पर यह चलता है उसे पढ़ता है और एक फ्लोटिंग पैनल में एक संक्षिप्त TL;DR बनाता है। आइकन पर फिर से क्लिक करें: सब कुछ गायब हो जाता है और पेज बिल्कुल पहले जैसा हो जाता है। 1. टॉगल - background.js: chrome.action.onClicked chrome.scripting.executeScript के साथ content.js इंजेक्ट करता है। - content.js एक ग्लोबल फ्लैग चेक करता है। यदि क्रॉलर पहले से चल रहा है, तो यह बंद हो जाता है और साफ करता है। अन्यथा यह शुरू होता है। प्रति टैब केवल एक इंस्टेंस, हमेशा। 2. टेक्स्ट ढूंढें - मुख्य पठनीय क्षेत्र खोजें: <article> या <main> को प्राथमिकता दें, अन्यथा सबसे अधिक पैराग्राफ टेक्स्ट वाला तत्व। nav, header, footer, aside, मेनू, फॉर्म, कोड, विज्ञापन और छिपे हुए तत्वों को छोड़ें। - टेक्स्ट ब्लॉक (p, li, blockquote, h2-h4) इकट्ठा करें और उन्हें वाक्यों में विभाजित करें। प्रत्येक वाक्य को DOM Range के रूप में स्टोर करें (वाक्य लिंक और बोल्ड टेक्स्ट को फैला सकते हैं, इसलिए उन्हें तत्वों में लपेटें नहीं)। - क्षेत्र को डिबाउंस्ड MutationObserver (1s) के साथ देखें ताकि बाद में लोड हुआ टेक्स्ट (इनफिनिट स्क्रॉल, लेज़ी कंटेंट) उठाया जा सके। 3. मुख्य वाक्य चुनें - प्रत्येक वाक्य को स्कोर करें: +2 अंकों के लिए, +2 %, $, €, million, billion के लिए; +1.5 शब्दों के लिए जैसे first, record, launch, announce, new, only, biggest, fastest, warns, raises, cuts; +0.3 प्रति कैपिटलाइज़्ड नाम (अधिकतम +2); -2 यदि 40 से कम या 260 अक्षरों से अधिक है। - शीर्ष 25% को मुख्य वाक्यों के रूप में चिह्नित करें (न्यूनतम 5, अधिकतम 80), फैलाएं ताकि अधिकांश पैराग्राफ को एक मिले। - सारांश, प्रत्येक अधिकतम 9 शब्द: - यदि API कुंजी सेट है: सभी मुख्य वाक्यों को एक अनुरोध में Claude को भेजें और छोटे, सादे सारांशों की एक JSON सरणी मांगें (अधिकतम 9 शब्द, संख्याएं और नाम बिल्कुल रखें, कोई हाइप नहीं)। नया टेक्स्ट दिखाई देने पर बैचों में फिर से अनुरोध करें। - बिना कुंजी के: फ़ॉलबैक सारांश = वाक्य जिसमें से फिलर ओपनर्स हटा दिए गए हैं (and, but, however, also, according to), एक शब्द सीमा पर "…" के साथ काटा गया। 4. स्पाइडर - दस्तावेज़ रूट पर Shadow DOM होस्ट जिसमें एक फुल-स्क्रीन फिक्स्ड <canvas> (pointer-events: none, z-index 2147483646) और पैनल शामिल है। - दिखावट: छोटा गोल-आयताकार शरीर, पेट अंडाकार, दो सफेद आंखों वाला सिर, रूपरेखा #5ab8ff में। 8 पैर 3px नीली रेखाओं के रूप में गुलाबी (#ff4f7a) जोड़ बिंदुओं के साथ, दो खंड प्रत्येक व्युत्क्रम गतिकी के साथ, घुटने बाहर की ओर झुकते हैं। - चाल: दो वैकल्पिक पैर समूह। एक पैर तभी कदम रखता है जब यह अपने आदर्श स्थान से ~80px दूर हो और दूसरा समूह लगाया गया हो। कदम 0.13s तक चलते हैं एक छोटे से उठाव के साथ, चलने की दिशा में थोड़ा आगे उतरते हैं। - गति: लक्ष्य = कर्सर स्थिति + स्क्रॉल, इसलिए यह स्क्रॉल करते समय अनुसरण करता है। अधिकतम ~420 px/s, चिकनी त्वरण, कर्सर से ~40px दूर रुकता है, अपनी दिशा में आसानी से मुड़ता है। यदि कर्सर 8s के लिए निष्क्रिय है, तो यह व्यूपोर्ट के चारों ओर घूमता है। - requestAnimationFrame एक निश्चित 1/120s भौतिकी चरण के साथ। devicePixelRatio और window resize का समर्थन करें। 5. क्रॉलिंग - हर 80ms और प्रत्येक पैर लैंडिंग पर, document.caretRangeFromPoint के साथ स्पाइडर के नीचे टेक्स्ट ढूंढें (एक्सटेंशन के अपने तत्वों को अनदेखा करें)। - यदि वह बिंदु एक मुख्य वाक्य के अंदर है जो अभी तक नहीं मिला है: इसे CSS Custom Highlight API (::highlight(tldr-found) एक नरम पीले रंग की पृष्ठभूमि के साथ) के साथ हाइलाइट करें और इसका सारांश पैनल में जोड़ें। - यदि एक पैर एक सामान्य शब्द पर उतरता है: ~25% मामलों में केवल उस शब्द को ग्लिच करें। केवल उस शब्द को एक span में लपेटें (यह एक एकल टेक्स्ट नोड है, इसलिए यह सुरक्षित है) और एक यादृच्छिक प्रभाव लागू करें: मोनोस्पेस फ़ॉन्ट, नीली रूपरेखा, नीला हाइलाइट, मामूली रोटेशन, चौड़ा अक्षर-अंतर, धुंधला या अपरकेस। प्रति शब्द अधिकतम 2 प्रभाव। हर परिवर्तन रिकॉर्ड करें ताकि इसे पूर्ववत किया जा सके। 6. पैनल - ऊपर-दाएं, इसके हेडर द्वारा खींचने योग्य, Shadow DOM के अंदर ताकि साइट CSS इसे प्रभावित न कर सके। - डार्क (#16181c), मोनो शीर्षक "TL;DR" पीले (#ffd166) में, एक "found / total" काउंटर, एक गुलाबी प्रगति पट्टी और लेख क्रम में एक क्रमांकित सूची। नवीनतम आइटम पीला चमकता है और सूची स्वचालित रूप से उस पर स्क्रॉल करती है। सूची अधिकतम ऊंचाई के अंदर स्क्रॉल करती है। - बटन: "Copy TL;DR" (क्लिपबोर्ड पर सादा टेक्स्ट), "Restart" (हाइलाइट्स, ग्लिच और सूची साफ करता है) और "Close" (पूर्ण शटडाउन)। - यदि एक कुंजी सेट है, तो "Write TL;DR with Claude" जोड़ें: सभी मिले वाक्यों को भेजता है और केवल उनके तथ्यों, संख्याओं को अपरिवर्तित रखते हुए 3 छोटी पंक्तियां लौटाता है। एक "Thinking..." स्थिति दिखाएं, फिर उत्तर सूची के नीचे। 7. API कुंजी - options.html: उपयोगकर्ता की Anthropic API कुंजी और एक मॉडल नाम के लिए एक फ़ील्ड, chrome.storage.local में संग्रहीत। - सभी API कॉल background.js के माध्यम से https://api.anthropic.com पर fetch के साथ जाते हैं, हेडर x-api-key, anthropic-version: 2023-06-01 और content-type: application/json के साथ। - त्रुटियों को चुपचाप संभालें: यदि कोई कॉल विफल हो जाती है, तो फ़ॉलबैक सारांश रखें और एक छोटा "AI unavailable" नोट दिखाएं। 8. गुणवत्ता नियम - साइट पर स्क्रॉलिंग, क्लिक, लिंक या टेक्स्ट चयन को कभी न तोड़ें। - शटडाउन पर पूर्ण सफाई: कैनवास, पैनल, हाइलाइट्स, लपेटे गए शब्द स्पैन, इनलाइन शैलियाँ, श्रोता, पर्यवेक्षक, टाइमर। - prefers-reduced-motion: कोई ग्लिच नहीं, धीमी चाल। - सादा JavaScript, कोई लाइब्रेरी नहीं। फ़ाइलें: manifest.json, background.js, content.js, options.html, options.js, आइकन (16, 48, 128)। - अनुमतियाँ: activeTab, scripting, storage। होस्ट अनुमति: https://api.anthropic.com/*। अंत में, इंस्टॉल चरण दें: chrome://extensions खोलें, Developer mode सक्षम करें, "Load unpacked" पर क्लिक करें, फ़ोल्डर चुनें, फिर options खोलें और API कुंजी पेस्ट करें।