chrome.devtools.panels

বিবরণ

ডেভেলপার টুল উইন্ডো UI-তে আপনার এক্সটেনশন ইন্টিগ্রেট করতে chrome.devtools.panels API ব্যবহার করুন: আপনার নিজস্ব প্যানেল তৈরি করুন, আগে থেকে থাকা প্যানেল অ্যাক্সেস করুন এবং সাইডবার যোগ করুন।

প্রতিটি এক্সটেনশন প্যানেল এবং সাইডবার একটি আলাদা HTML পৃষ্ঠা হিসাবে দেখানো হয়। ডেভেলপার টুল উইন্ডোতে দেখানো সব এক্সটেনশন পৃষ্ঠার কাছে chrome.devtools API-এর সব অংশের পাশাপাশি অন্যান্য সব এক্সটেনশন API-এর অ্যাক্সেস থাকে।

আপনি devtools.panels.setOpenResourceHandler পদ্ধতি ব্যবহার করে কলব্যাক ফাংশন ইনস্টল করতে পারবেন যা রিসোর্স খোলার জন্য ব্যবহারকারীর অনুরোধ ম্যানেজ করে (সাধারণত, ডেভেলপার টুল উইন্ডোতে রিসোর্স লিঙ্কে ক্লিক করা)। ইনস্টল করা হ্যান্ডলারের মধ্যে সর্বাধিক একটিকে কল করা হয়; ব্যবহারকারীরা (ডেভেলপার টুল সেটিংস ডায়ালগ ব্যবহার করে) রিসোর্স খোলার অনুরোধ হ্যান্ডেল করার জন্য ডিফল্ট আচরণ বা এক্সটেনশন নির্দিষ্ট করতে পারেন। কোনও এক্সটেনশন একাধিকবার setOpenResourceHandler() কল করলে, শুধুমাত্র শেষ হ্যান্ডলারটি রেখে দেওয়া হয়।

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

ম্যানিফেস্ট

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

"devtools_page"

উদাহরণ

নিম্নলিখিত কোডটি Panel.html-এ থাকা একটি প্যানেল যোগ করে, যা ডেভেলপার টুলস টুলবারে FontPicker.png দ্বারা উপস্থাপিত হয় এবং Font Picker হিসেবে লেবেল করা হয়:

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

এই উদাহরণটি ডেভেলপার টুল উইন্ডোতে কী প্রভাব ফেলবে তা স্ক্রিনশটটি ব্যাখ্যা করে:

DevTools টুলবারে এক্সটেনশন আইকন প্যানেল
DevTools টুলবারে এক্সটেনশন আইকন প্যানেল।

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

ধরন

Button

এক্সটেনশনের মাধ্যমে তৈরি করা বোতাম।

প্রপার্টি

  • onClicked

    Event<functionvoidvoid>

    বোতামে ক্লিক করা হলে ফায়ার করা হয়।

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

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

    • কলব্যাক

      ফাংশন

      callback প্যারামিটারটি দেখতে এইরকম: 

      () => void

  • আপডেট করুন

    বাতিল

    বোতামের অ্যাট্রিবিউট আপডেট করে। কিছু আর্গুমেন্ট বাদ দেওয়া হলে বা null হলে, সংশ্লিষ্ট অ্যাট্রিবিউট আপডেট করা হয় না।

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

    (iconPath?: string, tooltipText?: string, disabled?: boolean) => {...}

    • iconPath

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

      বোতামের নতুন আইকনের পাথ।

    • tooltipText

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

      ব্যবহারকারী বোতামের উপর মাউস নিয়ে গেলে টুলটিপ হিসেবে দেখানো টেক্সট।

    • অক্ষম

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

      বোতামটি বন্ধ করা আছে কিনা।

ElementsPanel

এলিমেন্ট প্যানেলকে দেখায়।

