chrome.devtools.inspectedWindow

ब्यौरा

जांची गई विंडो के साथ इंटरैक्ट करने के लिए, chrome.devtools.inspectedWindow API का इस्तेमाल करें: जांचे गए पेज के लिए टैब आईडी पाएं, जांचे गए विंडो के कॉन्टेक्स्ट में कोड का आकलन करें, पेज को फिर से लोड करें या पेज में मौजूद संसाधनों की सूची पाएं.

Developer Tools API इस्तेमाल करने के बारे में सामान्य जानकारी पाने के लिए, DevTools API की खास जानकारी देखें.

tabId प्रॉपर्टी, टैब आइडेंटिफ़ायर उपलब्ध कराती है. इसका इस्तेमाल chrome.tabs.* एपीआई कॉल के साथ किया जा सकता है. हालांकि, कृपया ध्यान दें कि सुरक्षा से जुड़ी वजहों से, chrome.tabs.* एपीआई को डेवलपर टूल के एक्सटेंशन पेजों पर नहीं दिखाया जाता है. आपको टैब आईडी को बैकग्राउंड पेज पर भेजना होगा और वहां से chrome.tabs.* एपीआई फ़ंक्शन को लागू करना होगा.

reload तरीके का इस्तेमाल करके, जांच किए गए पेज को फिर से लोड किया जा सकता है. इसके अलावा, कॉलर, उपयोगकर्ता एजेंट स्ट्रिंग के लिए कोई ओवरराइड तय कर सकता है. साथ ही, पेज लोड होने पर जल्दी इंजेक्ट की जाने वाली कोई स्क्रिप्ट या कैश मेमोरी में सेव किए गए संसाधनों को फिर से लोड करने का विकल्प भी तय कर सकता है.

जांचे गए पेज में मौजूद संसाधनों (दस्तावेज़, स्टाइलशीट, स्क्रिप्ट, इमेज वगैरह) की सूची पाने के लिए, getResources कॉल और onResourceContent इवेंट का इस्तेमाल करें. Resource क्लास के getContent और setContent तरीकों के साथ-साथ onResourceContentCommitted इवेंट का इस्तेमाल, संसाधन के कॉन्टेंट में बदलाव करने के लिए किया जा सकता है. उदाहरण के लिए, किसी बाहरी एडिटर की मदद से.

मेनिफ़ेस्ट

इस एपीआई का इस्तेमाल करने के लिए, इन कुंजियों का एलान मेनिफ़ेस्ट में करना ज़रूरी है.

"devtools_page"

जांची गई विंडो में कोड चलाना

eval तरीके से, एक्सटेंशन को जांच किए गए पेज के कॉन्टेक्स्ट में JavaScript कोड को लागू करने की सुविधा मिलती है. इस तरीके का सही संदर्भ में इस्तेमाल करने पर, यह बहुत असरदार होता है. हालांकि, इसका गलत तरीके से इस्तेमाल करने पर, यह खतरनाक हो सकता है. tabs.executeScript तरीके का इस्तेमाल करें. हालांकि, अगर आपको eval तरीके से मिलने वाली खास सुविधा की ज़रूरत है, तो इसका इस्तेमाल करें.

eval और tabs.executeScript तरीकों के बीच मुख्य अंतर यहां दिए गए हैं:

  • eval तरीके में, जिस कोड का आकलन किया जा रहा है उसके लिए आइसोलेटेड वर्ल्ड का इस्तेमाल नहीं किया जाता. इसलिए, कोड के लिए, जांच की गई विंडो की JavaScript स्थिति को ऐक्सेस किया जा सकता है. इस तरीके का इस्तेमाल तब करें, जब आपको जांच किए गए पेज की JavaScript स्थिति को ऐक्सेस करना हो.
  • जिस कोड का आकलन किया जा रहा है उसके एक्ज़ीक्यूशन कॉन्टेक्स्ट में, Developer Tools console API शामिल है. उदाहरण के लिए, कोड में inspect और $0 का इस्तेमाल किया जा सकता है.
  • जांचे गए कोड से ऐसी वैल्यू मिल सकती है जिसे एक्सटेंशन कॉलबैक को पास किया जाता है. जवाब में मिली वैल्यू, मान्य JSON ऑब्जेक्ट होनी चाहिए. इसमें सिर्फ़ प्रिमिटिव JavaScript टाइप और अन्य JSON ऑब्जेक्ट के लिए ऐसाइक्लिक रेफ़रंस शामिल हो सकते हैं. जांचे गए पेज से मिले डेटा को प्रोसेस करते समय, कृपया ज़्यादा सावधानी बरतें. ऐसा इसलिए, क्योंकि एक्ज़ीक्यूशन कॉन्टेक्स्ट को मुख्य रूप से, जांचे गए पेज से कंट्रोल किया जाता है. कोई दुर्भावनापूर्ण पेज, एक्सटेंशन को भेजे जा रहे डेटा पर असर डाल सकता है.

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

