chrome.devtools.inspectedWindow

ब्यौरा

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

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

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

    (callback: function) => {...}

    • कॉलबैक

      फ़ंक्शन

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

      (content: string, encoding: string) => void

      • कॉन्टेंट

        स्ट्रिंग

        संसाधन का कॉन्टेंट (कोड में बदला गया हो सकता है).

      • एन्कोडिंग

        स्ट्रिंग

        अगर कॉन्टेंट को कोड में नहीं बदला गया है, तो यह फ़ील्ड खाली होता है. अगर कॉन्टेंट को कोड में बदला गया है, तो इसमें कोड में बदलने के तरीके का नाम होता है. फ़िलहाल, सिर्फ़ base64 फ़ॉर्मैट इस्तेमाल किया जा सकता है.

  • setContent

    अमान्य

    इस कुकी का इस्तेमाल, संसाधन का कॉन्टेंट सेट करने के लिए किया जाता है.

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

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

    • कॉन्टेंट

      स्ट्रिंग

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

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

      बूलियन

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

    • कॉलबैक

      फ़ंक्शन ज़रूरी नहीं

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

      (error?: object) => void

      • गड़बड़ी

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

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

प्रॉपर्टी

tabId

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

टाइप

संख्या

तरीके

eval()

chrome.devtools.inspectedWindow.eval(
  expression: string,
  options?: object,
  callback?: function,
): void

यह फ़ंक्शन, जांच किए गए पेज के मुख्य फ़्रेम के कॉन्टेक्स्ट में 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

      boolean optional

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

  • कॉलबैक

    फ़ंक्शन ज़रूरी नहीं

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

    (result: object, exceptionInfo: object) => void

    • नतीजा

      ऑब्जेक्ट

      आकलन का नतीजा.

    • exceptionInfo

      ऑब्जेक्ट

      यह ऑब्जेक्ट, एक्सप्रेशन का आकलन करते समय हुई किसी गड़बड़ी के बारे में जानकारी देता है.

      • कोड

        स्ट्रिंग

        यह सेट करता है कि एक्सप्रेशन का आकलन करने से पहले, DevTools की ओर से कोई गड़बड़ी हुई है या नहीं.

      • ब्यौरा

        स्ट्रिंग

        यह सेट करता है कि एक्सप्रेशन का आकलन करने से पहले, DevTools की ओर से कोई गड़बड़ी हुई है या नहीं.

      • विवरण

        कोई भी[]

        यह तब सेट होता है, जब एक्सप्रेशन का आकलन करने से पहले DevTools की ओर से गड़बड़ी हुई हो. इसमें उन वैल्यू का कलेक्शन होता है जिन्हें गड़बड़ी की वजह के बारे में ज़्यादा जानकारी देने के लिए, ब्यौरे वाली स्ट्रिंग में बदला जा सकता है.

      • isError

        बूलियन

        यह सेट करता है कि एक्सप्रेशन का आकलन करने से पहले, DevTools की ओर से कोई गड़बड़ी हुई है या नहीं.

      • isException

        बूलियन

        यह सेट करता है कि क्या कोड का आकलन करने पर, ऐसा अपवाद मिलता है जिसे हैंडल नहीं किया गया है.

      • मान

        स्ट्रिंग

        यह सेट करता है कि क्या कोड का आकलन करने पर, ऐसा अपवाद मिलता है जिसे हैंडल नहीं किया गया है.

getResources()

chrome.devtools.inspectedWindow.getResources(
  callback: function,
): void

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

पैरामीटर

  • कॉलबैक

    फ़ंक्शन

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

    (resources: Resource[]) => void

    • उपलब्ध संसाधन

      Resource[]

      पेज में मौजूद संसाधन.

reload()

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

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

पैरामीटर

  • reloadOptions

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

    • ignoreCache

      boolean optional

      सही होने पर, लोडर उन सभी पेज रिसॉर्स के लिए कैश मेमोरी को बायपास कर देगा जिनकी जांच की गई है और जिन्हें 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

    • रिसॉर्स

      संसाधन

    • कॉन्टेंट

      स्ट्रिंग