Chrome एक्सटेंशन: झटपट नेविगेशन के समर्थन के लिए API (एपीआई) बढ़ाना

डेव तापुस्का
डेव तापुस्का

कम शब्दों में कहा जाए, तो: एक्सटेंशन एपीआई को अपडेट कर दिया गया है, ताकि बैक-फ़ॉरवर्ड कैश मेमोरी और नेविगेशन को पहले से लोड किया जा सके. ज़्यादा जानकारी नीचे दी गई है.

Chrome, नेविगेशन को तेज़ बनाने के लिए कड़ी मेहनत कर रहा है. इंस्टैंट नेविगेशन की टेक्नोलॉजी, जैसे कि बैक/फ़ॉरवर्ड कैश मेमोरी (Chrome 96 में डेस्कटॉप पर शिप किया गया) और अनुमान के नियम (Chrome 103 में शिप किया गया), मौजूदा और आने वाले समय, दोनों के अनुभव को बेहतर बनाती हैं. इस पोस्ट में हम उन अपडेट के बारे में जानेंगे जो हमने इन नए वर्कफ़्लो को शामिल करने के लिए ब्राउज़र एक्सटेंशन API में किए हैं.

अलग-अलग तरह के पेजों को समझना

बैक/फ़ॉरवर्ड कैश मेमोरी और प्रीरेंडरिंग की सुविधा की शुरुआत से पहले, किसी एक टैब में सिर्फ़ एक ही पेज चालू था. हमेशा यही झलक दिखती थी. अगर कोई उपयोगकर्ता पिछले पेज पर वापस आता है, तो ऐक्टिव पेज दिखना बंद हो जाएगा (पेज B). साथ ही, इतिहास का पिछला पेज पूरी तरह से दोबारा तैयार हो जाएगा (पेज A). एक्सटेंशन को इस बात की चिंता करने की ज़रूरत नहीं थी कि लाइफ़ साइकल के किस पेज पर पेज थे, क्योंकि टैब के लिए सिर्फ़ एक पेज होता था, यानी कि पेज चालू/दिखने की स्थिति में होता है.

सक्रिय पेज को हटाना
चालू पेज से हटाना.

बैक/फ़ॉरवर्ड कैश मेमोरी और प्रीरेंडरिंग की सुविधा से, टैब और पेजों के बीच एक-दूसरे का कोई संबंध नहीं होता. अब हर टैब, कई पेजों और पेजों को ऐसे स्टोर करता है जिनकी स्थिति अलग-अलग होती है. ऐसे में उस टैब को मिटाया नहीं जाता और उसे फिर से बनाया नहीं जाता.

उदाहरण के लिए, हो सकता है कि कोई पेज, पहले से रेंडर किए गए (न दिखने वाले) पेज के तौर पर शुरू हो और उपयोगकर्ता के किसी लिंक पर क्लिक करने पर वह किसी चालू (दिखने वाला) पेज में बदल जाए. इसके बाद, उपयोगकर्ता जब किसी दूसरे पेज पर जाए, तो पेज को वापस/फ़ॉरवर्ड कैश मेमोरी (न दिखने वाली) में सेव कर दिया जाए. यह सब पेज को मिटाए बिना ही होता है. इस लेख के आखिर में, हम उन नई प्रॉपर्टी के बारे में जानेंगे जिनके बारे में एक्सटेंशन को बताया गया है. इससे, एक्सटेंशन को यह समझने में मदद मिलेगी कि पेज किस स्थिति में हैं.

पेज किस तरह के हैं
पेज किस तरह के हैं.

ध्यान रखें कि किसी टैब में, पहले से रेंडर किए गए पेजों की एक सीरीज़ (सिर्फ़ एक नहीं), एक चालू (दिखने वाला) पेज, और कैश मेमोरी में सेव किए गए, बैक/फ़ॉरवर्ड पेज की एक सीरीज़ हो सकती है.

एक्सटेंशन डेवलपर के लिए क्या बदल रहा है?

फ़्रेमआईडी == 0

Chromium में, हम सबसे ऊपर/मुख्य फ़्रेम को सबसे बाहरी फ़्रेम के तौर पर देखते हैं.