डिफ़ॉल्ट रूप से, eval तरीका, जांच किए गए पेज के मुख्य फ़्रेम के कॉन्टेक्स्ट में काम करता है.

eval तरीके में दूसरा आर्ग्युमेंट इस्तेमाल किया जा सकता है. इसका इस्तेमाल करके, उस कॉन्टेक्स्ट के बारे में बताया जा सकता है जिसमें कोड का आकलन किया जाता है. इस options ऑब्जेक्ट में, इनमें से एक या इससे ज़्यादा कुंजियां शामिल हो सकती हैं:

frameURL
इस विकल्प का इस्तेमाल, जांच किए गए पेज के मुख्य फ़्रेम के अलावा किसी दूसरे फ़्रेम को तय करने के लिए किया जाता है.
contextSecurityOrigin
इसका इस्तेमाल, दिए गए फ़्रेम में मौजूद किसी कॉन्टेक्स्ट को चुनने के लिए किया जाता है. यह कॉन्टेक्स्ट, वेब ऑरिजिन के हिसाब से चुना जाता है.
useContentScriptContext
अगर यह वैल्यू सही है, तो स्क्रिप्ट को उसी कॉन्टेक्स्ट में एक्ज़ीक्यूट करें जिसमें एक्सटेंशन की कॉन्टेंट स्क्रिप्ट होती हैं. (यह एक्सटेंशन के वेब ऑरिजिन को कॉन्टेक्स्ट सिक्योरिटी ऑरिजिन के तौर पर सेट करने जैसा है.) इसका इस्तेमाल, कॉन्टेंट स्क्रिप्ट के साथ डेटा को बदलने के लिए किया जा सकता है.

उदाहरण

यहां दिया गया कोड, उस पेज पर इस्तेमाल किए गए jQuery के वर्शन की जांच करता है जिसकी जांच की जा रही है:

chrome.devtools.inspectedWindow.eval(
  "jQuery.fn.jquery",
  function(result, isException) {
    if (isException) {
      console.log("the page is not using jQuery");
    } else {
      console.log("The page is using jQuery v" + result);
    }
  }
);

इस एपीआई को आज़माने के लिए, chrome-extension-samples रिपॉज़िटरी से devtools API के उदाहरण इंस्टॉल करें.

टाइप

Resource

जांचे गए पेज में मौजूद कोई संसाधन, जैसे कि कोई दस्तावेज़, स्क्रिप्ट या इमेज.

