ডিবাগিং এক্সটেনশন

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

লগগুলি সনাক্ত করুন

এক্সটেনশনগুলো বিভিন্ন উপাদান দিয়ে গঠিত, এবং এই উপাদানগুলোর স্বতন্ত্র দায়িত্ব রয়েছে। এক্সটেনশনের বিভিন্ন উপাদানের এরর লগ খুঁজে বের করা শুরু করতে এখান থেকে একটি ত্রুটিপূর্ণ এক্সটেনশন ডাউনলোড করুন।

পটভূমি স্ক্রিপ্ট

chrome://extensions এ ক্রোম এক্সটেনশন ম্যানেজমেন্ট পেজে যান এবং নিশ্চিত করুন যে ডেভেলপার মোড চালু আছে। 'Load Unpacked' বোতামে ক্লিক করুন এবং ত্রুটিপূর্ণ এক্সটেনশন ডিরেক্টরিটি নির্বাচন করুন। এক্সটেনশনটি লোড হওয়ার পর, এতে লাল অক্ষরে 'Details ', 'Remove ' এবং 'Errors' এই তিনটি বোতাম থাকা উচিত।

এরর লগ দেখতে এররস বাটনে ক্লিক করুন। এক্সটেনশন সিস্টেম ব্যাকগ্রাউন্ড স্ক্রিপ্টে একটি সমস্যা খুঁজে পেয়েছে।

Uncaught TypeError: Cannot read property 'addListener' of undefined

এছাড়াও, 'Inspect views'- এর পাশের নীল লিঙ্কটি নির্বাচন করে ব্যাকগ্রাউন্ড স্ক্রিপ্টের জন্য Chrome DevTools প্যানেলটি খোলা যেতে পারে।

কোডে ফিরে যান।

chrome.runtime.oninstalled.addListener(function() {
  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log('The color is green.');
  });
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [new chrome.declarativeContent.PageStateMatcher({
        pageUrl: {hostEquals: 'developer.chrome.com'},
      })],
      actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
  });
});

