DevTools প্রসারিত করুন

DevTools এক্সটেনশনগুলো, এক্সটেনশনে যুক্ত একটি DevTools পৃষ্ঠার মাধ্যমে DevTools-নির্দিষ্ট এক্সটেনশন API অ্যাক্সেস করে Chrome DevTools-এ বিভিন্ন ফিচার যোগ করে।

আর্কিটেকচার ডায়াগ্রামটি দেখাচ্ছে যে ডেভটুলস পেজটি ইন্সপেক্টেড উইন্ডো এবং সার্ভিস ওয়ার্কারের সাথে যোগাযোগ করছে। সার্ভিস ওয়ার্কারটিকে কন্টেন্ট স্ক্রিপ্টগুলোর সাথে যোগাযোগ করতে এবং এক্সটেনশন এপিআইগুলো অ্যাক্সেস করতে দেখানো হয়েছে। ডেভটুলস পেজটির ডেভটুলস এপিআইগুলোতে অ্যাক্সেস রয়েছে, যেমন—প্যানেল তৈরি করা।
ডেভটুলস এক্সটেনশন আর্কিটেকচার।

DevTools-এর জন্য নির্দিষ্ট এক্সটেনশন API-গুলোর মধ্যে নিম্নলিখিতগুলো অন্তর্ভুক্ত:

ডেভটুলস পৃষ্ঠা

যখন একটি DevTools উইন্ডো খোলে, তখন একটি DevTools এক্সটেনশন তার DevTools পেজের একটি ইনস্ট্যান্স তৈরি করে, যা উইন্ডোটি খোলা থাকা পর্যন্ত বিদ্যমান থাকে। এই পেজটির DevTools API এবং এক্সটেনশন API-গুলোতে অ্যাক্সেস থাকে এবং এটি নিম্নলিখিত কাজগুলো করতে পারে:

  • devtools.panels API ব্যবহার করে প্যানেল তৈরি করুন এবং সেগুলোর সাথে ইন্টারঅ্যাক্ট করুন, যার মধ্যে DevTools উইন্ডোতে অন্যান্য এক্সটেনশন পেজকে প্যানেল বা সাইডবার হিসেবে যুক্ত করাও অন্তর্ভুক্ত।
  • devtools.inspectedWindow API ব্যবহার করে পরিদর্শন করা উইন্ডো সম্পর্কে তথ্য পান এবং সেই উইন্ডোতে কোড মূল্যায়ন করুন।
  • devtools.network API ব্যবহার করে নেটওয়ার্ক অনুরোধ সম্পর্কে তথ্য পান।
  • devtools.recorder API ব্যবহার করে রেকর্ডার প্যানেলটি সম্প্রসারিত করুন।
  • devtools.performance API ব্যবহার করে পারফরম্যান্স প্যানেলের রেকর্ডিং স্ট্যাটাস সম্পর্কে তথ্য পান।

DevTools পৃষ্ঠাটি সরাসরি এক্সটেনশন এপিআই (API) অ্যাক্সেস করতে পারে। এর মধ্যে মেসেজ পাসিং ব্যবহার করে সার্ভিস ওয়ার্কারের সাথে যোগাযোগ করার ক্ষমতাও অন্তর্ভুক্ত।

একটি ডেভটুলস এক্সটেনশন তৈরি করুন

আপনার এক্সটেনশনের জন্য একটি ডেভটুলস পৃষ্ঠা তৈরি করতে, এক্সটেনশন ম্যানিফেস্টে devtools_page ফিল্ডটি যোগ করুন:

{
  "name": ...
  "version": "1.0",
  "devtools_page": "devtools.html",
  ...
}

devtools_page ফিল্ডটিকে অবশ্যই একটি HTML পেজ নির্দেশ করতে হবে। যেহেতু DevTools পেজটি আপনার এক্সটেনশনের মধ্যেই থাকতে হবে, তাই আমরা একটি রিলেটিভ URL ব্যবহার করে এটি নির্দিষ্ট করার পরামর্শ দিই।