প্রপার্টি

  • onSelectionChanged

    Event<functionvoidvoid>

    প্যানেলে কোনও অবজেক্ট বেছে নেওয়া হলে ফায়ার করা হয়।

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

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

    • কলব্যাক

      ফাংশন

      callback প্যারামিটারটি দেখতে এইরকম: 

      () => void

  • createSidebarPane

    বাতিল

    প্যানেলের সাইডবারের মধ্যে একটি প্যান তৈরি করে।

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

    (title: string) => {...}

    • শীর্ষক

      স্ট্রিং

      সাইডবার ক্যাপশনে দেখানো টেক্সট।

    • ফেরত দেওয়া

      Promise<ExtensionSidebarPane>

      Chrome 152+

      সাইডবার তৈরি করার সময় কলব্যাক ইনভোক করা হয়।

ExtensionPanel

এক্সটেনশনের মাধ্যমে তৈরি করা প্যানেলকে দেখায়।

প্রপার্টি

  • onHidden

    Event<functionvoidvoid>

    ব্যবহারকারী প্যানেল থেকে অন্য কোথাও চলে গেলে ফায়ার করা হয়।

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

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

    • কলব্যাক

      ফাংশন

      callback প্যারামিটারটি দেখতে এইরকম: 

      () => void

  • onSearch

    Event<functionvoidvoid>

    সার্চ অ্যাকশনের (নতুন সার্চ শুরু করা, সার্চ ফলাফল নেভিগেশন বা সার্চ বাতিল করা) উপর ফায়ার করা হয়েছে।

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

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

    • কলব্যাক

      ফাংশন

      callback প্যারামিটারটি দেখতে এইরকম: 

      (action: string, queryString?: string) => void

      • অ্যাকশন

        স্ট্রিং

      • queryString

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

  • onShown

    Event<functionvoidvoid>

    ব্যবহারকারী প্যানেলে সুইচ করলে ফায়ার করা হয়।

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

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

    • কলব্যাক

      ফাংশন

      callback প্যারামিটারটি দেখতে এইরকম: 

      (window: Window) => void

      • জানলা

        উইন্ডো

  • createStatusBarButton

    বাতিল

    প্যানেলের স্ট্যাটাস বারে একটি বোতাম যোগ করে।

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

    (iconPath: string, tooltipText: string, disabled: boolean) => {...}

    • iconPath

      স্ট্রিং

      বোতামের আইকনের পাথ। ফাইলে ৬৪x২৪-পিক্সেলের ছবি থাকতে হবে যা দুটি ৩২x২৪ আইকন দিয়ে তৈরি। বাঁদিকের আইকনটি বোতামটি নিষ্ক্রিয় থাকাকালীন ব্যবহার করা হয়; বোতামটি প্রেস করা হলে ডানদিকের আইকনটি দেখানো হয়।

    • tooltipText

      স্ট্রিং

      ব্যবহারকারী বোতামের উপর মাউস নিয়ে গেলে টুলটিপ হিসেবে দেখানো টেক্সট।

    • অক্ষম

      বুলিয়ান

      বোতামটি বন্ধ করা আছে কিনা।

  • দেখান

    বাতিল

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

    সংশ্লিষ্ট ট্যাব অ্যাক্টিভেট করে প্যানেল দেখায়।

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

    () => {...}

ExtensionSidebarPane

এক্সটেনশনের মাধ্যমে তৈরি করা সাইডবার।

