browser.devtools.inspectedWindow

বিবরণ

পরীক্ষা করা উইন্ডোর সাথে ইন্টার‍্যাক্ট করতে chrome.devtools.inspectedWindow API ব্যবহার করুন: পরীক্ষা করা পৃষ্ঠার জন্য ট্যাব আইডি পান, পরীক্ষা করা উইন্ডোর প্রসঙ্গে কোড মূল্যায়ন করুন, পৃষ্ঠা আবার লোড করুন অথবা পৃষ্ঠার মধ্যে রিসোর্সের তালিকা পান।

ডেভেলপার টুল API ব্যবহার করার বিষয়ে সাধারণ তথ্য পেতে DevTools API-এর সারসংক্ষেপ দেখুন।

tabId প্রপার্টি ট্যাব শনাক্তকারী প্রদান করে যা আপনি browser.tabs.* API কলের সাথে ব্যবহার করতে পারবেন। তবে, নিরাপত্তার কারণে browser.tabs.* API ডেভেলপার টুল এক্সটেনশন পৃষ্ঠায় দেখানো হয় না—আপনাকে ব্যাকগ্রাউন্ড পৃষ্ঠায় ট্যাব আইডি পাস করতে হবে এবং সেখান থেকে browser.tabs.* API ফাংশন কল করতে হবে।

পরীক্ষিত পেজটি আবার লোড করার জন্য reload পদ্ধতি ব্যবহার করা হতে পারে। এছাড়াও, কলার ইউজার এজেন্ট স্ট্রিংয়ের জন্য ওভাররাইড, পৃষ্ঠা লোড হওয়ার সাথে সাথে ইনজেক্ট করা হবে এমন স্ক্রিপ্ট অথবা ক্যাশে করা রিসোর্স জোর করে রিলোড করার বিকল্প নির্দিষ্ট করতে পারেন।

পরীক্ষা করা পৃষ্ঠার মধ্যে রিসোর্সের (ডকুমেন্ট, স্টাইলশিট, স্ক্রিপ্ট, ছবি ইত্যাদি) তালিকা পেতে getResources কল এবং onResourceContent ইভেন্ট ব্যবহার করুন। Resource ক্লাসের getContent এবং setContent পদ্ধতি, onResourceContentCommitted ইভেন্টের সাথে, রিসোর্স কন্টেন্টের পরিবর্তনকে সমর্থন করতে ব্যবহার করা যেতে পারে, উদাহরণস্বরূপ, একটি এক্সটার্নাল এডিটরের মাধ্যমে।

ম্যানিফেস্ট

এই API ব্যবহার করতে নিম্নলিখিত কীগুলি ম্যানিফেস্টে ঘোষণা করতে হবে।

"devtools_page"

পরীক্ষা করা উইন্ডোতে কোড এক্সিকিউট করুন

eval পদ্ধতিটি এক্সটেনশনকে পরীক্ষা করা পৃষ্ঠার প্রসঙ্গে জাভাস্ক্রিপ্ট কোড কার্যকর করার ক্ষমতা প্রদান করে। সঠিক কন্টেক্সটে ব্যবহার করা হলে এই পদ্ধতিটি শক্তিশালী এবং অনুপযুক্তভাবে ব্যবহার করা হলে বিপজ্জনক। eval পদ্ধতি যে নির্দিষ্ট কার্যকারিতা প্রদান করে সেটি আপনার প্রয়োজন না হলে tabs.executeScript পদ্ধতি ব্যবহার করুন।

eval এবং tabs.executeScript পদ্ধতির মধ্যে প্রধান পার্থক্যগুলি এখানে দেওয়া হল:

  • eval পদ্ধতিটি মূল্যায়ন করা কোডের জন্য একটি বিচ্ছিন্ন বিশ্ব ব্যবহার করে না, তাই পরিদর্শন করা উইন্ডোর জাভাস্ক্রিপ্ট স্টেট কোডে অ্যাক্সেসযোগ্য। পরীক্ষা করা পৃষ্ঠার JavaScript স্ট্যাটাস অ্যাক্সেস করার প্রয়োজন হলে এই পদ্ধতি ব্যবহার করুন।
  • মূল্যায়ন করা হচ্ছে এমন কোডের এক্সিকিউশন কন্টেক্সটে ডেভেলপার টুল কনসোল API অন্তর্ভুক্ত। যেমন, কোডটি inspect এবং $0 ব্যবহার করতে পারে।
  • মূল্যায়ন করা কোড এমন একটি ভ্যালু রিটার্ন করতে পারে যা এক্সটেনশন কলব্যাকে পাস করা হয়। ফেরত পাঠানো ভ্যালু একটি সঠিক JSON অবজেক্ট হতে হবে (এতে শুধুমাত্র প্রিমিটিভ জাভাস্ক্রিপ্ট টাইপ এবং অন্যান্য JSON অবজেক্টের অ্যাসাইক্লিক রেফারেন্স থাকতে পারে)। ইন্সপেক্ট করা পৃষ্ঠা থেকে পাওয়া ডেটা প্রসেস করার সময় অতিরিক্ত সতর্কতা অবলম্বন করুন—এক্সিকিউশন কন্টেক্সট মূলত ইন্সপেক্ট করা পৃষ্ঠা দ্বারা নিয়ন্ত্রিত হয়; কোনও ক্ষতিকর পৃষ্ঠা এক্সটেনশনে ফেরত পাঠানো ডেটাকে প্রভাবিত করতে পারে।