chrome.devtools API-এর মেম্বাররা শুধুমাত্র DevTools উইন্ডো খোলা থাকা অবস্থায় সেই উইন্ডোর মধ্যে লোড হওয়া পেজগুলোর জন্যই উপলব্ধ থাকে। কন্টেন্ট স্ক্রিপ্ট এবং অন্যান্য এক্সটেনশন পেজগুলো এই API-গুলোতে অ্যাক্সেস পায় না।

ডেভটুলস UI উপাদান: প্যানেল এবং সাইডবার প্যান

ব্রাউজার অ্যাকশন, কনটেক্সট মেনু এবং পপআপের মতো সাধারণ এক্সটেনশন UI এলিমেন্টগুলো ছাড়াও, একটি DevTools এক্সটেনশন DevTools উইন্ডোতে UI এলিমেন্ট যোগ করতে পারে:

  • প্যানেল হলো একটি শীর্ষ-স্তরের ট্যাব, যেমন এলিমেন্টস, সোর্সেস এবং নেটওয়ার্ক প্যানেল।
  • একটি সাইডবার পেইন কোনো প্যানেলের সাথে সম্পর্কিত অতিরিক্ত UI উপস্থাপন করে। এলিমেন্টস প্যানেলের স্টাইলস, কম্পিউটেড স্টাইলস এবং ইভেন্ট লিসেনার্স পেইনগুলো হলো সাইডবার পেইনের উদাহরণ। আপনি ক্রোমের কোন সংস্করণ ব্যবহার করছেন এবং ডেভটুলস উইন্ডোটি কোথায় ডক করা আছে, তার উপর নির্ভর করে আপনার সাইডবার পেইনগুলো নিচের উদাহরণ চিত্রটির মতো দেখতে হতে পারে:
ডেভটুলস উইন্ডোতে এলিমেন্টস প্যানেল এবং স্টাইলস সাইডবার পেইন দেখা যাচ্ছে।
ডেভটুলস উইন্ডোতে এলিমেন্টস প্যানেল এবং স্টাইলস সাইডবার পেইন দেখা যাচ্ছে।

প্রতিটি প্যানেল হলো তার নিজস্ব একটি HTML ফাইল, যাতে অন্যান্য রিসোর্স (জাভাস্ক্রিপ্ট, সিএসএস, ছবি ইত্যাদি) অন্তর্ভুক্ত থাকতে পারে। একটি বেসিক প্যানেল তৈরি করতে, নিম্নলিখিত কোডটি ব্যবহার করুন:

chrome.devtools.panels.create("My Panel",
    "MyPanelIcon.png",
    "Panel.html",
    function(panel) {
      // code invoked on panel creation
    }
);

প্যানেল বা সাইডবার প্যানে এক্সিকিউট করা জাভাস্ক্রিপ্ট, ডেভটুলস পেজের মতোই একই এপিআইগুলো অ্যাক্সেস করতে পারে।

একটি সাধারণ সাইডবার প্যান তৈরি করতে, নিম্নলিখিত কোডটি ব্যবহার করুন:

chrome.devtools.panels.elements.createSidebarPane("My Sidebar",
    function(sidebar) {
        // sidebar initialization code here
        sidebar.setObject({ some_data: "Some data to show" });
});

সাইডবার প্যানে বিষয়বস্তু প্রদর্শন করার বিভিন্ন উপায় রয়েছে:

  • HTML বিষয়বস্তু: প্যানে প্রদর্শনের জন্য একটি HTML পৃষ্ঠা নির্দিষ্ট করতে setPage() কল করুন।
  • JSON ডেটা: setObject() ফাংশনে একটি JSON অবজেক্ট পাস করুন।
  • জাভাস্ক্রিপ্ট এক্সপ্রেশন: setExpression() ফাংশনে একটি এক্সপ্রেশন পাস করুন। DevTools পরিদর্শন করা পৃষ্ঠার প্রেক্ষাপটে এক্সপ্রেশনটি মূল্যায়ন করে, তারপর রিটার্ন ভ্যালুটি প্রদর্শন করে।

