chrome.devtools.panels

বর্ণনা

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

উদ্ভাসিত

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

"devtools_page"

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

ওভারভিউ

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

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

উদাহরণ

নিম্নলিখিত কোডটি 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");
  }
);

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

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

এই 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

Chrome 59+

ব্যবহারকারীর 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