Crop - वेबपेज एलिमेंट्स को सटीक रूप से चुनकर कैप्चर करने वाला Chrome एक्सटेंशन

नमस्ते। मैं Chrome एक्सटेंशन प्रोग्राम Crop का परिचय देना चाहता हूँ, जिसे वेबपेज पर मनचाहे हिस्से को सटीक रूप से कैप्चर करने के लिए बनाया गया है.

Crop एक ऐसा टूल है जो अभी देखे जा रहे पेज के ऊपर एक overlay दिखाता है, और आपको DOM elements को माउस से point करके चुनने या सीधे कोई क्षेत्र drag करके उसे PNG के रूप में copy/save करने देता है.

Firefox की screenshot सुविधा में elements को सटीक रूप से चुनने वाला flow मुझे सुविधाजनक लगा, और मैं Chrome में भी वैसा ही इस्तेमाल करना चाहता था, इसलिए मैंने इसे बनाना शुरू किया.

मुख्य फीचर्स

• माउस hover से DOM element highlight
• क्लिक से element selection
• drag से custom क्षेत्र selection
• चुने गए क्षेत्र को move और resize करना
• मौजूदा viewport कैप्चर
• पूरा पेज कैप्चर
• viewport के बाहर तक फैले चुने गए क्षेत्र का scroll capture
• PNG को clipboard पर copy करना या file के रूप में save करना

permissions और privacy

ब्राउज़र एक्सटेंशन होने की वजह से permissions को लेकर चिंता हो सकती है, इसलिए मैंने इस हिस्से को जितना संभव हो सके उतना कम रखने की कोशिश की.

फ़िलहाल इस्तेमाल की जाने वाली permissions लगभग ये हैं.

• activeTab: केवल उस मौजूदा tab तक अस्थायी access जिसमें उपयोगकर्ता ने एक्सटेंशन चलाया है
• scripting: मौजूदा tab में overlay script inject करना
• clipboardWrite: बनाए गए PNG को clipboard पर copy करना
• downloads: बनाए गए PNG को save करना

debugger, <all_urls> जैसी व्यापक permissions का अनुरोध नहीं किया जाता.

Screenshots ब्राउज़र के अंदर ही local रूप से प्रोसेस किए जाते हैं. Screenshot या page data को server पर upload नहीं किया जाता, और telemetry भी शामिल नहीं की गई है. Images केवल तब clipboard या download file में जाती हैं जब उपयोगकर्ता Copy या Save दबाता है.

मौजूदा सीमाएँ

Chrome एक्सटेंशन की सीमाओं की वजह से नीचे दिए गए मामलों में कुछ प्रतिबंध हैं.

• chrome:// pages या Chrome Web Store जैसे restricted pages पर यह नहीं चलता.
• cross-origin iframe के अंदर content script निरीक्षण नहीं कर सकता, इसलिए element selection सीमित है.
• closed shadow DOM के अंदर भी access नहीं किया जा सकता.
• full-page capture फिलहाल top-level document के आधार पर काम करता है.
• बहुत बड़े pages में browser canvas सीमा की वजह से PNG downscale हो सकता है.
• जिन pages में lazy loading, animation, sticky header/footer बहुत हैं, उनमें full-page stitch का परिणाम पूरी तरह सटीक न हो सकता है.

implementation से जुड़ी बातें

इसे Chrome Manifest V3 पर आधारित बनाकर तैयार किया गया है.

पेज पर content script inject की जाती है, और Shadow DOM आधारित overlay में selection/resize/capture flow को संभाला जाता है. पूरे पेज या viewport के बाहर के क्षेत्र को chrome.tabs.captureVisibleTab() और scroll stitching के संयोजन से कैप्चर किया जाता है.

Firefox Screenshots की ओर से संदर्भित/अपनाए गए कुछ कोड के लिए MPL-2.0 नोटिस बनाए रखा गया है, और नए लिखे गए project code को MIT license के साथ जारी करने के लिए व्यवस्थित किया गया है. यह Mozilla/Firefox के साथ आधिकारिक रूप से संबद्ध या अनुमोदित project नहीं है.

लिंक

Chrome Web Store:
https://chromewebstore.google.com/detail/crop/…

GitHub:
https://github.com/postmelee/crop

जो लोग दस्तावेज़ लिखने, bug report करने, UI review जैसे कामों में वेबपेज कैप्चर अक्सर करते हैं, वे इसे इस्तेमाल करके अगर कोई असुविधा या सुधार के सुझाव छोड़ें तो आभारी रहूँगा.