प्रॉपर्टी

  • url

    स्ट्रिंग

    संसाधन का यूआरएल.

  • getContent

    अमान्य

    इससे संसाधन का कॉन्टेंट मिलता है.

    getContent फ़ंक्शन इस तरह दिखता है: 

    () => {...}

    • returns

      Promise<object>

      मंज़ूरी मिलना बाकी है

      यह एक ऐसा फ़ंक्शन है जो अनुरोध पूरा होने पर, संसाधन का कॉन्टेंट पाता है.

  • setContent

    अमान्य

    इससे संसाधन का कॉन्टेंट सेट किया जाता है.

    setContent फ़ंक्शन इस तरह दिखता है: 

    (content: string, commit: boolean) => {...}

    • कॉन्टेंट

      स्ट्रिंग

      संसाधन का नया कॉन्टेंट. फ़िलहाल, सिर्फ़ टेक्स्ट टाइप वाले संसाधनों का इस्तेमाल किया जा सकता है.

    • डेटाबेस के बदलावों को सेव करें

      बूलियन

      अगर उपयोगकर्ता ने संसाधन में बदलाव कर लिया है और संसाधन के नए कॉन्टेंट को सेव किया जाना चाहिए, तो इस फ़ील्ड को 'सही है' पर सेट करें. अगर उपयोगकर्ता संसाधन में बदलाव कर रहा है और यह बदलाव छोटा है, तो इस फ़ील्ड को 'गलत है' पर सेट करें.

    • returns

      Promise<object>

      मंज़ूरी मिलना बाकी है

      अनुरोध पूरा होने पर कॉल किया जाने वाला फ़ंक्शन.

प्रॉपर्टी

tabId

उस टैब का आईडी जिसकी जांच की जा रही है. इस आईडी का इस्तेमाल chrome.tabs.* के साथ किया जा सकता है एपीआई.

टाइप

संख्या

तरीके

eval()

chrome.devtools.inspectedWindow.eval(
  expression: string,
  options?: object,
): Promise<object>

यह फ़ंक्शन, जांच किए गए पेज के मुख्य फ़्रेम के कॉन्टेक्स्ट में JavaScript एक्सप्रेशन का आकलन करता है. एक्सप्रेशन का आकलन, JSON के मुताबिक ऑब्जेक्ट के तौर पर किया जाना चाहिए. ऐसा न होने पर, अपवाद दिखता है. eval फ़ंक्शन, DevTools की गड़बड़ी या आकलन के दौरान होने वाली JavaScript अपवाद की सूचना दे सकता है. दोनों ही मामलों में, कॉलबैक का result पैरामीटर undefined होता है. DevTools की गड़बड़ी के मामले में, isException पैरामीटर की वैल्यू शून्य नहीं होती है. साथ ही, isError को true पर सेट किया जाता है और code को गड़बड़ी के कोड पर सेट किया जाता है. JavaScript से जुड़ी गड़बड़ी होने पर, isException को सही पर सेट किया जाता है. साथ ही, value को थ्रो किए गए ऑब्जेक्ट की स्ट्रिंग वैल्यू पर सेट किया जाता है.

पैरामीटर

  • एक्सप्रेशन

    स्ट्रिंग

    आकलन करने के लिए एक्सप्रेशन.

  • विकल्प

    ऑब्जेक्ट ज़रूरी नहीं है

    options पैरामीटर में एक या उससे ज़्यादा विकल्प हो सकते हैं.

    • frameURL

      string ज़रूरी नहीं है

      अगर यह विकल्प चुना जाता है, तो एक्सप्रेशन का आकलन उस iframe पर किया जाता है जिसका यूआरएल, तय किए गए यूआरएल से मेल खाता है. डिफ़ॉल्ट रूप से, एक्सप्रेशन का आकलन उस पेज के टॉप फ़्रेम में किया जाता है जिसकी जांच की जा रही है.

    • scriptExecutionContext

      string ज़रूरी नहीं है

      Chrome 107 या इसके बाद के वर्शन

      यह फ़ंक्शन, उस एक्सटेंशन की कॉन्टेंट स्क्रिप्ट के हिसाब से एक्सप्रेशन का आकलन करता है जिसका ऑरिजिन तय किए गए ऑरिजिन से मेल खाता है. अगर scriptExecutionContext दिया गया है, तो यह useContentScriptContext पर 'सही है' सेटिंग को बदल देता है.

    • useContentScriptContext

      बूलियन ज़रूरी नहीं है

      कॉलिंग एक्सटेंशन की कॉन्टेंट स्क्रिप्ट के कॉन्टेक्स्ट में एक्सप्रेशन का आकलन करता है. हालांकि, इसके लिए ज़रूरी है कि कॉन्टेंट स्क्रिप्ट को पहले से ही जांच किए जा रहे पेज में इंजेक्ट किया गया हो. ऐसा न होने पर, एक्सप्रेशन का आकलन नहीं किया जाता है. साथ ही, कॉलबैक को ऐसे ऑब्जेक्ट के साथ शुरू किया जाता है जिसमें अपवाद पैरामीटर सेट होता है. इस ऑब्जेक्ट में, isError फ़ील्ड को सही पर सेट किया जाता है और code फ़ील्ड को E_NOTFOUND पर सेट किया जाता है.