ব্যাকগ্রাউন্ড স্ক্রিপ্টটি ` onInstalled ইভেন্টটি শোনার চেষ্টা করছে, কিন্তু প্রপার্টির নামে বড় হাতের 'I' প্রয়োজন। সঠিক কলটি প্রতিফলিত করতে কোডটি আপডেট করুন, উপরের ডানদিকের কোণায় থাকা `Clear all` বোতামে ক্লিক করুন, তারপর এক্সটেনশনটি রিলোড করুন।

পপআপ

এখন যেহেতু এক্সটেনশনটি সঠিকভাবে চালু হয়েছে, অন্যান্য উপাদানগুলো পরীক্ষা করা যেতে পারে। এই পৃষ্ঠাটি রিফ্রেশ করুন, অথবা একটি নতুন ট্যাব খুলে developer.chrome.com-এর যেকোনো পৃষ্ঠায় যান, পপআপটি খুলুন এবং সবুজ বর্গক্ষেত্রটিতে ক্লিক করুন। এবং... কিছুই ঘটে না।

এক্সটেনশন ম্যানেজমেন্ট পেজে ফিরে যান, এরর বাটনটি আবার দেখা যাচ্ছে। নতুন লগটি দেখতে এটিতে ক্লিক করুন।

Uncaught ReferenceError: tabs is not defined

পপআপটি ইন্সপেক্ট করে এর ত্রুটিগুলোও দেখা যেতে পারে।

tabs is undefined ত্রুটিটি নির্দেশ করে যে, এক্সটেনশনটি জানে না কন্টেন্ট স্ক্রিপ্টটি কোথায় ইনজেক্ট করতে হবে। tabs.query() মেথডটি কল করে এবং তারপর সক্রিয় ট্যাবটি নির্বাচন করার মাধ্যমে এটি সংশোধন করা যেতে পারে।

  let changeColor = document.getElementById('changeColor');

  chrome.storage.sync.get('color', function(data) {
    changeColor.style.backgroundColor = data.color;
    changeColor.setAttribute('value', data.color);
  });

  changeColor.onclick = function(element) {
    let color = element.target.value;
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.executeScript(
          tabs[0].id,
          {code: 'document.body.style.backgroundColor = color;'});
    });
  };

কোডটি আপডেট করুন, উপরের ডানদিকের কোণায় থাকা 'Clear all' বোতামে ক্লিক করুন এবং তারপর এক্সটেনশনটি রিলোড করুন।

বিষয়বস্তু স্ক্রিপ্ট

পেজটি রিফ্রেশ করুন, পপআপটি খুলুন এবং সবুজ বক্সটিতে ক্লিক করুন। এবং... না, ব্যাকগ্রাউন্ডের রঙ এখনও বদলায়নি! এক্সটেনশন ম্যানেজমেন্ট পেজে ফিরে যান এবং... সেখানে কোনো এররস বাটন নেই। এর সম্ভাব্য কারণ হলো কন্টেন্ট স্ক্রিপ্ট, যা ওয়েব পেজের ভেতরে চলে।

এক্সটেনশনটি যে ওয়েব পেজটি পরিবর্তন করার চেষ্টা করছে, সেটির ডেভটুলস প্যানেলটি খুলুন।

এক্সটেনশন ম্যানেজমেন্ট পেজে শুধুমাত্র রানটাইম এরর, console.warning এবং console.error রেকর্ড করা হবে।

কন্টেন্ট স্ক্রিপ্টের ভেতর থেকে ডেভটুলস ব্যবহার করতে, 'top'- এর পাশের ড্রপডাউন তীরচিহ্নে ক্লিক করুন এবং এক্সটেনশনটি নির্বাচন করুন।

ত্রুটি বার্তায় বলা হচ্ছে যে color সংজ্ঞায়িত নয়। এক্সটেনশনটি সম্ভবত ভেরিয়েবলটি সঠিকভাবে পাস করছে না। কোডে 'color' ভেরিয়েবলটি পাস করার জন্য ইনজেক্ট করা স্ক্রিপ্টটি সংশোধন করুন।

  {code: 'document.body.style.backgroundColor = "' + color + '";'});

এক্সটেনশন ট্যাব

ট্যাব হিসেবে প্রদর্শিত এক্সটেনশন পেজগুলোর (যেমন ওভাররাইড পেজ এবং ফুল-পেজ অপশন ) লগ ওয়েব পেজ কনসোল এবং এক্সটেনশন ম্যানেজমেন্ট পেজে পাওয়া যাবে।

নেটওয়ার্ক অনুরোধ নিরীক্ষণ করুন

প্রায়শই, সবচেয়ে দ্রুতগতির ডেভেলপাররাও DevTools খোলার আগেই পপআপটি প্রয়োজনীয় সমস্ত নেটওয়ার্ক রিকোয়েস্ট পাঠিয়ে দেয়। এই রিকোয়েস্টগুলো দেখতে, নেটওয়ার্ক প্যানেলের ভেতর থেকে রিফ্রেশ করুন। এতে DevTools প্যানেলটি বন্ধ না করেই পপআপটি পুনরায় লোড হবে।

অনুমতি ঘোষণা করুন

While extensions have similar capabilities as web pages they often need permission to use certain features, such as cookies , storage and Cross-Origin XMLHttpRequest . Refer to the permissions article and the available Chrome APIs to ensure an extension is requesting the correct permissions in its manifest .

  {
    "name": "Broken Background Color",
    "version": "1.0",
    "description": "Fix an Extension!",
    "permissions": [
      "activeTab",
      "declarativeContent",
      "storage"
    ],
    "options_page": "options.html",
    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },
    "page_action": {
      "default_popup": "popup.html",
      "default_icon": {
        "16": "images/get_started16.png",
        "32": "images/get_started32.png",
        "48": "images/get_started48.png",
        "128": "images/get_started128.png"
      }
    },
    "icons": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    },
    "manifest_version": 2
  }

পরবর্তী পদক্ষেপ

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