setObject() এবং setExpression() উভয়ের ক্ষেত্রেই, প্যানে মানটি ঠিক সেভাবেই প্রদর্শন করে যেভাবে এটি DevTools কনসোলে দেখা যায়। তবে, setExpression() আপনাকে DOM এলিমেন্ট এবং যেকোনো জাভাস্ক্রিপ্ট অবজেক্ট প্রদর্শন করতে দেয়, যেখানে setObject() শুধুমাত্র JSON অবজেক্ট সমর্থন করে।

সম্প্রসারণ উপাদানগুলির মধ্যে যোগাযোগ করুন

নিম্নলিখিত বিভাগগুলিতে ডেভটুলস এক্সটেনশন উপাদানগুলিকে একে অপরের সাথে যোগাযোগ করার সুযোগ দেওয়ার কিছু সহায়ক উপায় বর্ণনা করা হয়েছে।

একটি কন্টেন্ট স্ক্রিপ্ট ইনজেক্ট করুন

কন্টেন্ট স্ক্রিপ্ট ইনজেক্ট করতে, scripting.executeScript() ব্যবহার করুন:

// DevTools page -- devtools.js
chrome.scripting.executeScript({
  target: {
    tabId: chrome.devtools.inspectedWindow.tabId
  },
  files: ["content_script.js"]
});

আপনি inspectedWindow.tabId প্রপার্টি ব্যবহার করে পরিদর্শন করা উইন্ডোর ট্যাব আইডি পেতে পারেন।

যদি কোনো কন্টেন্ট স্ক্রিপ্ট আগে থেকেই ইনজেক্ট করা থাকে, তাহলে আপনি সেটির সাথে যোগাযোগের জন্য মেসেজিং এপিআই ব্যবহার করতে পারেন।

পরিদর্শন করা উইন্ডোতে জাভাস্ক্রিপ্ট মূল্যায়ন করুন

আপনি পরিদর্শন করা পৃষ্ঠার প্রেক্ষাপটে জাভাস্ক্রিপ্ট কোড কার্যকর করতে inspectedWindow.eval() পদ্ধতিটি ব্যবহার করতে পারেন। আপনি একটি DevTools পৃষ্ঠা, প্যানেল বা সাইডবার প্যান থেকে eval() পদ্ধতিটি কল করতে পারেন।

ডিফল্টরূপে, এক্সপ্রেশনটি পেজের প্রধান ফ্রেমের প্রেক্ষাপটে মূল্যায়ন করা হয়। inspectedWindow.eval() ডেভটুলস কনসোলে প্রবেশ করানো কোডের মতোই একই স্ক্রিপ্ট এক্সিকিউশন কনটেক্সট এবং অপশন ব্যবহার করে, যা eval() ব্যবহার করার সময় ডেভটুলস কনসোল ইউটিলিটিস এপিআই-এর ফিচারগুলো অ্যাক্সেস করার সুযোগ দেয়। উদাহরণস্বরূপ, HTML ডকুমেন্টের <head> সেকশনের ভেতরের প্রথম স্ক্রিপ্ট এলিমেন্টটি ইন্সপেক্ট করতে এটি ব্যবহার করুন:

chrome.devtools.inspectedWindow.eval(
  "inspect($$('head script')[0])",
  function(result, isException) { }
);

inspectedWindow.eval() কল করার সময় এক্সপ্রেশনটিকে কন্টেন্ট স্ক্রিপ্টগুলোর একই কনটেক্সটে ইভ্যালুয়েট করতে আপনি useContentScriptContext true তে সেট করতে পারেন। এই অপশনটি ব্যবহার করার জন্য, eval() কল করার আগে একটি স্ট্যাটিক কন্টেন্ট স্ক্রিপ্ট ডিক্লারেশন ব্যবহার করুন, যা executeScript() কল করে অথবা manifest.json ফাইলে একটি কন্টেন্ট স্ক্রিপ্ট নির্দিষ্ট করে দেওয়া যেতে পারে। কন্টেন্ট স্ক্রিপ্ট কনটেক্সট লোড হওয়ার পরেও, আপনি অতিরিক্ত কন্টেন্ট স্ক্রিপ্ট ইনজেক্ট করার জন্য এই অপশনটি ব্যবহার করতে পারেন।