প্রপার্টি

  • onHidden

    Event<functionvoidvoid>

    ব্যবহারকারী সাইডবার প্যানেল হোস্ট করে এমন প্যানেল থেকে দূরে সরে যাওয়ার ফলে সাইডবার প্যানেল লুকানো হলে ফায়ার করা হয়।

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

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

    • কলব্যাক

      ফাংশন

      callback প্যারামিটারটি দেখতে এইরকম: 

      () => void

  • onShown

    Event<functionvoidvoid>

    ব্যবহারকারী সাইডবার প্যানেল হোস্ট করে এমন প্যানেলে স্যুইচ করার ফলে সাইডবার প্যানটি দৃশ্যমান হলে ফায়ার করা হয়।

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

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

    • কলব্যাক

      ফাংশন

      callback প্যারামিটারটি দেখতে এইরকম: 

      (window: Window) => void

      • জানলা

        উইন্ডো

  • setExpression

    বাতিল

    এমন একটি এক্সপ্রেশন সেট করে যা পরীক্ষা করা পৃষ্ঠার মধ্যে মূল্যায়ন করা হয়। ফলাফল সাইডবার প্যানে দেখানো হয়।

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

    (expression: string, rootTitle?: string) => {...}

    • এক্সপ্রেশন

      স্ট্রিং

      পরীক্ষা করা পৃষ্ঠার প্রসঙ্গে মূল্যায়ন করার জন্য একটি এক্সপ্রেশন। JavaScript অবজেক্ট ও DOM নোড কনসোল/ওয়াচের মতো বড় করা যায় এমন ট্রি হিসেবে দেখানো হয়।

    • rootTitle

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

      এক্সপ্রেশন ট্রির রুটের জন্য একটি ঐচ্ছিক শীর্ষক।

    • ফেরত দেওয়া

      <void> প্রমিস

      Chrome 152+

      এক্সপ্রেশন মূল্যায়ন ফলাফলের সাথে সাইডবার প্যানেল আপডেট করার পরে একটি কলব্যাক চালু করা হয়।

  • setHeight

    বাতিল

    সাইডবারের উচ্চতা সেট করে।

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

    (height: string) => {...}

    • উচ্চতা

      স্ট্রিং

      CSS-এর মতো সাইজ স্পেসিফিকেশন, যেমন '100px' বা '12ex'।

  • setObject

    বাতিল

    সাইডবার প্যানে দেখানোর জন্য JSON-কমপ্লায়েন্ট অবজেক্ট সেট করে।

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

    (jsonObject: string, rootTitle?: string) => {...}

    • jsonObject

      স্ট্রিং

      পরীক্ষা করা পৃষ্ঠার প্রসঙ্গে দেখানোর জন্য একটি অবজেক্ট। কলারের (API ক্লায়েন্ট) প্রসঙ্গে মূল্যায়ন করা হয়েছে।

    • rootTitle

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

      এক্সপ্রেশন ট্রির রুটের জন্য একটি ঐচ্ছিক শীর্ষক।

    • ফেরত দেওয়া

      <void> প্রমিস

      Chrome 152+

      অবজেক্টের সাথে সাইডবার আপডেট করার পরে একটি কলব্যাক চালু করা হয়।

  • setPage

    বাতিল

    সাইডবার প্যানে দেখানোর জন্য HTML পৃষ্ঠা সেট করে।

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

    (path: string) => {...}

    • পথ

      স্ট্রিং

      সাইডবারের মধ্যে দেখানোর জন্য এক্সটেনশন পৃষ্ঠার রিলেটিভ পাথ।

SourcesPanel

সোর্স প্যানেল দেখায়।

প্রপার্টি

  • onSelectionChanged

    Event<functionvoidvoid>

    প্যানেলে কোনও অবজেক্ট বেছে নেওয়া হলে ফায়ার করা হয়।

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

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

    • কলব্যাক

      ফাংশন

      callback প্যারামিটারটি দেখতে এইরকম: 

      () => void

  • createSidebarPane

    বাতিল

    প্যানেলের সাইডবারের মধ্যে একটি প্যান তৈরি করে।

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

    (title: string) => {...}

    • শীর্ষক

      স্ট্রিং

      সাইডবার ক্যাপশনে দেখানো টেক্সট।

    • ফেরত দেওয়া

      Promise<ExtensionSidebarPane>

      Chrome 152+

      সাইডবার তৈরি করার সময় কলব্যাক ইনভোক করা হয়।

Theme

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

DevTools-এর মাধ্যমে ব্যবহার করা থিম।

Enum

"ডিফল্ট"
ডিফল্ট DevTools থিম। এটি সবসময় লাইট থিম।

"ডার্ক"
ডার্ক থিম।

প্রপার্টি

