chrome.devtools.panels

বর্ণনা

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

প্রকাশ

এই এপিআইটি ব্যবহার করার জন্য ম্যানিফেস্টে নিম্নলিখিত কী-গুলো অবশ্যই ঘোষণা করতে হবে।

"devtools_page"

ডেভেলপার টুলস এপিআই ব্যবহারের সাধারণ পরিচিতির জন্য ডেভটুলস এপিআই সারাংশ দেখুন।

সংক্ষিপ্ত বিবরণ

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

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

উদাহরণ

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

chrome.devtools.panels.create("Font Picker",
                              "FontPicker.png",
                              "Panel.html",
                              function(panel) { ... });

নিম্নলিখিত কোডটি Sidebar.html এ থাকা এবং Font Properties শিরোনামের একটি সাইডবার পেইনকে Elements প্যানেলে যোগ করে, তারপর এর উচ্চতা 8ex নির্ধারণ করে:

chrome.devtools.panels.elements.createSidebarPane("Font Properties",
  function(sidebar) {
    sidebar.setPage("Sidebar.html");
    sidebar.setHeight("8ex");
  }
);

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

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

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

প্রকারভেদ

Button

এক্সটেনশন দ্বারা তৈরি একটি বাটন।

বৈশিষ্ট্য

  • ক্লিক করা হলে

    ইভেন্ট<ফাংশনভয়েডভয়েড>

    বাটনটি ক্লিক করা হলে এটি সক্রিয় হয়।

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

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

    • কলব্যাক

      ফাংশন

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

      () => void

  • আপডেট

    শূন্যতা

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

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

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

    • আইকনপথ

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

      বাটনটির নতুন আইকনের পথ।

    • টুলটিপটেক্সট

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

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

    • অক্ষম

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

      বাটনটি নিষ্ক্রিয় কিনা।

ElementsPanel

এলিমেন্টস প্যানেলকে উপস্থাপন করে।

বৈশিষ্ট্য

  • onSelectionChanged

    ইভেন্ট<ফাংশনভয়েডভয়েড>

    প্যানেলে কোনো অবজেক্ট নির্বাচিত হলে এটি সক্রিয় হয়।

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

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

    • কলব্যাক

      ফাংশন

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

      () => void

  • সাইডবার প্যানেল তৈরি করুন

    শূন্যতা

    প্রতিশ্রুতি

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

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

    (title: string, callback?: function) => {...}

    • শিরোনাম

      স্ট্রিং

      যে লেখাটি সাইডবার ক্যাপশনে প্রদর্শিত হয়।

    • কলব্যাক

      ফাংশন ঐচ্ছিক

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

      (result: ExtensionSidebarPane) => void

    • ফেরত

      প্রতিশ্রুতি< এক্সটেনশনসাইডবারপেন >

      বিচারাধীন

      সাইডবার তৈরি হলে এই কলব্যাকটি চালু হয়।

      প্রমিস শুধুমাত্র ম্যানিফেস্ট ভি৩ এবং এর পরবর্তী সংস্করণগুলোতে সমর্থিত, অন্যান্য প্ল্যাটফর্মে কলব্যাক ব্যবহার করতে হবে।

ExtensionPanel

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

বৈশিষ্ট্য

  • লুকানো

    ইভেন্ট<ফাংশনভয়েডভয়েড>

    ব্যবহারকারী প্যানেল থেকে অন্য কোথাও গেলে এটি সক্রিয় হয়।

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

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

    • কলব্যাক

      ফাংশন

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

      () => void

  • অনুসন্ধানে

    ইভেন্ট<ফাংশনভয়েডভয়েড>

    অনুসন্ধানের কোনো কার্যকলাপের (যেমন নতুন অনুসন্ধান শুরু করা, অনুসন্ধানের ফলাফলে নেভিগেট করা, বা অনুসন্ধান বাতিল করা) ক্ষেত্রে এটি সক্রিয় হয়।

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

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

    • কলব্যাক

      ফাংশন

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

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

      • পদক্ষেপ

        স্ট্রিং

      • কোয়েরি স্ট্রিং

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

  • দেখানো হয়েছে

    ইভেন্ট<ফাংশনভয়েডভয়েড>

    ব্যবহারকারী প্যানেলে প্রবেশ করলে এটি সক্রিয় হয়।

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

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

    • কলব্যাক

      ফাংশন

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

      (window: Window) => void

      • জানালা

        জানালা

  • createStatusBarButton

    শূন্যতা

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

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

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

    • আইকনপথ

      স্ট্রিং

      বাটনের আইকনের পাথ। ফাইলটিতে দুটি ৩২x২৪ পিক্সেলের আইকন দিয়ে গঠিত একটি ৬৪x২৪ পিক্সেলের ইমেজ থাকতে হবে। বাটনটি নিষ্ক্রিয় থাকলে বাম দিকের আইকনটি ব্যবহৃত হয়; বাটনটি চাপলে ডান দিকের আইকনটি প্রদর্শিত হয়।

    • টুলটিপটেক্সট

      স্ট্রিং

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

    • অক্ষম

      বুলিয়ান

      বাটনটি নিষ্ক্রিয় কিনা।

  • দেখান

    শূন্যতা

    ক্রোম ১৪০+

    সংশ্লিষ্ট ট্যাবটি সক্রিয় করার মাধ্যমে প্যানেলটি দেখানো হয়।

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

    () => {...}