নির্বাচিত উপাদানটি একটি কন্টেন্ট স্ক্রিপ্টে পাঠান

কন্টেন্ট স্ক্রিপ্টের বর্তমান নির্বাচিত এলিমেন্টে সরাসরি অ্যাক্সেস নেই। তবে, inspectedWindow.eval() ব্যবহার করে আপনি যে কোডই চালান না কেন, সেটি DevTools কনসোল এবং Console Utilities API-গুলোতে অ্যাক্সেস পায়। উদাহরণস্বরূপ, ইভ্যালুয়েটেড কোডে আপনি নির্বাচিত এলিমেন্টটি অ্যাক্সেস করার জন্য $0 ব্যবহার করতে পারেন।

নির্বাচিত এলিমেন্টটি একটি কন্টেন্ট স্ক্রিপ্টে পাঠাতে:

  1. কন্টেন্ট স্ক্রিপ্টে এমন একটি মেথড তৈরি করুন যা নির্বাচিত এলিমেন্টটিকে আর্গুমেন্ট হিসেবে গ্রহণ করবে।

    function setSelectedElement(el) {
    // do something with the selected element
}

  2. DevTools পৃষ্ঠা থেকে inspectedWindow.eval() ব্যবহার করে useContentScriptContext: true অপশনসহ মেথডটি কল করুন।

    chrome.devtools.inspectedWindow.eval("setSelectedElement($0)",
    { useContentScriptContext: true });