মনে রাখবেন, একটি পৃষ্ঠায় একাধিক আলাদা JavaScript এক্সিকিউশন কনটেক্সট থাকতে পারে। প্রতিটি ফ্রেমের নিজস্ব প্রসঙ্গ আছে, সাথে প্রতিটি এক্সটেনশনের জন্য একটি অতিরিক্ত প্রসঙ্গ আছে যার কন্টেন্ট স্ক্রিপ্ট সেই ফ্রেমে চলছে।

ডিফল্ট হিসেবে, eval পদ্ধতিটি ইন্সপেক্ট করা পৃষ্ঠার মূল ফ্রেমের প্রসঙ্গে কার্যকর হয়।

eval পদ্ধতিতে একটি ঐচ্ছিক দ্বিতীয় আর্গুমেন্ট থাকে যা আপনি কোডটি যে প্রসঙ্গে মূল্যায়ন করা হয় তা নির্দিষ্ট করতে ব্যবহার করতে পারেন। এই বিকল্প অবজেক্টে নিম্নলিখিত এক বা একাধিক কী থাকতে পারে:

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);
    }
  }
);

এই API ব্যবহার করে দেখতে, chrome-extension-samples রিপোজিটরি থেকে devtools API-এর উদাহরণ ইনস্টল করুন।

ধরন

Resource

পরীক্ষা করা পৃষ্ঠার মধ্যে থাকা রিসোর্স, যেমন কোনও ডকুমেন্ট, স্ক্রিপ্ট বা ছবি।

প্রপার্টি

  • URL

    স্ট্রিং

    রিসোর্সের URL।

  • getContent

    বাতিল

    রিসোর্সের কন্টেন্ট পায়।

    getContent ফাংশনটি দেখতে এইরকম: 

    () => {...}

    • ফেরত দেওয়া

      Promise<object>

      Chrome 151+ Chrome 152 থেকে browser.*

      অনুরোধ সম্পূর্ণ হলে রিসোর্স কন্টেন্ট গ্রহণ করে এমন একটি ফাংশন।

  • setContent

    বাতিল

    রিসোর্সের কন্টেন্ট সেট করে।

    setContent ফাংশনটি দেখতে এইরকম: 

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

    • কন্টেন্ট

      স্ট্রিং

      রিসোর্সের নতুন কন্টেন্ট। বর্তমানে শুধু টেক্সট টাইপের রিসোর্স কাজ করে।

    • কমিট

      বুলিয়ান

      ব্যবহারকারী রিসোর্স এডিট করা শেষ করলে এবং রিসোর্সের নতুন কন্টেন্ট বজায় রাখতে হলে ট্রু; ব্যবহারকারী রিসোর্স এডিট করার সময় কোনও ছোটখাটো পরিবর্তন করলে ফলস।

    • ফেরত দেওয়া

      Promise<object>

      Chrome 151+ Chrome 152 থেকে browser.*

      অনুরোধ সম্পূর্ণ হওয়ার পরে কল করা একটি ফাংশন।

প্রপার্টি

tabId

যে ট্যাবটি পরীক্ষা করা হচ্ছে সেটির আইডি। এই আইডি chrome.tabs.*-এর সাথে ব্যবহার করা হতে পারে API.

ধরন

নম্বর

পদ্ধতি

eval()

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

পরীক্ষা করা পৃষ্ঠার মূল ফ্রেমের প্রসঙ্গে একটি JavaScript এক্সপ্রেশন মূল্যায়ন করে। এক্সপ্রেশনটি অবশ্যই একটি JSON-কমপ্লায়েন্ট অবজেক্টে মূল্যায়ন করতে হবে, অন্যথায় একটি ব্যতিক্রম থ্রো করা হবে। eval ফাংশন DevTools-সাইডের সমস্যা বা মূল্যায়নের সময় হওয়া জাভাস্ক্রিপ্ট ব্যতিক্রমের ব্যাপারে রিপোর্ট করতে পারে। যেকোনও ক্ষেত্রেই, কলব্যাকের result প্যারামিটার হল undefined। DevTools-এর দিকে কোনও সমস্যা হলে, isException প্যারামিটারটি নন-নাল হয় এবং isError-কে 'সত্য' হিসেবে সেট করা হয় এবং code-কে একটি সমস্যা কোড হিসেবে সেট করা হয়। জাভাস্ক্রিপ্ট সংক্রান্ত সমস্যার ক্ষেত্রে, isException-কে true হিসেবে সেট করা হয় এবং value-কে থ্রো করা অবজেক্টের স্ট্রিং ভ্যালু হিসেবে সেট করা হয়।