elements

এলিমেন্ট প্যানেল।

ধরন

ElementsPanel

sources

সোর্স প্যানেল।

ধরন

SourcesPanel

themeName

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

ব্যবহারকারীর DevTools সেটিংসে সেট করা রঙের থিমের নাম। সম্ভাব্য ভ্যালু: default (ডিফল্ট) এবং dark।

ধরন

স্ট্রিং

পদ্ধতি

create()

browser.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
): Promise<ExtensionPanel>

এক্সটেনশন প্যানেল তৈরি করে।

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

  • শীর্ষক

    স্ট্রিং

    ডেভেলপার টুল টুলবারে এক্সটেনশন আইকনের পাশে দেখানো শীর্ষক।

  • iconPath

    স্ট্রিং

    এক্সটেনশন ডিরেক্টরির সাথে সম্পর্কিত প্যানেলের আইকনের পাথ।

  • pagePath

    স্ট্রিং

    এক্সটেনশন ডিরেক্টরির সাথে সম্পর্কিত প্যানেলের HTML পৃষ্ঠার পাথ।

রিটার্ন

  • Promise<ExtensionPanel>

    Chrome 152+

    প্যানেল তৈরি করার সময় যে ফাংশন কল করা হয়।

openResource()

browser.devtools.panels.openResource(
  url: string,
  lineNumber: number,
  columnNumber?: number,
): Promise<void>

DevTools-কে ডেভেলপার টুল প্যানেলে URL খোলার অনুরোধ করে।

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

  • URL

    স্ট্রিং

    রিসোর্স খোলার URL।

  • lineNumber

    নম্বর

    রিসোর্স লোড করা হলে, স্ক্রল করে কোন লাইনে যেতে হবে তা নির্দিষ্ট করে।

  • columnNumber

    নম্বর ঐচ্ছিক

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

    রিসোর্স লোড করা হলে কোন কলাম নম্বরে স্ক্রল করতে হবে তা নির্দিষ্ট করে।

রিটার্ন

  • <void> প্রমিস

    Chrome 152+

    রিসোর্স সফলভাবে লোড হলে একটি ফাংশন কল করা হয়।

setOpenResourceHandler()

browser.devtools.panels.setOpenResourceHandler(
  callback?: function,
): void

ডেভেলপার টুল উইন্ডোতে ব্যবহারকারী কোনও রিসোর্স লিঙ্কে ক্লিক করলে যে ফাংশন কল করা হবে তা নির্দিষ্ট করে। হ্যান্ডলার আনসেট করতে, কোনও প্যারামিটার ছাড়া পদ্ধতিটি কল করুন অথবা প্যারামিটার হিসেবে null পাস করুন।

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

  • কলব্যাক

    ফাংশন ঐচ্ছিক

    callback প্যারামিটারটি দেখতে এইরকম: 

    (resource: Resource, lineNumber: number) => void

    • রিসোর্স

      রিসোর্স

      যে রিসোর্সে ক্লিক করা হয়েছে সেটির জন্য একটি devtools.inspectedWindow.Resource অবজেক্ট।

    • lineNumber

      নম্বর

      রিসোর্সের মধ্যে ক্লিক করা লাইন নম্বর নির্দিষ্ট করে।

setThemeChangeHandler()

Chrome 99+ Chrome 152 থেকে browser.* 
browser.devtools.panels.setThemeChangeHandler(
  callback?: function,
): void

DevTools-এ বর্তমান থিম পরিবর্তন হলে কোন ফাংশন কল করা হবে তা নির্দিষ্ট করে। হ্যান্ডলার আনসেট করতে, কোনও প্যারামিটার ছাড়াই পদ্ধতিটি কল করুন অথবা প্যারামিটার হিসেবে null পাস করুন।

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

  • কলব্যাক

    ফাংশন ঐচ্ছিক

    callback প্যারামিটারটি দেখতে এইরকম: 

    (theme: Theme) => void

    • থিম

      থিম

      DevTools-এ বর্তমান থিম।