বর্ণনা
পরিদর্শন করা উইন্ডোটির সাথে ইন্টারঅ্যাক্ট করতে chrome.devtools.inspectedWindow
API ব্যবহার করুন: পরিদর্শন করা পৃষ্ঠার জন্য ট্যাব আইডি প্রাপ্ত করুন, পরিদর্শন করা উইন্ডোর প্রসঙ্গে কোডটি মূল্যায়ন করুন, পৃষ্ঠাটি পুনরায় লোড করুন, বা পৃষ্ঠার মধ্যে সংস্থানগুলির তালিকা পান৷
উদ্ভাসিত
পরিদর্শন করা উইন্ডোটির সাথে ইন্টারঅ্যাক্ট করতে chrome.devtools.inspectedWindow
ব্যবহার করুন: পরিদর্শন করা পৃষ্ঠার জন্য ট্যাব আইডি পান, পরিদর্শন করা উইন্ডোর প্রসঙ্গে কোডটি মূল্যায়ন করুন, পৃষ্ঠাটি পুনরায় লোড করুন বা পৃষ্ঠার মধ্যে সংস্থানগুলির তালিকা পান৷
ডেভেলপার টুল এপিআই ব্যবহার করার জন্য সাধারণ পরিচিতির জন্য DevTools API-এর সারাংশ দেখুন।
ওভারভিউ
tabId
বৈশিষ্ট্য ট্যাব সনাক্তকারী প্রদান করে যা আপনি chrome.tabs.*
API কল। যাইহোক, দয়া করে মনে রাখবেন যে chrome.tabs.*
নিরাপত্তা বিবেচনার কারণে এপিআই ডেভেলপার টুলস এক্সটেনশন পৃষ্ঠাগুলিতে উন্মুক্ত হয় না—আপনাকে ট্যাব আইডিটি ব্যাকগ্রাউন্ড পৃষ্ঠায় পাস করতে হবে এবং সেখান থেকে chrome.tabs.*
API ফাংশনগুলিকে আহ্বান করতে হবে।
পরিদর্শন করা পৃষ্ঠাটি পুনরায় লোড করতে reload
পদ্ধতি ব্যবহার করা যেতে পারে। অতিরিক্তভাবে, কলার ব্যবহারকারী এজেন্ট স্ট্রিং, একটি স্ক্রিপ্ট যা পৃষ্ঠা লোডের আগে ইনজেকশন করা হবে, বা ক্যাশে করা সংস্থানগুলিকে জোর করে পুনরায় লোড করার বিকল্পের জন্য একটি ওভাররাইড নির্দিষ্ট করতে পারে।
পরিদর্শন করা পৃষ্ঠার মধ্যে সম্পদের তালিকা (ডকুমেন্ট, স্টাইলশীট, স্ক্রিপ্ট, ছবি ইত্যাদি) পেতে getResources
কল এবং onResourceContent
ইভেন্ট ব্যবহার করুন। onResourceContentCommitted
ইভেন্ট সহ Resource
ক্লাসের getContent
এবং setContent
পদ্ধতিগুলি রিসোর্স বিষয়বস্তুর পরিবর্তন সমর্থন করার জন্য ব্যবহার করা যেতে পারে, উদাহরণস্বরূপ, একটি বহিরাগত সম্পাদক দ্বারা।
পরিদর্শন উইন্ডোতে এক্সিকিউটিং কোড
eval
পদ্ধতি পরিদর্শন করা পৃষ্ঠার প্রেক্ষাপটে জাভাস্ক্রিপ্ট কোড চালানোর জন্য এক্সটেনশনের ক্ষমতা প্রদান করে। সঠিক প্রসঙ্গে ব্যবহার করা হলে এই পদ্ধতি শক্তিশালী এবং অনুপযুক্তভাবে ব্যবহার করা হলে বিপজ্জনক। tabs.executeScript
পদ্ধতি ব্যবহার করুন যদি না আপনার নির্দিষ্ট কার্যকারিতা প্রয়োজন হয় যা eval
পদ্ধতি প্রদান করে।
এখানে eval
এবং tabs.executeScript
পদ্ধতির মধ্যে প্রধান পার্থক্য রয়েছে:
-
eval
পদ্ধতিটি মূল্যায়ন করা কোডের জন্য একটি বিচ্ছিন্ন বিশ্ব ব্যবহার করে না, তাই পরিদর্শন করা উইন্ডোটির জাভাস্ক্রিপ্ট অবস্থা কোডটিতে অ্যাক্সেসযোগ্য। পরিদর্শন করা পৃষ্ঠার JavaScript অবস্থায় অ্যাক্সেসের প্রয়োজন হলে এই পদ্ধতিটি ব্যবহার করুন। - মূল্যায়ন করা কোডটির এক্সিকিউশন প্রেক্ষাপটে বিকাশকারী টুলস কনসোল API অন্তর্ভুক্ত রয়েছে। উদাহরণস্বরূপ, কোডটি
inspect
এবং$0
ব্যবহার করতে পারে। - মূল্যায়ন করা কোড একটি মান ফেরত দিতে পারে যা এক্সটেনশন কলব্যাকে পাস করা হয়। প্রত্যাবর্তিত মানটি একটি বৈধ JSON অবজেক্ট হতে হবে (এতে শুধুমাত্র আদিম জাভাস্ক্রিপ্ট প্রকার এবং অন্যান্য JSON অবজেক্টের অ্যাসাইক্লিক রেফারেন্স থাকতে পারে)। পরিদর্শন করা পৃষ্ঠা থেকে প্রাপ্ত ডেটা প্রক্রিয়া করার সময় অনুগ্রহ করে অতিরিক্ত সতর্কতা অবলম্বন করুন- সম্পাদনের প্রসঙ্গটি মূলত পরিদর্শন করা পৃষ্ঠা দ্বারা নিয়ন্ত্রিত হয়; একটি দূষিত পৃষ্ঠা এক্সটেনশনে ফিরে আসা ডেটাকে প্রভাবিত করতে পারে।
মনে রাখবেন যে একটি পৃষ্ঠা একাধিক ভিন্ন জাভাস্ক্রিপ্ট এক্সিকিউশন প্রসঙ্গ অন্তর্ভুক্ত করতে পারে। প্রতিটি ফ্রেমের নিজস্ব প্রসঙ্গ রয়েছে, সেই সাথে প্রতিটি এক্সটেনশনের জন্য একটি অতিরিক্ত প্রসঙ্গ রয়েছে যাতে সেই ফ্রেমে চলমান বিষয়বস্তু স্ক্রিপ্ট রয়েছে৷
ডিফল্টরূপে, eval
পদ্ধতি পরিদর্শন করা পৃষ্ঠার প্রধান ফ্রেমের প্রেক্ষাপটে কার্যকর হয়।
eval
পদ্ধতিটি একটি ঐচ্ছিক দ্বিতীয় আর্গুমেন্ট নেয় যা আপনি কোডটি মূল্যায়ন করা প্রসঙ্গে উল্লেখ করতে ব্যবহার করতে পারেন। এই অপশন অবজেক্টে নিম্নলিখিত এক বা একাধিক কী থাকতে পারে:
-
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 repository থেকে devtools API উদাহরণগুলি ইনস্টল করুন৷
প্রকারভেদ
Resource
পরিদর্শন পৃষ্ঠার মধ্যে একটি সংস্থান, যেমন একটি নথি, একটি স্ক্রিপ্ট, বা একটি চিত্র৷
বৈশিষ্ট্য
- url
স্ট্রিং
সম্পদের URL.
- বিষয়বস্তু পান
অকার্যকর
সম্পদের বিষয়বস্তু পায়।
getContent
ফাংশন এর মত দেখাচ্ছে:(callback: function) => {...}
- কলব্যাক
ফাংশন
callback
প্যারামিটারটি এর মতো দেখাচ্ছে:(content: string, encoding: string) => void
- বিষয়বস্তু
স্ট্রিং
সম্পদের বিষয়বস্তু (সম্ভাব্য এনকোড করা)।
- এনকোডিং
স্ট্রিং
বিষয়বস্তু এনকোড করা না থাকলে খালি, অন্যথায় নাম এনকোডিং। বর্তমানে, শুধুমাত্র base64 সমর্থিত।
- সেট সামগ্রী
অকার্যকর
সম্পদের বিষয়বস্তু সেট করে।
setContent
ফাংশনটি এর মত দেখাচ্ছে:(content: string, commit: boolean, callback?: function) => {...}
- বিষয়বস্তু
স্ট্রিং
সম্পদের নতুন বিষয়বস্তু। শুধুমাত্র টেক্সট টাইপ সহ সম্পদ বর্তমানে সমর্থিত।
- কমিট
বুলিয়ান
সত্য যদি ব্যবহারকারী সম্পদ সম্পাদনা শেষ করে, এবং সম্পদের নতুন বিষয়বস্তু বজায় রাখা উচিত; মিথ্যা যদি এটি একটি ক্ষুদ্র পরিবর্তন হয় যা ব্যবহারকারীর রিসোর্স সম্পাদনা করার প্রগতিতে পাঠানো হয়।
- কলব্যাক
ফাংশন ঐচ্ছিক
callback
প্যারামিটারটি এর মতো দেখাচ্ছে:(error?: object) => void
- ত্রুটি
বস্তু ঐচ্ছিক
রিসোর্স বিষয়বস্তু সফলভাবে সেট করা হলে অনির্ধারিত সেট করুন; অন্যথায় ত্রুটি বর্ণনা করে।
বৈশিষ্ট্য
tabId
ট্যাবের আইডি পরীক্ষা করা হচ্ছে। এই আইডিটি chrome.tabs.* API এর সাথে ব্যবহার করা যেতে পারে।
টাইপ
সংখ্যা
পদ্ধতি
eval()
chrome.devtools.inspectedWindow.eval(
expression: string,
options?: object,
callback?: function,
)
পরিদর্শন পৃষ্ঠার প্রধান ফ্রেমের প্রসঙ্গে একটি জাভাস্ক্রিপ্ট অভিব্যক্তি মূল্যায়ন করে। অভিব্যক্তিটি অবশ্যই একটি JSON-সঙ্গী বস্তুর মূল্যায়ন করবে, অন্যথায় একটি ব্যতিক্রম নিক্ষেপ করা হবে। eval ফাংশন একটি DevTools-সাইড ত্রুটি বা একটি JavaScript ব্যতিক্রম যা মূল্যায়নের সময় ঘটে তার প্রতিবেদন করতে পারে। উভয় ক্ষেত্রেই, কলব্যাকের result
প্যারামিটারটি undefined
। একটি DevTools-সাইড ত্রুটির ক্ষেত্রে, isException
প্যারামিটারটি নন-নাল এবং isError
সত্যে সেট করা হয়েছে এবং code
একটি ত্রুটি কোডে সেট করা হয়েছে। জাভাস্ক্রিপ্ট ত্রুটির ক্ষেত্রে, isException
সত্যে সেট করা হয় এবং থ্রোন অবজেক্টের স্ট্রিং ভ্যালুতে value
সেট করা হয়।
পরামিতি
- অভিব্যক্তি
স্ট্রিং
মূল্যায়ন করার জন্য একটি অভিব্যক্তি।
- বিকল্প
বস্তু ঐচ্ছিক
বিকল্প প্যারামিটারে এক বা একাধিক বিকল্প থাকতে পারে।
- frameURL
স্ট্রিং ঐচ্ছিক
নির্দিষ্ট করা থাকলে, অভিব্যক্তিটি আইফ্রেমে মূল্যায়ন করা হয় যার URL নির্দিষ্ট করা একটির সাথে মেলে। ডিফল্টরূপে, অভিব্যক্তিটি পরিদর্শন করা পৃষ্ঠার উপরের ফ্রেমে মূল্যায়ন করা হয়।
- scriptExecutionContext
স্ট্রিং ঐচ্ছিক
Chrome 107+নির্দিষ্ট উত্সের সাথে মেলে এমন একটি এক্সটেনশনের একটি বিষয়বস্তু স্ক্রিপ্টের প্রসঙ্গে অভিব্যক্তিটির মূল্যায়ন করুন৷ দেওয়া হলে, scriptExecutionContext useContentScriptContext-এ 'সত্য' সেটিংকে ওভাররাইড করে।
- ContentScriptContext ব্যবহার করুন
বুলিয়ান ঐচ্ছিক
কলিং এক্সটেনশনের বিষয়বস্তু স্ক্রিপ্টের প্রেক্ষাপটে অভিব্যক্তিটির মূল্যায়ন করুন, শর্ত থাকে যে বিষয়বস্তু স্ক্রিপ্টটি ইতিমধ্যে পরিদর্শন করা পৃষ্ঠায় প্রবেশ করানো হয়েছে৷ যদি তা না হয়, অভিব্যক্তিটি মূল্যায়ন করা হয় না এবং কলব্যাকটি ব্যতিক্রম প্যারামিটারের সাথে একটি বস্তুতে সেট করা হয় যাতে
isError
ক্ষেত্রটি সত্য এবংcode
ক্ষেত্রটিE_NOTFOUND
তে সেট করা থাকে।
- কলব্যাক
ফাংশন ঐচ্ছিক
callback
প্যারামিটারটি এর মতো দেখাচ্ছে:(result: object, exceptionInfo: object) => void
- ফলাফল
বস্তু
মূল্যায়নের ফলাফল।
- ব্যতিক্রম তথ্য
বস্তু
অভিব্যক্তি মূল্যায়ন করার সময় ব্যতিক্রম ঘটলে বিশদ প্রদানকারী একটি বস্তু।
- কোড
স্ট্রিং
অভিব্যক্তি মূল্যায়ন করার আগে DevTools পাশে ত্রুটি ঘটেছে কিনা তা সেট করুন।
- বর্ণনা
স্ট্রিং
অভিব্যক্তি মূল্যায়ন করার আগে DevTools পাশে ত্রুটি ঘটেছে কিনা তা সেট করুন।
- বিস্তারিত
যেকোনো []
অভিব্যক্তি মূল্যায়ন করার আগে DevTools সাইডে ত্রুটি ঘটেছে কিনা তা সেট করুন, ত্রুটির কারণ সম্পর্কে আরও তথ্য প্রদানের জন্য বর্ণনা স্ট্রিং-এ প্রতিস্থাপিত হতে পারে এমন মানগুলির অ্যারে রয়েছে৷
- ত্রুটি
বুলিয়ান
অভিব্যক্তি মূল্যায়ন করার আগে DevTools পাশে ত্রুটি ঘটেছে কিনা তা সেট করুন।
- ব্যতিক্রম
বুলিয়ান
সেট করুন যদি মূল্যায়ন করা কোড একটি আন-হ্যান্ডেলড ব্যতিক্রম তৈরি করে।
- মান
স্ট্রিং
সেট করুন যদি মূল্যায়ন করা কোড একটি আন-হ্যান্ডেলড ব্যতিক্রম তৈরি করে।
getResources()
chrome.devtools.inspectedWindow.getResources(
callback: function,
)
পরিদর্শন করা পৃষ্ঠা থেকে সম্পদের তালিকা পুনরুদ্ধার করে।
পরামিতি
reload()
chrome.devtools.inspectedWindow.reload(
reloadOptions?: object,
)
পরিদর্শন করা পৃষ্ঠাটি পুনরায় লোড করে।
পরামিতি
- রিলোড অপশন
বস্তু ঐচ্ছিক
- ক্যাশে উপেক্ষা করুন
বুলিয়ান ঐচ্ছিক
সত্য হলে, লোডার
load
ইভেন্ট ফায়ার করার আগে লোড করা সমস্ত পরিদর্শন করা পৃষ্ঠার সংস্থানগুলির জন্য ক্যাশে বাইপাস করবে। প্রভাবটি পরিদর্শন করা উইন্ডোতে বা বিকাশকারী সরঞ্জাম উইন্ডোতে Ctrl+Shift+R চাপার মতো। - ইনজেক্টেড স্ক্রিপ্ট
স্ট্রিং ঐচ্ছিক
যদি নির্দিষ্ট করা থাকে, স্ক্রিপ্টটি ফ্রেমের যেকোনো স্ক্রিপ্টের আগে লোড হওয়ার সাথে সাথে পরিদর্শন করা পৃষ্ঠার প্রতিটি ফ্রেমে ইনজেকশন করা হবে। পরবর্তী রিলোডের পরে স্ক্রিপ্টটি ইনজেকশন করা হবে না—উদাহরণস্বরূপ, যদি ব্যবহারকারী Ctrl+R চাপেন।
- ব্যবহারকারী এজেন্ট
স্ট্রিং ঐচ্ছিক
নির্দিষ্ট করা থাকলে, স্ট্রিংটি
User-Agent
HTTP হেডারের মানকে ওভাররাইড করবে যা পরিদর্শন করা পৃষ্ঠার সংস্থানগুলি লোড করার সময় পাঠানো হয়। স্ট্রিংটিnavigator.userAgent
প্রপার্টির মানকেও ওভাররাইড করবে যা পরিদর্শন করা পৃষ্ঠার মধ্যে চলমান যেকোনো স্ক্রিপ্টে ফিরে আসে।
ঘটনা
onResourceAdded
chrome.devtools.inspectedWindow.onResourceAdded.addListener(
callback: function,
)
পরিদর্শন পৃষ্ঠায় একটি নতুন সংস্থান যোগ করা হলে বহিস্কার করা হয়।
পরামিতি
- কলব্যাক
ফাংশন
callback
প্যারামিটারটি এর মতো দেখাচ্ছে:(resource: Resource) => void
- সম্পদ
onResourceContentCommitted
chrome.devtools.inspectedWindow.onResourceContentCommitted.addListener(
callback: function,
)
রিসোর্সের একটি নতুন রিভিশন কমিটেড হলে বরখাস্ত করা হয় (যেমন ব্যবহারকারী ডেভেলপার টুলে রিসোর্সের একটি সম্পাদিত সংস্করণ সংরক্ষণ করে)।