ऐसे एक्सटेंशन लेखकों को समस्या हो सकती है जो सबसे बाहरी फ़्रेम का frameId 0 मानते हैं. यह पिछले सबसे सही तरीके में से एक है. किसी टैब में अब कई बाहरी फ़्रेम (पहले से रेंडर किए गए और कैश मेमोरी में सेव किए गए पेज) हो सकते हैं, इसलिए यह धारणा गलत है कि किसी टैब के लिए सबसे बाहरी फ़्रेम मौजूद है. frameId == 0 अब भी चालू पेज का सबसे बाहरी फ़्रेम दिखाएगा. हालांकि, उसी टैब में मौजूद अन्य पेजों के बाहरी फ़्रेम शून्य नहीं होंगे. इस समस्या को ठीक करने के लिए, एक नया frameType फ़ील्ड जोड़ा गया है. इस पोस्ट का “मैं कैसे पता करूं कि कोई फ़्रेम सबसे बाहरी फ़्रेम है या नहीं?” सेक्शन देखें.

फ़्रेम बनाम दस्तावेज़ों की लाइफ़ साइकल

एक और सिद्धांत जो एक्सटेंशन के साथ समस्या पैदा करता है, वह है फ़्रेम का लाइफ़ साइकल. फ़्रेम, एक दस्तावेज़ को होस्ट करता है. यह दस्तावेज़, तय किए गए यूआरएल से जुड़ा होता है. दस्तावेज़ में बदलाव हो सकता है, जैसे कि नेविगेट करके. हालांकि, frameId में बदलाव नहीं होगा. इसलिए, सिर्फ़ frameId से किसी खास दस्तावेज़ में हुई गतिविधि को जोड़ना मुश्किल है. हम documentId का कॉन्सेप्ट दिखा रहे हैं, जो हर दस्तावेज़ का यूनीक आइडेंटिफ़ायर है. अगर किसी फ़्रेम पर नेविगेट किया जाता है और नया दस्तावेज़ खुलता है, तो आइडेंटिफ़ायर बदल जाएगा. इस फ़ील्ड से यह पता चलता है कि पेज अपने लाइफ़ साइकल की स्थिति कब बदलते हैं (प्रीरेंडर/ऐक्टिव/कैश्ड के बीच) क्योंकि इनमें कोई बदलाव नहीं होता.

वेब नेविगेशन इवेंट

chrome.webNavigation नेमस्पेस के इवेंट, एक ही पेज पर कई बार ट्रिगर हो सकते हैं. यह इस बात पर निर्भर करता है कि इवेंट की लाइफ़ साइकल में क्या है. “मैं कैसे पता करूं कि पेज किस लाइफ़ साइकल में है?” और “मैं यह कैसे तय करूं कि पेज का ट्रांज़िशन कब होगा?” सेक्शन देखें.

मैं यह कैसे बताऊं कि पेज किस लाइफ़ साइकल में है?

DocumentLifecycle टाइप को ऐसे कई एक्सटेंशन एपीआई में जोड़ा गया है जिनमें frameId पहले उपलब्ध था. अगर किसी इवेंट (जैसे कि onCommitted) में DocumentLifecycle टाइप मौजूद है, तो उसकी वैल्यू वह स्थिति है जिसमें इवेंट जनरेट किया गया था. किसी भी समय, WebNavigation getFrame() और getAllFrames() तरीकों से जानकारी के बारे में क्वेरी की जा सकती है. हालांकि, कभी भी इवेंट की वैल्यू का इस्तेमाल किया जाना चाहिए. अगर आपने दोनों में से किसी भी तरीके का इस्तेमाल किया है, तो ध्यान रखें कि इवेंट जनरेट होने और दोनों तरीकों से किए गए प्रॉमिस को हल करने के बाद, फ़्रेम की स्थिति बदल सकती है.

DocumentLifecycle की वैल्यू ये होती हैं:

  • "prerender" : फ़िलहाल, इसे उपयोगकर्ता को नहीं दिखाया गया है, लेकिन इसे उपयोगकर्ता को दिखाने के लिए तैयार किया जा रहा है.
  • "active": मौजूदा समय में उपयोगकर्ता को दिखाया जा रहा है.
  • "cached": बैक/फ़ॉरवर्ड कैश मेमोरी में सेव किया गया.
  • "pending_deletion": दस्तावेज़ खत्म किया जा रहा है.

मैं कैसे पता करूं कि कोई फ़्रेम सबसे बाहरी फ़्रेम है या नहीं?

ऐसा हो सकता है कि पहले एक्सटेंशन ने यह जांच की हो कि frameId == 0, सबसे बाहरी फ़्रेम के लिए है या नहीं. एक टैब में कई पेज होने से, अब हमारे पास कई बाहरी फ़्रेम हैं. इसलिए, frameId की परिभाषा सही नहीं है. आपको कैश मेमोरी में सेव किए गए, बैक/फ़ॉरवर्ड फ़्रेम के बारे में कभी इवेंट नहीं मिलेंगे. हालांकि, पहले से रेंडर किए गए फ़्रेम के लिए, बाहरी फ़्रेम के लिए frameId शून्य नहीं होगा. इसलिए, frameId == 0 को एक सिग्नल के तौर पर इस्तेमाल करके यह पता लगाना कि यह सबसे बाहरी फ़्रेम है या नहीं.