रिटर्न

  • Promise<object>

    मंज़ूरी मिलना बाकी है

    समीक्षा पूरी होने पर इस फ़ंक्शन को कॉल किया जाता है.

getResources()

chrome.devtools.inspectedWindow.getResources(): Promise<Resource[]>

इस कुकी का इस्तेमाल, इंस्पेक्ट किए गए पेज से संसाधनों की सूची को वापस पाने के लिए किया जाता है.

रिटर्न

  • Promise<Resource[]>

    मंज़ूरी मिलना बाकी है

    यह एक ऐसा फ़ंक्शन है जो अनुरोध पूरा होने पर संसाधनों की सूची पाता है.

reload()

chrome.devtools.inspectedWindow.reload(
  reloadOptions?: object,
): void

इस कुकी का इस्तेमाल, जांच किए गए पेज को फिर से लोड करने के लिए किया जाता है.

पैरामीटर

  • reloadOptions

    ऑब्जेक्ट ज़रूरी नहीं है

    • ignoreCache

      बूलियन ज़रूरी नहीं है

      सही होने पर, लोडर उन सभी पेज रिसॉर्स के लिए कैश मेमोरी को बायपास कर देगा जिनकी जांच की गई है. ये रिसॉर्स, load इवेंट के ट्रिगर होने से पहले लोड किए गए थे. इसका असर, जांच की गई विंडो या डेवलपर टूल विंडो में Ctrl+Shift+R दबाने जैसा होता है.

    • injectedScript

      string ज़रूरी नहीं है

      अगर स्क्रिप्ट तय की गई है, तो जांच किए गए पेज के हर फ़्रेम में उसे लोड होते ही डाल दिया जाएगा. ऐसा फ़्रेम की किसी भी स्क्रिप्ट से पहले किया जाएगा. इसके बाद, पेज को फिर से लोड करने पर स्क्रिप्ट इंजेक्ट नहीं की जाएगी. उदाहरण के लिए, अगर उपयोगकर्ता Ctrl+R दबाता है.

    • userAgent

      string ज़रूरी नहीं है

      अगर स्ट्रिंग तय की गई है, तो यह User-Agent एचटीटीपी हेडर की वैल्यू को बदल देगी. यह हेडर, जांच किए गए पेज के संसाधन लोड करते समय भेजा जाता है. यह स्ट्रिंग, navigator.userAgent प्रॉपर्टी की उस वैल्यू को भी बदल देगी जो जांच किए गए पेज पर चल रही किसी भी स्क्रिप्ट को दिखाई जाती है.

इवेंट

onResourceAdded

chrome.devtools.inspectedWindow.onResourceAdded.addListener(
  callback: function,
)

इस इवेंट को तब ट्रिगर किया जाता है, जब जांच किए गए पेज में कोई नया संसाधन जोड़ा जाता है.

पैरामीटर

  • कॉलबैक

    फ़ंक्शन

    callback पैरामीटर ऐसा दिखता है: 

    (resource: Resource) => void

onResourceContentCommitted

chrome.devtools.inspectedWindow.onResourceContentCommitted.addListener(
  callback: function,
)

यह तब ट्रिगर होता है, जब संसाधन का नया वर्शन सेव किया जाता है. उदाहरण के लिए, जब कोई उपयोगकर्ता Developer Tools में संसाधन के बदले गए वर्शन को सेव करता है.

पैरामीटर

  • कॉलबैक

    फ़ंक्शन

    callback पैरामीटर ऐसा दिखता है: 

    (resource: Resource, content: string) => void

    • रिसॉर्स

      संसाधन

    • कॉन्टेंट

      स्ट्रिंग