বর্ণনা
বিকাশকারী সরঞ্জাম উইন্ডো UI-তে আপনার এক্সটেনশনকে একীভূত করতে chrome.devtools.panels
API ব্যবহার করুন: আপনার নিজস্ব প্যানেল তৈরি করুন, বিদ্যমান প্যানেলগুলি অ্যাক্সেস করুন এবং সাইডবার যোগ করুন৷
প্রতিটি এক্সটেনশন প্যানেল এবং সাইডবার একটি পৃথক HTML পৃষ্ঠা হিসাবে প্রদর্শিত হয়। বিকাশকারী সরঞ্জাম উইন্ডোতে প্র��র্শিত সমস্ত এক্সটেনশন পৃষ্ঠাগুলির chrome.devtools
API-এর সমস্ত মডিউলের পাশাপাশি chrome.extension API-তে অ্যাক্সেস রয়েছে৷ অন্যান্য এক্সটেনশন APIগুলি বিকাশকারী সরঞ্জাম উইন্ডোর পৃষ্ঠাগুলিতে উপলব্ধ নয়, তবে আপনি আপনার এক্সটেনশনের পটভূমি পৃষ্ঠায় একটি অনুরোধ পাঠিয়ে তাদের আহ্বান করতে পারেন, একইভাবে বিষয়বস্তু স্ক্রিপ্টগুলিতে এটি কীভাবে করা হয়।
আপনি একটি কলব্যাক ফাংশন ইনস্টল করতে devtools.panels.setOpenResourceHandler
পদ্ধতি ব্যবহার করতে পারেন যা একটি সংস্থান খোলার জন্য ব্যবহারকারীর অনুরোধগুলি পরিচালনা করে (সাধারণত, বিকাশকারী সরঞ্জাম উইন্ডোতে একটি রিসোর্স লিঙ্কে ক্লিক করুন)। ইনস্টল করা হ্যান্ডলারগুলির মধ্যে সর্বাধিক একজনকে ডাকা হয়; ব্যবহারকারীরা নির্দিষ্ট করতে পারেন (ডেভেলপার টুলস সেটিংস ডায়ালগ ব্যবহার করে) হয় ডিফল্ট আচরণ বা রিসোর্স খোলার অনুরোধগুলি পরিচালনা করার জন্য একটি এক্সটেনশন। যদি একটি এক্সটেনশন সেট setOpenResourceHandler()
একাধিকবার কল করে, শুধুমাত্র শেষ হ্যান্ডলারটি রাখা হয়।
ডেভেলপার টুল এপিআই ব্যবহার করার জন্য সাধারণ পরিচিতির জন্য DevTools API-এর সারাংশ দেখুন।
উদ্ভাসিত
উদাহরণ
নিম্নলিখিত কোডটি Panel.html
এ থাকা একটি প্যানেল যুক্ত করে, যা ডেভেলপার টুলস টুলবারে FontPicker.png
দ্বারা প্রতিনিধিত্ব করে এবং ফন্ট পিকার হিসাবে লেবেলযুক্ত:
chrome.devtools.panels.create("Font Picker",
"FontPicker.png",
"Panel.html",
function(panel) { ... });
নিম্নলিখিত কোডটি Sidebar.html
এ থাকা একটি সাইডবার প্যান যুক্ত করে এবং এলিমেন্টস ��্যানেলে ফন্ট প্রপার্টিজ শিরোনাম করে, তারপরে এর উচ্চতা 8ex
এ সেট করে:
chrome.devtools.panels.elements.createSidebarPane("Font Properties",
function(sidebar) {
sidebar.setPage("Sidebar.html");
sidebar.setHeight("8ex");
}
);
স্ক্রিনশটটি ব্যাখ্যা করে যে এই উদাহরণটি বিকাশকারী সরঞ্জাম উইন্ডোতে কী প্রভাব ফেলবে:
এই APIটি চেষ্টা করতে, chrome-extension-samples repository থেকে devtools প্যানেল API উদাহরণ ইনস্টল করুন।
প্রকারভেদ
Button
এক্সটেনশন দ্বারা তৈরি একটি বোতাম।
বৈশিষ্ট্য
- onClicked
ইভেন্ট<functionvoidvoid>
বোতামে ক্লিক করলে ফায়ার করা হয়।
onClicked.addListener
ফাংশনটি এরকম দেখাচ্ছে:(callback: function) => {...}
- কলব্যাক
ফাংশন
callback
প্যারামিটারটি এর মত দেখাচ্ছে:() => void
- হালনাগাদ
অকার্যকর
বোতামের বৈশিষ্ট্য আপডেট করে। যদি কিছু আর্গুমেন্ট বাদ দেওয়া হয় বা
null
, তাহলে সংশ্লিষ্ট গুণাবলী আপডেট করা হয় না।update
ফাংশনটি এরকম দেখাচ্ছে:(iconPath?: string, tooltipText?: string, disabled?: boolean) => {...}
- iconPath
স্ট্রিং ঐচ্ছিক
বোতামের নতুন আইকনের পথ।
- টুলটিপ পাঠ্য
স্ট্রিং ঐচ্ছিক
ব্যবহারকারী যখন বোতামের উপর মাউস ঘোরায় তখন টেক্সট টুলটিপ হিসেবে দেখানো হয়।
- অক্ষম
বুলিয়ান ঐচ্ছিক
বোতামটি নিষ্ক্রিয় কিনা।
ElementsPanel
উপাদান প্যানেল প্রতিনিধিত্ব করে।
বৈশিষ্ট্য
- onSelectionChanged
ইভেন্ট<functionvoidvoid>
প্যানেলে একটি বস্তু নির্বাচন করা হলে বহিস্কার করা হয়।
onSelectionChanged.addListener
ফাংশনটি এরকম দেখাচ্ছে:(callback: function) => {...}
- কলব্যাক
ফাংশন
callback
প্যারামিটারটি এর মত দেখাচ্ছে:() => void
- সাইডবারপ্যান তৈরি করুন
অকার্যকর
প্যানেলের সাইডবারের মধ্যে একটি ফলক তৈরি করে।
createSidebarPane
ফাংশনটি এর মত দেখাচ্ছে:(title: string, callback?: function) => {...}
- শিরোনাম
স্ট্রিং
সাইডবার ক্যাপশনে প্রদর্শিত পাঠ্য।
- কলব্যাক
ফাংশন ঐচ্ছিক
callback
প্যারামিটারটি এর মত দেখাচ্ছে:(result: ExtensionSidebarPane) => void
- ফলাফল
তৈরি সাইডবার ফলকের জন্য একটি এক্সটেনশন সাইডবারপ্যান অবজেক্ট।
ExtensionPanel
এক্সটেনশন দ্বারা তৈরি একটি প্যানেল প্রতিনিধিত্ব করে।
বৈশিষ্ট্য
- উপর লুকানো
ইভেন্ট<functionvoidvoid>
যখন ব্যবহারকারী প্যানেল থেকে দূরে চলে যায় তখন বরখাস্ত হয়।
onHidden.addListener
ফাংশনটি এরকম দেখাচ্ছে:(callback: function) => {...}
- কলব্যাক
ফাংশন
callback
প্যারামিটারটি এর মত দেখাচ্ছে:() => void
- অন অনুসন্ধান
ইভেন্ট<functionvoidvoid>
একটি অনুসন্ধান কর্মের উপর গুলি করা হয়েছে (একটি নতুন অনুসন্ধানের শুরু, অনুসন্ধান ফলাফল নেভিগেশন, বা অনুসন্ধান বাতিল করা হচ্ছে)।
onSearch.addListener
ফাংশনটি এরকম দেখাচ্ছে:(callback: function) => {...}
- কলব্যাক
ফাংশন
callback
প্যারামিটারটি এর মত দেখাচ্ছে:(action: string, queryString?: string) => void
- কর্ম
স্ট্রিং
- queryString
স্ট্রিং ঐচ্ছিক
- দেখানো হয়েছে
ইভেন্ট<functionvoidvoid>
ব্যবহারকারী প্যানেলে স্যুইচ করলে বরখাস্ত হয়।
onShown.addListener
ফাংশনটি এরকম দেখাচ্ছে:(callback: function) => {...}
- কলব্যাক
ফাংশন
callback
প্যারামিটারটি এর মত দেখাচ্ছে:(window: Window) => void
- জানলা
জানলা
- StatusBarButton তৈরি করুন
অকার্যকর
প্যানেলের স্ট্যাটাস বারে একটি বোতাম যুক্ত করে।
createStatusBarButton
ফাংশনটি এরকম দেখাচ্ছে:(iconPath: string, tooltipText: string, disabled: boolean) => {...}
- iconPath
স্ট্রিং
বোতামের আইকনের পথ। ফাইলটিতে দুটি 32x24 আইকন দ্বারা গঠিত একটি 64x24-পিক্সেল চিত্র থাকা উচিত। বাম ��ইকন ব্যবহার করা হয় যখন বোতাম নিষ্ক্রিয় হয়; বোতাম টিপলে ডান আইকনটি প্রদর্শিত হয়।
- টুলটিপ পাঠ্য
স্ট্রিং
ব্যবহারকারী যখন বোতামের উপর মাউস ঘোরায় তখন টেক্সট টুলটিপ হিসেবে দেখানো হয়।
- অক্ষম
বুলিয়ান
বোতামটি নিষ্ক্রিয় কিনা।
- রিটার্ন
ExtensionSidebarPane
এক্সটেনশন দ্বারা তৈরি একটি সাইডবার।
বৈশিষ্ট্য
- উপর লুকানো
ইভেন্ট<functionvoidvoid>
ব্যবহারকারী সাইডবার প্যানেল হোস্ট করে এমন প্যানেল থেকে দূরে সরে যাওয়ার ফলে সাইডবার প্যানটি লুকিয়ে গেলে বরখাস্ত হয়৷
onHidden.addListener
ফাংশনটি এরকম দেখাচ্ছে:(callback: function) => {...}
- কলব্যাক
ফাংশন
callback
প্যারামিটারটি এর মত দেখাচ্ছে:() => void
- দেখানো হয়েছে
ইভেন্ট<functionvoidvoid>
ব্যবহারকারী যখন এটি হোস্ট করে এমন প্যানেলে স্যুইচ করার ফলে সাইডবার প্যানটি দৃশ্যমান হয়ে উঠলে বহিস্কার হয়৷
onShown.addListener
ফাংশনটি এরকম দেখাচ্ছে:(callback: function) => {...}
- কলব্যাক
ফাংশন
callback
প্যারামিটারটি এর মত দেখাচ্ছে:(window: Window) => void
- জানলা
জানলা
- সেট এক্সপ্রেশন
অকার্যকর
একটি অভিব্যক্তি সেট করে যা পরিদর্শন পৃষ্ঠার মধ্যে মূল্যায়ন করা হয়। ফলাফল সাইডবার ফলকে প্রদর্শিত হয়.
setExpression
ফাংশনটি এরকম দেখাচ্ছে:(expression: string, rootTitle?: string, callback?: function) => {...}
- অভিব্যক্তি
স্ট্রিং
পরিদর্শন করা পৃষ্ঠার প্রসঙ্গে মূল্যায়ন করা একটি অভিব্যক্তি। জাভাস্ক্রিপ্ট অবজেক্ট এবং DOM নোডগুলি কনসোল/ওয়াচের মতো একটি প্রসারণযোগ্য ট্রিতে প্রদর্শিত হয়।
- rootTitle
স্ট্রিং ঐচ্ছিক
অভিব্যক্তি গাছের মূলের জন্য একটি ঐচ্ছিক শিরোনাম।
- কলব্যাক
ফাংশন ঐচ্ছিক
callback
প্যারামিটারটি এর মত দেখাচ্ছে:() => void
- সেট উচ্চতা
অকার্যকর
সাইডবারের উচ্চতা সেট করে।
setHeight
ফাংশনটি এরকম দেখাচ্ছে:(height: string) => {...}
- উচ্চতা
স্ট্রিং
একটি CSS-এর মতো আকারের স্পেসিফিকেশন, যেমন
'100px'
বা'12ex'
।
- সেট অবজেক্ট
অকার্যকর
সাইডবার প্যানে প্রদর্শিত হওয়ার জন্য একটি JSON-সম্মত বস্তু সেট করে।
setObject
ফাংশনটি এরকম দেখাচ্ছে:(jsonObject: string, rootTitle?: string, callback?: function) => {...}
- jsonObject
স্ট্রিং
পরিদর্শন করা পৃষ্ঠার প্রেক্ষাপটে একটি বস্তু প্রদর্শিত হবে। কলকারীর (API ক্লায়েন্ট) প্রসঙ্গে মূল্যায়ন করা হয়েছে।
- rootTitle
স্ট্রিং ঐচ্ছিক
অভিব্যক্তি গাছের মূলের জন্য একটি ঐচ্ছিক শিরোনাম।
- কলব্যাক
ফাংশন ঐচ্ছিক
callback
প্যারামিটারটি এরকম দেখাচ্ছে:() => void
- সেটপেজ
অকার্যকর
সাইডবার প্যানে প্রদর্শিত হওয়ার জন্য একটি HTML পৃষ্ঠা সেট করে।
setPage
ফাংশনটি এরকম দেখাচ্ছে:(path: string) => {...}
- পথ
স্ট্রিং
সাইডবারের মধ্যে প্রদর্শনের জন্য একটি এক্সটেনশন পৃষ্ঠার আপেক্ষিক পথ।
SourcesPanel
উৎস প্যানেল প্রতিনিধিত্ব করে।
বৈশিষ্ট্য
- onSelectionChanged
ইভেন্ট<functionvoidvoid>
প্যানেলে একটি বস্তু নির্বাচন করা হলে বহিস্কার করা হয়।
onSelectionChanged.addListener
ফাংশনটি এরকম দেখাচ্ছে:(callback: function) => {...}
- কলব্যাক
ফাংশন
callback
প্যারামিটারটি এর মত দেখাচ্ছে:() => void
- সাইডবারপ্যান তৈরি করুন
অকার্যকর
প্যানেলের সাইডবারের মধ্যে একটি ফলক তৈরি করে।
createSidebarPane
ফাংশনটি এর মত দেখাচ্ছে:(title: string, callback?: function) => {...}
- শিরোনাম
স্ট্রিং
সাইডবার ক্যাপশনে প্রদর্শিত পাঠ্য।
- কলব্যাক
ফাংশন ঐচ্ছিক
callback
প্যারামিটারটি এর মত দেখাচ্ছে:(result: ExtensionSidebarPane) => void
- ফলাফল
তৈরি সাইডবার ফলকের জন্য একটি এক্সটেনশন সাইডবারপ্যান অবজেক্ট।
বৈশিষ্ট্য
elements
উপাদান প্যানেল।
টাইপ
sources
উত্স প্যানেল.
টাইপ
themeName
ব্যবহারকারীর DevTools সেটিংসে সেট করা রঙের থিমের নাম। সম্ভাব্য মান: default
(ডিফল্ট) এবং dark
।
টাইপ
স্ট্রিং
পদ্ধতি
create()
chrome.devtools.panels.create(
title: string,
iconPath: string,
pagePath: string,
callback?: function,
)
একটি এক্সটেনশন প্যানেল তৈরি করে।
পরামিতি
- শিরোনাম
স্ট্রিং
ডেভেলপার টুলস টুলবারে এক্সটেনশন আইকনের পাশে প্রদর্শিত শিরোনাম।
- iconPath
স্ট্রিং
এক্সটেনশন ডিরেক্টরির সাপেক্ষে প্যানেলের আইকনের পাথ।
- পৃষ্ঠাপথ
স্ট্রিং
এক্সটেনশন ডিরেক্টরির সাথে সম্পর্কিত প্যানেলের HTML পৃষ্ঠার পাথ।
- কলব্যাক
ফাংশন ঐচ্ছিক
callback
প্যারামিটারটি এরকম দেখাচ্ছে:(panel: ExtensionPanel) => void
- প্যানেল
একটি এক্সটেনশনপ্যানেল বস্তু তৈরি করা প্যানেলের প্রতিনিধিত্ব করে।
openResource()
chrome.devtools.panels.openResource(
url: string,
lineNumber: number,
columnNumber?: number,
callback?: function,
)
একটি ডেভেলপার টুল প্যানেলে একটি URL খুলতে DevTools-কে অনুরোধ করে।
পরামিতি
- url
স্ট্রিং
রিসোর্সের URL খুলতে হবে।
- লাইন সংখ্যা
সংখ্যা
রিসোর্স লোড করার সময় স্ক্রোল করার জন্য লাইন নম্বর নির্দিষ্ট করে।
- কলাম সংখ্যা
সংখ্যা ঐচ্ছিক
Chrome 114+সম্পদ লোড করার সময় স্ক্রোল করার জন্য কলাম নম্বর নির্দিষ্ট করে।
- কলব্যাক
ফাংশন ঐচ্ছিক
callback
প্যারামিটারটি এর মত দেখাচ্ছে:() => void
setOpenResourceHandler()
chrome.devtools.panels.setOpenResourceHandler(
callback?: function,
)
ব্যবহারকারী যখন ডেভেলপার টুলস উইন্ডোতে একটি রিসোর্স লিঙ্কে ক্লিক করে তখন কল করার জন্য ফাংশনটি নির্দিষ্ট করে। হ্যান্ডলারটি আনসেট করতে, হয় কোন প্যারামিটার ছাড়াই পদ্ধতিটিকে কল করুন বা প্যারামিটার হিসাবে নাল পাস করুন।
পরামিতি
- কলব্যাক
ফাংশন ঐচ্ছিক
callback
প্যারামিটারটি এর মত দেখাচ্ছে:(resource: Resource) => void
- সম্পদ
ক্লিক করা সম্পদের জন্য একটি
devtools.inspectedWindow.Resource
অবজেক্ট।