ExtensionSidebarPane

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

বৈশিষ্ট্য

  • লুকানো

    ইভেন্ট<ফাংশনভয়েডভয়েড>

    ব্যবহারকারী যখন সাইডবার প্যানেলটি ধারণকারী প্যানেল থেকে অন্য প্যানেলে চলে যান, তখন সাইডবার প্যানেলটি অদৃশ্য হয়ে গেলে এই ইভেন্টটি ট্রিগার হয়।

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

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

    • কলব্যাক

      ফাংশন

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

      () => void

  • দেখানো হয়েছে

    ইভেন্ট<ফাংশনভয়েডভয়েড>

    ব্যবহারকারী যখন সাইডবার প্যানেলটিকে ধারণকারী প্যানেলে স্যুইচ করার ফলে সেটি দৃশ্যমান হয়, তখন এই ইভেন্টটি ট্রিগার হয়।

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

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

    • কলব্যাক

      ফাংশন

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

      (window: Window) => void

      • জানালা

        জানালা

  • সেটএক্সপ্রেশন

    শূন্যতা

    প্রতিশ্রুতি

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

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

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

    • অভিব্যক্তি

      স্ট্রিং

      পরিদর্শন করা পৃষ্ঠার প্রেক্ষাপটে মূল্যায়ন করার জন্য একটি এক্সপ্রেশন। জাভাস্ক্রিপ্ট অবজেক্ট এবং ডম নোডগুলি কনসোল/ওয়াচের মতো একটি সম্প্রসারণযোগ্য ট্রিতে প্রদর্শিত হয়।

    • মূল শিরোনাম

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

      এক্সপ্রেশন ট্রি-এর মূলের জন্য একটি ঐচ্ছিক শিরোনাম।

    • কলব্যাক

      ফাংশন ঐচ্ছিক

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

      () => void

    • ফেরত

      প্রতিশ্রুতি<শূন্য>

      বিচারাধীন

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

      প্রমিস শুধুমাত্র ম্যানিফেস্ট ভি৩ এবং এর পরবর্তী সংস্করণগুলোতে সমর্থিত, অন্যান্য প্ল্যাটফর্মে কলব্যাক ব্যবহার করতে হবে।

  • উচ্চতা নির্ধারণ করুন

    শূন্যতা

    সাইডবারের উচ্চতা নির্ধারণ করে।

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

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

    • উচ্চতা

      স্ট্রিং

      CSS-এর মতো আকারের নির্দিষ্টকরণ, যেমন '100px' বা '12ex' ।

  • setObject

    শূন্যতা

    প্রতিশ্রুতি

    সাইডবার প্যানে প্রদর্শনের জন্য একটি JSON-সম্মত অবজেক্ট নির্ধারণ করে।

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

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

    • jsonObject

      স্ট্রিং

      পরিদর্শনকৃত পৃষ্ঠার প্রেক্ষাপটে প্রদর্শিত হওয়ার জন্য একটি অবজেক্ট। এটি কলারের (এপিআই ক্লায়েন্ট) প্রেক্ষাপটে মূল্যায়ন করা হয়।

    • মূল শিরোনাম

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

      এক্সপ্রেশন ট্রি-এর মূলের জন্য একটি ঐচ্ছিক শিরোনাম।

    • কলব্যাক

      ফাংশন ঐচ্ছিক

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

      () => void

    • ফেরত

      প্রতিশ্রুতি<শূন্য>

      বিচারাধীন

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

      প্রমিস শুধুমাত্র ম্যানিফেস্ট ভি৩ এবং এর পরবর্তী সংস্করণগুলোতে সমর্থিত, অন্যান্য প্ল্যাটফর্মে কলব্যাক ব্যবহার করতে হবে।

  • পৃষ্ঠা সেট করুন

    শূন্যতা

    সাইডবার প্যানে প্রদর্শনের জন্য একটি HTML পৃষ্ঠা নির্ধারণ করে।

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

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

    • পথ

      স্ট্রিং

      সাইডবারে প্রদর্শনের জন্য এক্সটেনশন পেজের আপেক্ষিক পথ।