इसमें मदद करने के लिए, हमने FrameType नाम का एक नया टाइप लॉन्च किया है. इसलिए, यह पता लगाना अब आसान है कि फ़्रेम असल में सबसे बाहरी फ़्रेम है या नहीं. FrameType में ये वैल्यू होती हैं:

  • "outermost_frame": आम तौर पर, इसे सबसे ऊपर वाला फ़्रेम कहा जाता है. ध्यान दें कि ये कई तरह के होते हैं. उदाहरण के लिए, अगर आपके पास पहले से रेंडर किए गए और कैश मेमोरी में सेव किए गए पेज हैं, तो हर पेज का सबसे बाहरी फ़्रेम होता है, जिसे सबसे ऊपर वाला फ़्रेम कहा जा सकता है.
  • "fenced_frame": आने वाले समय में इस्तेमाल के लिए रिज़र्व है.
  • "sub_frame": आम तौर पर, एक iframe.

हम DocumentLifecycle को FrameType के साथ मिला सकते हैं और यह पता लगा सकते हैं कि कोई फ़्रेम सबसे बाहरी फ़्रेम है या नहीं. उदाहरण के लिए: js tab.documentLifecycle == “active” && frameType == “outermost_frame”

मैं फ़्रेम के साथ इस्तेमाल में लगने वाले समय को कैसे हल करूं?

जैसा कि हमने ऊपर बताया है कि फ़्रेम एक दस्तावेज़ को होस्ट करता है और फ़्रेम किसी नए दस्तावेज़ पर जा सकता है, लेकिन frameId नहीं बदलेगा. जब आपको सिर्फ़ frameId से इवेंट मिलता है, तो इससे समस्या होती है. अगर आप फ़्रेम का यूआरएल देखते हैं, तो वह उस फ़्रेम से अलग हो सकता है जब इवेंट हुआ था, तो इसे इस्तेमाल के समय की समस्या कहा जाता है.

इसे ठीक करने के लिए, हमने documentId (और parentDocumentId) को लॉन्च किया है. अगर documentId दिया गया है, तो webNavigation.getFrame() तरीका, अब frameId को विकल्प के तौर पर सेट कर सकता है. किसी फ़्रेम को नेविगेट करने पर, documentId बदल जाएगा.

मैं कैसे तय करूं कि किसी पेज का ट्रांज़िशन कब होगा?

यह तय करने के लिए कि कोई पेज अलग-अलग स्थितियों के बीच बदलता है या नहीं, अश्लील सिग्नल मौजूद हैं.

आइए, WebNavigation इवेंट के बारे में जानें.

किसी भी पेज के पहली बार नेविगेशन करने पर, आपको नीचे दिए गए क्रम में चार इवेंट दिखेंगे. ध्यान दें कि ये चार इवेंट, DocumentLifecycle की स्थिति में "prerender" या "active" होने पर हो सकते हैं.

onBeforeNavigate
onCommitted
onDOMContentLoaded
onCompleted

नीचे दिए गए डायग्राम में, पहले से रेंडर किया गया पेज चालू होने पर, documentId को "xyz" में बदला जाता है.

पहले से रेंडर किया गया पेज जब सक्रिय पेज बन जाता है, तो दस्तावेज़ का आईडी बदल जाता है
जब पहले से रेंडर किया गया पेज, चालू पेज बन जाता है, तब documentId बदल जाता है.

किसी पेज के, बैक/फ़ॉरवर्ड कैश मेमोरी या प्रीरेंडरिंग से चालू होने वाली स्थिति में ट्रांज़िशन होने पर, तीन और इवेंट होंगे. हालांकि, DocumentLifecyle "active" होने वाला है.

onBeforeNavigate
onCommitted
onCompleted

documentId मूल इवेंट की तरह ही रहेगा. इसे ऊपर दिखाया गया है, जब documentId == xyz के चालू होते हैं. ध्यान दें कि onDOMContentLoaded इवेंट को छोड़कर, वही नेविगेशन इवेंट ट्रिगर होते हैं, क्योंकि पेज पहले ही लोड हो चुका है.

अगर आपका कोई सवाल या टिप्पणी है, तो कृपया Chromium-extensions ग्रुप पर पूछें.