বর্ণনা
ইন্সপেক্টেড উইন্ডোর সাথে ইন্টারঅ্যাক্ট করতে chrome.devtools.inspectedWindow API ব্যবহার করুন: এর মাধ্যমে আপনি ইন্সপেক্টেড পেজের ট্যাব আইডি পেতে, ইন্সপেক্টেড উইন্ডোর প্রেক্ষাপটে কোড ইভ্যালুয়েট করতে, পেজটি রিলোড করতে, অথবা পেজের ভেতরের রিসোর্সগুলোর তালিকা পেতে পারেন।
ডেভেলপার টুলস এপিআই ব্যবহারের সাধারণ পরিচিতির জন্য ডেভটুলস এপিআই সারাংশ দেখুন।
tabId প্রপার্টিটি ট্যাব আইডেন্টিফায়ার প্রদান করে, যা আপনি ` chrome.tabs.* ` API কলগুলির সাথে ব্যবহার করতে পারেন। তবে, অনুগ্রহ করে মনে রাখবেন যে নিরাপত্তাজনিত কারণে chrome.tabs.* ` API-টি `Developer Tools` এক্সটেনশন পেজগুলিতে উন্মুক্ত করা হয় না—আপনাকে ট্যাব আইডিটি ব্যাকগ্রাউন্ড পেজে পাঠাতে হবে এবং সেখান থেকেই ` chrome.tabs.* ` API ফাংশনগুলি কল করতে হবে।
পরিদর্শিত পৃষ্ঠাটি পুনরায় লোড করতে reload মেথডটি ব্যবহার করা যেতে পারে। এছাড়াও, কলার ইউজার এজেন্ট স্ট্রিং-এর জন্য একটি ওভাররাইড, পৃষ্ঠা লোড হওয়ার সাথে সাথেই ইনজেক্ট করা হবে এমন একটি স্ক্রিপ্ট, অথবা ক্যাশ করা রিসোর্সসমূহ জোরপূর্বক পুনরায় লোড করার জন্য একটি অপশন নির্দিষ্ট করতে পারে।
পরিদর্শন করা পৃষ্ঠার মধ্যে থাকা রিসোর্সগুলির (ডকুমেন্ট, স্টাইলশীট, স্ক্রিপ্ট, ছবি ইত্যাদি) তালিকা পেতে getResources কল এবং onResourceContent ইভেন্টটি ব্যবহার করুন। Resource ক্লাসের getContent ও setContent মেথডগুলো onResourceContentCommitted ইভেন্টের সাথে একত্রে ব্যবহার করে রিসোর্সের বিষয়বস্তু পরিবর্তন করা যেতে পারে, যেমন—কোনো বাহ্যিক সম্পাদকের দ্বারা।
প্রকাশ
পরিদর্শন করা উইন্ডোতে কোডটি চালান।
eval মেথডটি এক্সটেনশনগুলোকে পরিদর্শন করা পৃষ্ঠার প্রেক্ষাপটে জাভাস্ক্রিপ্ট কোড কার্যকর করার ক্ষমতা প্রদান করে। সঠিক প্রেক্ষাপটে ব্যবহার করা হলে এই মেথডটি শক্তিশালী এবং অনুপযুক্তভাবে ব্যবহার করা হলে বিপজ্জনক। eval মেথডের নির্দিষ্ট কার্যকারিতার প্রয়োজন না হলে tabs.executeScript মেথডটি ব্যবহার করুন।
eval এবং tabs.executeScript মেথডগুলোর মধ্যে প্রধান পার্থক্যগুলো নিচে দেওয়া হলো:
-
evalমেথডটি যে কোড মূল্যায়ন করা হচ্ছে তার জন্য কোনো আইসোলেটেড ওয়ার্ল্ড ব্যবহার করে না, তাই ইন্সপেক্টেড উইন্ডোর জাভাস্ক্রিপ্ট স্টেট কোডটির কাছে অ্যাক্সেসযোগ্য থাকে। যখন ইন্সপেক্টেড পেজের জাভাস্ক্রিপ্ট স্টেটে অ্যাক্সেসের প্রয়োজন হয়, তখন এই মেথডটি ব্যবহার করুন। - যে কোডটি মূল্যায়ন করা হচ্ছে তার এক্সিকিউশন কনটেক্সটে ডেভেলপার টুলস কনসোল এপিআই অন্তর্ভুক্ত থাকে। উদাহরণস্বরূপ, কোডটি
inspectএবং$0ব্যবহার করতে পারে। - মূল্যায়ন করা কোডটি একটি মান রিটার্ন করতে পারে যা এক্সটেনশন কলব্যাকে পাঠানো হয়। রিটার্ন করা মানটি অবশ্যই একটি বৈধ JSON অবজেক্ট হতে হবে (এতে শুধুমাত্র প্রিমিটিভ জাভাস্ক্রিপ্ট টাইপ এবং অন্যান্য JSON অবজেক্টের অ্যাসাইক্লিক রেফারেন্স থাকতে পারে)। পরিদর্শন করা পৃষ্ঠা থেকে প্রাপ্ত ডেটা প্রসেস করার সময় অতিরিক্ত সতর্কতা অবলম্বন করুন—এক্সিকিউশন কনটেক্সট মূলত পরিদর্শন করা পৃষ্ঠা দ্বারাই নিয়ন্ত্রিত হয়; একটি ক্ষতিকারক পৃষ্ঠা এক্সটেনশনে রিটার্ন করা ডেটাকে প্রভাবিত করতে পারে।
উল্লেখ্য যে, একটি পৃষ্ঠায় একাধিক ভিন্ন জাভাস্ক্রিপ্ট এক্সিকিউশন কনটেক্সট থাকতে পারে। প্রতিটি ফ্রেমের নিজস্ব কনটেক্সট থাকে, এবং এর সাথে সেই ফ্রেমে চলমান কন্টেন্ট স্ক্রিপ্ট থাকা প্রতিটি এক্সটেনশনের জন্য একটি অতিরিক্ত কনটেক্সটও থাকে।
ডিফল্টরূপে, 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);
}
}
);
এই API-টি ব্যবহার করার জন্য, chrome-extension-samples রিপোজিটরি থেকে devtools API উদাহরণগুলো ইনস্টল করুন।
প্রকারভেদ
Resource
পরিদর্শিত পৃষ্ঠার মধ্যে থাকা কোনো রিসোর্স, যেমন একটি ডকুমেন্ট, একটি স্ক্রিপ্ট বা একটি ছবি।
বৈশিষ্ট্য
- ইউআরএল
স্ট্রিং
রিসোর্সটির ইউআরএল।
- বিষয়বস্তু পান
শূন্যতা
রিসোর্সটির বিষয়বস্তু সংগ্রহ করে।
getContentফাংশনটি দেখতে এইরকম:() => {...}- ফেরত
প্রতিশ্রুতি<object>
বিচারাধীনএকটি ফাংশন যা অনুরোধটি সম্পন্ন হলে রিসোর্সের বিষয়বস্তু গ্রহণ করে।
- setContent
শূন্যতা
রিসোর্সটির বিষয়বস্তু নির্ধারণ করে।
setContentফাংশনটি দেখতে এইরকম:(content: string, commit: boolean) => {...}
- বিষয়বস্তু
স্ট্রিং
রিসোর্সের নতুন বিষয়বস্তু। বর্তমানে শুধুমাত্র টেক্সট টাইপের রিসোর্সগুলো সমর্থিত।
- প্রতিশ্রুতিবদ্ধ
বুলিয়ান
যদি ব্যবহারকারী রিসোর্সটির সম্পাদনা শেষ করে থাকেন এবং রিসোর্সটির নতুন বিষয়বস্তু সংরক্ষণ করা প্রয়োজন হয়, তবে এর মান হবে True; আর যদি ব্যবহারকারীর সম্পাদনা চলাকালীন পাঠানো পরিবর্তনটি সামান্য হয়, তবে এর মান হবে False।
- ফেরত
প্রতিশ্রুতি<object>
বিচারাধীনঅনুরোধ সম্পন্ন হলে যে ফাংশনটি কল করা হয়।
বৈশিষ্ট্য
tabId
যে ট্যাবটি পরিদর্শন করা হচ্ছে তার আইডি। এই আইডিটি chrome.tabs.* API-এর সাথে ব্যবহার করা যেতে পারে।
প্রকার
সংখ্যা
পদ্ধতি
eval()
chrome.devtools.inspectedWindow.eval(
expression: string,
options?: object,
): Promise<object>
পরিদর্শন করা পৃষ্ঠার প্রধান ফ্রেমের প্রেক্ষাপটে একটি জাভাস্ক্রিপ্ট এক্সপ্রেশন মূল্যায়ন করে। এক্সপ্রেশনটিকে অবশ্যই একটি JSON-সম্মত অবজেক্টে মূল্যায়ন করতে হবে, অন্যথায় একটি এক্সেপশন থ্রো করা হয়। eval ফাংশনটি হয় একটি DevTools-সাইড এরর অথবা মূল্যায়নের সময় ঘটা একটি জাভাস্ক্রিপ্ট এক্সেপশন রিপোর্ট করতে পারে। উভয় ক্ষেত্রেই, কলব্যাকের result প্যারামিটারটি undefined থাকে। DevTools-সাইড এররের ক্ষেত্রে, isException প্যারামিটারটি non-null হয় এবং এর isError কে true ও code একটি এরর কোডে সেট করা হয়। জাভাস্ক্রিপ্ট এররের ক্ষেত্রে, isException true এবং value থ্রো করা অবজেক্টের স্ট্রিং ভ্যালুতে সেট করা হয়।
প্যারামিটার
- অভিব্যক্তি
স্ট্রিং
মূল্যায়ন করার জন্য একটি রাশি।
- বিকল্পগুলি
বস্তু ঐচ্ছিক
options প্যারামিটারটিতে এক বা একাধিক অপশন থাকতে পারে।
- ফ্রেমইউআরএল
স্ট্রিং ঐচ্ছিক
নির্দিষ্ট করা থাকলে, এক্সপ্রেশনটি সেই আইফ্রেমে মূল্যায়ন করা হয় যার URL নির্দিষ্ট করা URL-এর সাথে মেলে। ডিফল্টরূপে, এক্সপ্রেশনটি পরিদর্শন করা পৃষ্ঠার শীর্ষ ফ্রেমে মূল্যায়ন করা হয়।
- স্ক্রিপ্টএক্সিকিউশনকনটেক্সট
স্ট্রিং ঐচ্ছিক
ক্রোম ১০৭+নির্দিষ্ট অরিজিনের সাথে মেলে এমন একটি এক্সটেনশনের কন্টেন্ট স্ক্রিপ্টের প্রেক্ষাপটে এক্সপ্রেশনটি মূল্যায়ন করুন। যদি এটি দেওয়া হয়, তাহলে scriptExecutionContext, useContentScriptContext-এর 'true' সেটিংটিকে ওভাররাইড করে।
- useContentScriptContext
বুলিয়ান ঐচ্ছিক
কলিং এক্সটেনশনের কন্টেন্ট স্ক্রিপ্টের প্রেক্ষাপটে এক্সপ্রেশনটি মূল্যায়ন করুন, যদি কন্টেন্ট স্ক্রিপ্টটি ইতিমধ্যে পরিদর্শন করা পৃষ্ঠায় ইনজেক্ট করা থাকে। অন্যথায়, এক্সপ্রেশনটি মূল্যায়ন করা হয় না এবং কলব্যাকটি এমন একটি অবজেক্টে এক্সেপশন প্যারামিটার সেট করে আহ্বান করা হয়, যার
isErrorফিল্ডটি true এবংcodeফিল্ডটিE_NOTFOUNDএ সেট করা থাকে।
ফেরত
প্রতিশ্রুতি<object>
বিচারাধীনমূল্যায়ন সম্পন্ন হলে এই ফাংশনটি কল করা হয়।
getResources()
chrome.devtools.inspectedWindow.getResources(): Promise<Resource[]>
পরিদর্শন করা পৃষ্ঠা থেকে রিসোর্সসমূহের তালিকা পুনরুদ্ধার করে।
ফেরত
প্রতিশ্রুতি< সম্পদ []>
বিচারাধীনএকটি ফাংশন যা অনুরোধটি সম্পূর্ণ হলে রিসোর্সগুলোর তালিকা গ্রহণ করে।
reload()
chrome.devtools.inspectedWindow.reload(
reloadOptions?: object,
): void
পরিদর্শন করা পৃষ্ঠাটি পুনরায় লোড করে।
প্যারামিটার
- পুনরায় লোড করার বিকল্প
বস্তু ঐচ্ছিক
- উপেক্ষা করুন
বুলিয়ান ঐচ্ছিক
যখন এটি 'true' হয়, তখন লোডার
loadইভেন্টটি ফায়ার হওয়ার আগে লোড হওয়া সমস্ত ইন্সপেক্টেড পেজ রিসোর্সের জন্য ক্যাশে বাইপাস করবে। এর প্রভাব ইন্সপেক্টেড উইন্ডোতে বা ডেভেলপার টুলস উইন্ডোর মধ্যে Ctrl+Shift+R চাপার অনুরূপ। - ইনজেক্টেডস্ক্রিপ্ট
স্ট্রিং ঐচ্ছিক
নির্দিষ্ট করা থাকলে, স্ক্রিপ্টটি পরিদর্শন করা পৃষ্ঠার প্রতিটি ফ্রেমে লোড হওয়ার সাথে সাথেই, ফ্রেমের অন্য যেকোনো স্ক্রিপ্টের আগে ইনজেক্ট করা হবে। পরবর্তী রিলোডের পর স্ক্রিপ্টটি ইনজেক্ট করা হবে না—উদাহরণস্বরূপ, যদি ব্যবহারকারী Ctrl+R চাপেন।
- ব্যবহারকারী এজেন্ট
স্ট্রিং ঐচ্ছিক
নির্দিষ্ট করা হলে, স্ট্রিংটি পরিদর্শিত পৃষ্ঠার রিসোর্স লোড করার সময় পাঠানো
User-AgentHTTP হেডারের মানকে ওভাররাইড করবে। স্ট্রিংটি পরিদর্শিত পৃষ্ঠার মধ্যে চলমান যেকোনো স্ক্রিপ্টে ফেরত পাঠানোnavigator.userAgentপ্রপার্টির মানকেও ওভাররাইড করবে।
ইভেন্টগুলি
onResourceAdded
chrome.devtools.inspectedWindow.onResourceAdded.addListener(
callback: function,
)
পরিদর্শিত পৃষ্ঠায় কোনো নতুন রিসোর্স যুক্ত করা হলে এটি কার্যকর হয়।
প্যারামিটার
- কলব্যাক
ফাংশন
callbackপ্যারামিটারটি দেখতে এইরকম:(resource: Resource) => void
- সম্পদ
onResourceContentCommitted
chrome.devtools.inspectedWindow.onResourceContentCommitted.addListener(
callback: function,
)
যখন রিসোর্সটির কোনো নতুন সংস্করণ কমিট করা হয় (যেমন, ব্যবহারকারী ডেভেলপার টুলস-এ রিসোর্সটির একটি সম্পাদিত সংস্করণ সংরক্ষণ করেন), তখন এটি কার্যকর হয়।