SourcesPanel

সোর্সেস প্যানেলকে উপস্থাপন করে।

বৈশিষ্ট্য

  • onSelectionChanged

    ইভেন্ট<ফাংশনভয়েডভয়েড>

    প্যানেলে কোনো অবজেক্ট নির্বাচিত হলে এটি সক্রিয় হয়।

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

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

    • কলব্যাক

      ফাংশন

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

      () => void

  • সাইডবার প্যানেল তৈরি করুন

    শূন্যতা

    প্রতিশ্রুতি

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

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

    (title: string, callback?: function) => {...}

    • শিরোনাম

      স্ট্রিং

      যে লেখাটি সাইডবার ক্যাপশনে প্রদর্শিত হয়।

    • কলব্যাক

      ফাংশন ঐচ্ছিক

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

      (result: ExtensionSidebarPane) => void

    • ফেরত

      প্রতিশ্রুতি< এক্সটেনশনসাইডবারপেন >

      বিচারাধীন

      সাইডবার তৈরি হলে এই কলব্যাকটি চালু হয়।

      প্রমিস শুধুমাত্র ম্যানিফেস্ট ভি৩ এবং এর পরবর্তী সংস্করণগুলোতে সমর্থিত, অন্যান্য প্ল্যাটফর্মে কলব্যাক ব্যবহার করতে হবে।

Theme

ক্রোম ৯৯+

ডেভটুলস দ্বারা ব্যবহৃত থিম।

এনাম

'ডিফল্ট'
ডিফল্ট ডেভটুলস থিম। এটি সর্বদা লাইট থিম।

"অন্ধকার"
ডার্ক থিম।

বৈশিষ্ট্য

elements

উপাদান প্যানেল।

প্রকার

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

sources

উৎস প্যানেল।

প্রকার

উৎস প্যানেল

themeName

ক্রোম ৫৯+

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

প্রকার

স্ট্রিং

পদ্ধতি

create()

প্রতিশ্রুতি
chrome.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
  callback?: function,
): Promise<ExtensionPanel>

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

প্যারামিটার

  • শিরোনাম

    স্ট্রিং

    ডেভেলপার টুলস টুলবারে এক্সটেনশন আইকনের পাশে যে শিরোনামটি প্রদর্শিত হয়।

  • আইকনপথ

    স্ট্রিং

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

  • পৃষ্ঠাপথ

    স্ট্রিং

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

  • কলব্যাক

    ফাংশন ঐচ্ছিক

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

    (panel: ExtensionPanel) => void

ফেরত

  • প্রতিশ্রুতি< এক্সটেনশনপ্যানেল >

    বিচারাধীন

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

    প্রমিস শুধুমাত্র ম্যানিফেস্ট ভি৩ এবং এর পরবর্তী সংস্করণগুলোতে সমর্থিত, অন্যান্য প্ল্যাটফর্মে কলব্যাক ব্যবহার করতে হবে।

openResource()

প্রতিশ্রুতি
chrome.devtools.panels.openResource(
  url: string,
  lineNumber: number,
  columnNumber?: number,
  callback?: function,
): Promise<void>

ডেভটুলসকে একটি ডেভেলপার টুলস প্যানেলে ইউআরএল খোলার জন্য অনুরোধ করে।

প্যারামিটার

  • ইউআরএল

    স্ট্রিং

    যে রিসোর্সটি খুলতে হবে তার ইউআরএল।

  • লাইন নম্বর

    সংখ্যা

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

  • কলাম নম্বর

    সংখ্যা ঐচ্ছিক

    ক্রোম ১১৪+

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

  • কলব্যাক

    ফাংশন ঐচ্ছিক

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

    () => void

ফেরত

  • প্রতিশ্রুতি<শূন্য>

    বিচারাধীন

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

    প্রমিস শুধুমাত্র ম্যানিফেস্ট ভি৩ এবং এর পরবর্তী সংস্করণগুলোতে সমর্থিত, অন্যান্য প্ল্যাটফর্মে কলব্যাক ব্যবহার করতে হবে।

setOpenResourceHandler()

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

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

প্যারামিটার

  • কলব্যাক

    ফাংশন ঐচ্ছিক

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

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

    • সম্পদ

      সম্পদ

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

    • লাইন নম্বর

      সংখ্যা

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

setThemeChangeHandler()

ক্রোম ৯৯+
chrome.devtools.panels.setThemeChangeHandler(
  callback?: function,
): void

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

প্যারামিটার

  • কলব্যাক

    ফাংশন ঐচ্ছিক

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

    (theme: Theme) => void

    • থিম

      থিম

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