প্যারামিটারগুলি

  • এক্সপ্রেশন

    স্ট্রিং

    মূল্যায়ন করার জন্য একটি এক্সপ্রেশন।

  • বিকল্প

    অবজেক্ট ঐচ্ছিক

    বিকল্প প্যারামিটারে এক বা একাধিক বিকল্প থাকতে পারে।

    • frameURL

      স্ট্রিং ঐচ্ছিক

      উল্লেখ করা থাকলে, iframe-এ এক্সপ্রেশনের মান নির্ণয় করা হয় যার URL উল্লেখ করা URL-এর সাথে মেলে। ডিফল্ট হিসেবে, এক্সপ্রেশনটি ইন্সপেক্ট করা পৃষ্ঠার উপরের ফ্রেমে মূল্যায়ন করা হয়।

    • scriptExecutionContext

      স্ট্রিং ঐচ্ছিক

      Chrome 107+ Chrome 152 থেকে browser.*

      নির্দিষ্ট উৎসের সাথে মেলে এমন এক্সটেনশনের কন্টেন্ট স্ক্রিপ্টের প্রসঙ্গে এক্সপ্রেশন মূল্যায়ন করুন। দেওয়া থাকলে, scriptExecutionContext, useContentScriptContext-এ 'true' সেটিং ওভাররাইড করে।

    • useContentScriptContext

      বুলিয়ান ঐচ্ছিক

      কলিং এক্সটেনশনের কন্টেন্ট স্ক্রিপ্টের প্রসঙ্গে এক্সপ্রেশন মূল্যায়ন করুন, তবে শর্ত হল কন্টেন্ট স্ক্রিপ্টটি ইতিমধ্যেই পরিদর্শন করা পৃষ্ঠায় ইনজেক্ট করা হয়েছে। যদি তা না হয়, তাহলে এক্সপ্রেশনটি মূল্যায়ন করা হয় না এবং ব্যতিক্রম প্যারামিটার সহ কলব্যাকটি এমন একটি অবজেক্টে সেট করা হয় যার isError ফিল্ডটি true এবং code ফিল্ডটি E_NOTFOUND-এ সেট করা থাকে।

রিটার্ন

  • Promise<object>

    Chrome 151+ Chrome 152 থেকে browser.*

    মূল্যায়ন সম্পূর্ণ হলে একটি ফাংশন কল করা হয়।

getResources()

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

পরীক্ষা করা পৃষ্ঠা থেকে রিসোর্সের তালিকা ফিরিয়ে আনে।

রিটার্ন

  • Promise<Resource[]>

    Chrome 151+ Chrome 152 থেকে browser.*

    অনুরোধ সম্পূর্ণ হলে রিসোর্সের তালিকা গ্রহণ করে এমন একটি ফাংশন।

reload()

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

পরীক্ষা করা পৃষ্ঠা আবার লোড করে।

প্যারামিটারগুলি

  • reloadOptions

    অবজেক্ট ঐচ্ছিক

    • ignoreCache

      বুলিয়ান ঐচ্ছিক

      সত্য হলে, load ইভেন্ট ফায়ার হওয়ার আগে লোড করা সমস্ত ইন্সপেক্ট করা পৃষ্ঠা রিসোর্সের জন্য লোডার ক্যাশে বাইপাস করবে। এই এফেক্টটি, পরীক্ষা করা উইন্ডোতে বা ডেভেলপার টুল উইন্ডোতে Ctrl+Shift+R প্রেস করার মতোই।

    • injectedScript

      স্ট্রিং ঐচ্ছিক

      নির্দিষ্ট করা থাকলে, ফ্রেমের যেকোনও স্ক্রিপ্টের আগে, লোড হওয়ার সাথে সাথেই স্ক্রিপ্টটি পরীক্ষা করা পৃষ্ঠার প্রতিটি ফ্রেমে ইনজেক্ট করা হবে। পরবর্তী রিলোডের পরে স্ক্রিপ্ট ইনজেক্ট করা হবে না—যেমন, ব্যবহারকারী Ctrl+R প্রেস করলে।

    • userAgent

      স্ট্রিং ঐচ্ছিক

      নির্দিষ্ট করা থাকলে, স্ট্রিংটি User-Agent HTTP হেডারের ভ্যালু ওভাররাইড করবে যা পরীক্ষা করা পৃষ্ঠার রিসোর্স লোড করার সময় পাঠানো হয়। এছাড়াও, স্ট্রিংটি 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