` useContentScriptContext: true অপশনটি নির্দিষ্ট করে যে, এক্সপ্রেশনটিকে অবশ্যই কন্টেন্ট স্ক্রিপ্টগুলোর মতোই একই কনটেক্সটে ইভ্যালুয়েট করতে হবে, যাতে এটি setSelectedElement মেথডটি অ্যাক্সেস করতে পারে।

একটি রেফারেন্স প্যানেলের window পান

একটি ডেভটুলস প্যানেল থেকে postMessage() কল করতে, আপনার এর window অবজেক্টের একটি রেফারেন্স প্রয়োজন হবে। panel.onShown ইভেন্ট হ্যান্ডলার থেকে একটি প্যানেলের iframe উইন্ডোটি পান:

extensionPanel.onShown.addListener(function (extPanelWindow) {
    extPanelWindow instanceof Window; // true
    extPanelWindow.postMessage( // …
});

ইনজেক্ট করা স্ক্রিপ্ট থেকে ডেভটুলস পৃষ্ঠায় বার্তা পাঠান

কন্টেন্ট স্ক্রিপ্ট ছাড়া সরাসরি পেজে ইনজেক্ট করা কোড, যেমন <script> ট্যাগ যুক্ত করে বা inspectedWindow.eval() কল করে করা কোড, runtime.sendMessage() ব্যবহার করে DevTools পেজে মেসেজ পাঠাতে পারে না। এর পরিবর্তে, আমরা আপনার ইনজেক্ট করা স্ক্রিপ্টকে একটি কন্টেন্ট স্ক্রিপ্টের সাথে যুক্ত করার পরামর্শ দিই যা মধ্যস্থতাকারী হিসেবে কাজ করতে পারে এবং window.postMessage() মেথডটি ব্যবহার করতে বলি। নিম্নলিখিত উদাহরণটি পূর্ববর্তী বিভাগের ব্যাকগ্রাউন্ড স্ক্রিপ্ট ব্যবহার করে:

// injected-script.js

window.postMessage({
  greeting: 'hello there!',
  source: 'my-devtools-extension'
}, '*');

// content-script.js

window.addEventListener('message', function(event) {
  // Only accept messages from the same frame
  if (event.source !== window) {
    return;
  }

  var message = event.data;

  // Only accept messages that we know are ours. Note that this is not foolproof
  // and the page can easily spoof messages if it wants to.
  if (typeof message !== 'object' || message === null ||
      message.source !== 'my-devtools-extension') {
    return;
  }

  chrome.runtime.sendMessage(message);
});

অন্যান্য বিকল্প বার্তা আদান-প্রদানের কৌশল গিটহাবে পাওয়া যাবে।

DevTools কখন খোলে এবং বন্ধ হয় তা শনাক্ত করুন

DevTools উইন্ডোটি খোলা আছে কিনা তা ট্র্যাক করতে, সার্ভিস ওয়ার্কারে একটি onConnect লিসেনার যোগ করুন এবং DevTools পেজ থেকে connect() কল করুন। যেহেতু প্রতিটি ট্যাবের নিজস্ব DevTools উইন্ডো খোলা থাকতে পারে, তাই আপনি একাধিক connect ইভেন্ট পেতে পারেন। কোনো DevTools উইন্ডো খোলা আছে কিনা তা ট্র্যাক করতে, নিম্নলিখিত উদাহরণে দেখানো অনুযায়ী connect এবং disconnect ইভেন্টগুলো গণনা করুন: 

// background.js
var openCount = 0;
chrome.runtime.onConnect.addListener(function (port) {
    if (port.name == "devtools-page") {
      if (openCount == 0) {
        alert("DevTools window opening.");
      }
      openCount++;

      port.onDisconnect.addListener(function(port) {
          openCount--;
          if (openCount == 0) {
            alert("Last DevTools window closing.");
          }
      });
    }
});

DevTools পৃষ্ঠাটি এইভাবে একটি সংযোগ তৈরি করে: 

// devtools.js

// Create a connection to the service worker
const serviceWorkerConnection = chrome.runtime.connect({
    name: "devtools-page"
});

// Send a periodic heartbeat to keep the port open.
setInterval(() => {
  port.postMessage("heartbeat");
}, 15000);

ডেভটুলস এক্সটেনশনের উদাহরণ

এই পৃষ্ঠার উদাহরণগুলো নিম্নলিখিত পৃষ্ঠাগুলো থেকে নেওয়া হয়েছে:

  • পলিমার ডেভটুলস এক্সটেনশন - কাস্টম প্যানেলে ফেরত পাঠানোর জন্য DOM/JS স্টেট কোয়েরি করতে হোস্ট পেজে চলমান অনেকগুলো হেল্পার ব্যবহার করে।
  • React DevTools এক্সটেনশন - DevTools UI কম্পোনেন্টগুলো পুনঃব্যবহার করার জন্য রেন্ডারারের একটি সাবমডিউল ব্যবহার করে।
  • এম্বার ইন্সপেক্টর - ক্রোম এবং ফায়ারফক্স উভয়ের জন্য অ্যাডাপ্টার সহ একটি শেয়ার্ড এক্সটেনশন কোর।
  • Coquette-inspect - একটি পরিচ্ছন্ন React-ভিত্তিক এক্সটেনশন, যেখানে হোস্ট পেজে একটি ডিবাগিং এজেন্ট যুক্ত করা থাকে।
  • স্যাম্পল এক্সটেনশনগুলোতে ইনস্টল, ব্যবহার করে দেখার এবং শেখার মতো আরও অনেক দরকারি এক্সটেনশন রয়েছে।

আরও তথ্য

এক্সটেনশনগুলো যে সকল স্ট্যান্ডার্ড এপিআই ব্যবহার করতে পারে, সে সম্পর্কে তথ্যের জন্য chrome.* এপিআই এবং web এপিআই দেখুন।

আমাদের মতামত দিন! আপনার মন্তব্য ও পরামর্শ আমাদের এপিআই (API) উন্নত করতে সাহায্য করে।

উদাহরণ

আপনি স্যাম্পল -এ ডেভটুলস এপিআই ব্যবহার করা উদাহরণগুলো খুঁজে পেতে পারেন।