browser.devtools.inspectedWindow

ब्यौरा

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

डेवलपर टूल एपीआई इस्तेमाल करने के बारे में सामान्य जानकारी पाने के लिए, DevTools एपीआई की खास जानकारी देखें.

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

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

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

मेनिफ़ेस्ट

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

"devtools_page"

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

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

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

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

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

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

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

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

उदाहरण

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

browser.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

    void

    संसाधन का कॉन्टेंट फ़ेच करता है.

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

    () => {...}

    • returns

      Promise<object>

      Chrome 151+ browser.* Chrome 152 से

      अनुरोध पूरा होने पर, संसाधन का कॉन्टेंट पाने वाला फ़ंक्शन.

  • setContent

    void

    इससे संसाधन का कॉन्टेंट सेट होता है.

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

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

    • कॉन्टेंट

      स्ट्रिंग

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

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

      बूलियन

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

    • returns

      Promise<object>

      Chrome 151+ browser.* Chrome 152 से

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

प्रॉपर्टी

tabId

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

टाइप

संख्या

तरीके

eval()

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

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

पैरामीटर

  • एक्सप्रेशन

    स्ट्रिंग

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

  • विकल्प

    object ज़रूरी नहीं

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

    • frameURL

      string ज़रूरी नहीं

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

    • scriptExecutionContext

      string ज़रूरी नहीं

      Chrome 107+ browser.* Chrome 152 के बाद से

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

    • useContentScriptContext

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

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

रिटर्न

  • Promise<object>

    Chrome 151+ browser.* Chrome 152 से

    यह फ़ंक्शन, आकलन पूरा होने पर कॉल किया जाता है.

getResources()

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

यह जांचे गए पेज से संसाधनों की सूची को वापस लाता है.

रिटर्न

  • वादा<संसाधन[]>

    Chrome 151+ browser.* Chrome 152 से

    अनुरोध पूरा होने पर, संसाधनों की सूची पाने वाला फ़ंक्शन.

reload()

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

जांच किए गए पेज को फिर से लोड करता है.

पैरामीटर

  • reloadOptions

    object ज़रूरी नहीं

    • ignoreCache

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

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

    • injectedScript

      string ज़रूरी नहीं

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

    • userAgent

      string ज़रूरी नहीं

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

इवेंट

onResourceAdded

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

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

पैरामीटर

  • कॉलबैक

    फ़ंक्शन

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

    (resource: Resource) => void

onResourceContentCommitted

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

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

पैरामीटर

  • कॉलबैक

    फ़ंक्शन

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

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

    • रिसॉर्स

      संसाधन

    • कॉन्टेंट

      स्ट्रिंग