সক্রিয় ট্যাবে স্ক্রিপ্ট ইনজেক্ট করুন

এক্সটেনশন টুলবার আইকনে ক্লিক করে বর্তমান পৃষ্ঠার স্টাইলিং সহজ করুন।

ওভারভিউ

এই টিউটোরিয়ালটি একটি এক্সটেনশন তৈরি করে যা ক্রোম এক্সটেনশন এবং ক্রোম ওয়েব স্টোর ডকুমেন্টেশন পৃষ্ঠাগুলির স্টাইলিংকে সহজ করে যাতে সেগুলি পড়তে সহজ হয়৷

এই নির্দেশিকাতে, আমরা নিম্নলিখিতগুলি কীভাবে করতে হবে তা ব্যাখ্যা করতে যাচ্ছি:

  • ইভেন্ট সমন্বয়কারী হিসাবে এক্সটেনশন পরিষেবা কর্মী ব্যবহার করুন।
  • "activeTab" অনুমতির মাধ্যমে ব্যবহারকারীর গোপনীয়তা রক্ষা করুন।
  • ব্যবহারকারী যখন এক্সটেনশন টুলবার আইকনে ক্লিক করেন তখন কোড চালান।
  • স্ক্রিপ্টিং API ব্যবহার করে একটি স্টাইল শীট ঢোকান এবং সরান।
  • কোড চালানোর জন্য একটি কীবোর্ড শর্টকাট ব্যবহার করুন।

শুরু করার আগে

এই গাইডটি ধরে নেয় যে আপনার কাছে মৌলিক ওয়েব ডেভেলপমেন্ট অভিজ্ঞতা আছে। এক্সটেনশন ডেভেলপমেন্ট ওয়ার্কফ্লো পরিচিতির জন্য আমরা হ্যালো ওয়ার্ল্ড চেক করার পরামর্শ দিই।

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

শুরু করতে, focus-mode নামে একটি নতুন ডিরেক্টরি তৈরি করুন যা এক্সটেনশনের ফাইলগুলিকে ধরে রাখবে। আপনি যদি পছন্দ করেন, আপনি GitHub থেকে সম্পূর্ণ সোর্স কোড ডাউনলোড করতে পারেন।

ধাপ 1: এক্সটেনশন ডেটা এবং আইকন যোগ করুন

manifest.json নামে একটি ফাইল তৈরি করুন এবং নিম্নলিখিত কোডটি অন্তর্ভুক্ত করুন।

{
  "manifest_version": 3,
  "name": "Focus Mode",
  "description": "Enable focus mode on Chrome's official Extensions and Chrome Web Store documentation.",
  "version": "1.0",
  "icons": {
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  }
}

এই ম্যানিফেস্ট কীগুলি সম্পর্কে আরও জানতে, "প্রতিটি ট্যাবে স্ক্রিপ্ট চালান" টিউটোরিয়ালটি দেখুন যা এক্সটেনশনের মেটাডেটা এবং আইকনগুলিকে আরও বিশদে ব্যাখ্যা করে৷

একটি images ফোল্ডার তৈরি করুন তারপর এতে আইকন ডাউনলোড করুন ।

ধাপ 2: এক্সটেনশন শুরু করুন

এক্সটেনশনগুলি এক্সটেনশনের পরিষেবা কর্মী ব্যবহার করে পটভূমিতে ব্রাউজার ইভেন্টগুলি নিরীক্ষণ করতে পারে৷ পরিষেবা কর্মীরা বিশেষ জাভাস্ক্রিপ্ট পরিবেশ যা ইভেন্টগুলি পরিচালনা করে এবং যখন তাদের প্রয়োজন হয় না তখন শেষ হয়।

manifest.json ফাইলে পরিষেবা কর্মী নিবন্ধন করে শুরু করুন:

{
  ...
  "background": {
    "service_worker": "background.js"
  },
  ...
}

background.js নামে একটি ফাইল তৈরি করুন এবং নিম্নলিখিত কোড যোগ করুন:

chrome.runtime.onInstalled.addListener(() => {
  chrome.action.setBadgeText({
    text: "OFF",
  });
});

আমাদের পরিষেবা কর্মী প্রথম যে ইভেন্টটি শুনবেন তা হল runtime.onInstalled() । এই পদ্ধতিটি এক্সটেনশনকে একটি প্রাথমিক অবস্থা সেট করতে বা ইনস্টলেশনের কিছু কাজ সম্পূর্ণ করতে দেয়। এক্সটেনশনগুলি অ্যাপ্লিকেশন স্টেট সংরক্ষণ করতে স্টোরেজ API এবং IndexedDB ব্যবহার করতে পারে। এই ক্ষেত্রে, যদিও, যেহেতু আমরা শুধুমাত্র দুটি স্টেট পরিচালনা করছি, তাই এক্সটেনশনটি 'চালু' বা 'বন্ধ' কিনা তা ট্র্যাক করতে আমরা অ্যাকশনের ব্যাজ টেক্সট নিজেই ব্যবহার করব।

ধাপ 3: এক্সটেনশন অ্যাকশন সক্রিয় করুন

এক্সটেনশন অ্যাকশন এক্সটেনশনের টুলবার আইকনকে নিয়ন্ত্রণ করে। সুতরাং যখনই ব্যবহারকারী এক্সটেনশন আইকনে ক্লিক করেন, এটি হয় কিছু কোড চালাবে (যেমন এই উদাহরণে) অথবা একটি পপআপ প্রদর্শন করবে। manifest.json ফাইলে এক্সটেনশন অ্যাকশন ঘোষণা করতে নিম্নলিখিত কোড যোগ করুন:

{
  ...
  "action": {
    "default_icon": {
      "16": "images/icon-16.png",
      "32": "images/icon-32.png",
      "48": "images/icon-48.png",
      "128": "images/icon-128.png"
    }
  },
  ...
}

ব্যবহারকারীর গোপনীয়তা রক্ষা করতে ActiveTab অনুমতি ব্যবহার করুন

activeTab অনুমতিটি সক্রিয় ট্যাবে কোড চালানোর জন্য এক্সটেনশনকে অস্থায়ী ক্ষমতা প্রদান করে। এটি বর্তমান ট্যাবের সংবেদনশীল বৈশিষ্ট্যগুলিতে অ্যাক্সেসের অনুমতি দেয়।

ব্যবহারকারী যখন এক্সটেনশনটি আহ্বান করে তখন এই অনুমতিটি সক্ষম হয়৷ এই ক্ষেত্রে, ব্যবহারকারী এক্সটেনশন অ্যাকশনে ক্লিক করে এক্সটেনশন আহ্বান করে।

💡 অন্য কোন ব্যবহারকারীর মিথস্ক্রিয়া আমার নিজের এক্সটেনশনে সক্রিয় ট্যাব অনুমতি সক্ষম করে?

  • একটি কীবোর্ড শর্টকাট সমন্বয় টিপুন।
  • একটি প্রসঙ্গ মেনু আইটেম নির্বাচন করা হচ্ছে।
  • অম্নিবক্স থেকে একটি পরামর্শ গ্রহণ করা হচ্ছে।
  • একটি এক্সটেনশন পপআপ খোলা হচ্ছে।

"activeTab" অনুমতি ব্যবহারকারীদের উদ্দেশ্যমূলকভাবে ফোকাস করা ট্যাবে এক্সটেনশন চালানোর জন্য বেছে নিতে দেয়; এইভাবে, এটি ব্যবহারকারীর গোপনীয়তা রক্ষা করে। আরেকটি সুবিধা হল এটি একটি অনুমতি সতর্কতা ট্রিগার করে না।

"activeTab" অনুমতি ব্যবহার করতে, এটি ম্যানিফেস্টের অনুমতি অ্যারেতে যোগ করুন:

{
  ...
  "permissions": ["activeTab"],
  ...
}

ধাপ 4: বর্তমান ট্যাবের অবস্থা ট্র্যাক করুন

ব্যবহারকারী এক্সটেনশন অ্যাকশনে ক্লিক করার পরে, এক্সটেনশনটি ইউআরএলটি একটি ডকুমেন্টেশন পৃষ্ঠার সাথে মেলে কিনা তা পরীক্ষা করবে। এর পরে, এটি বর্তমান ট্যাবের অবস্থা পরীক্ষা করবে এবং পরবর্তী অবস্থা সেট করবে। background.js এ নিম্নলিখিত কোড যোগ করুন:

const extensions = 'https://developer.chrome.com/docs/extensions'
const webstore = 'https://developer.chrome.com/docs/webstore'

chrome.action.onClicked.addListener(async (tab) => {
  if (tab.url.startsWith(extensions) || tab.url.startsWith(webstore)) {
    // Retrieve the action badge to check if the extension is 'ON' or 'OFF'
    const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
    // Next state will always be the opposite
    const nextState = prevState === 'ON' ? 'OFF' : 'ON'

    // Set the action badge to the next state
    await chrome.action.setBadgeText({
      tabId: tab.id,
      text: nextState,
    });
  }
});

ধাপ 5: স্টাইল শীট যোগ করুন বা সরান

এখন পৃষ্ঠার বিন্যাস পরিবর্তন করার সময়। focus-mode.css নামে একটি ফাইল তৈরি করুন এবং নিম্নলিখিত কোড অন্তর্ভুক্ত করুন:

body > .scaffold > :is(top-nav, navigation-rail, side-nav, footer),
main > :not(:last-child),
main > :last-child > navigation-tree,
main .toc-container {
  display: none;
}

main > :last-child {
  margin-top: min(10vmax, 10rem);
  margin-bottom: min(10vmax, 10rem);
}

স্ক্রিপ্টিং API ব্যবহার করে স্টাইল শীট সন্নিবেশ বা সরান। ম্যানিফেস্টে "scripting" অনুমতি ঘোষণা করে শুরু করুন:

{
  ...
  "permissions": ["activeTab", "scripting"],
  ...
}

অবশেষে, background.js এ পৃষ্ঠার বিন্যাস পরিবর্তন করতে নিম্নলিখিত কোড যোগ করুন:

  ...
    if (nextState === "ON") {
      // Insert the CSS file when the user turns the extension on
      await chrome.scripting.insertCSS({
        files: ["focus-mode.css"],
        target: { tabId: tab.id },
      });
    } else if (nextState === "OFF") {
      // Remove the CSS file when the user turns the extension off
      await chrome.scripting.removeCSS({
        files: ["focus-mode.css"],
        target: { tabId: tab.id },
      });
    }
  }
});

💡 আমি কি স্টাইল শীটের পরিবর্তে কোড ইনজেক্ট করতে স্ক্রিপ্টিং API ব্যবহার করতে পারি?

হ্যাঁ. আপনি জাভাস্ক্রিপ্ট ইনজেক্ট করতে scripting.executeScript() ব্যবহার করতে পারেন।

ঐচ্ছিক: একটি কীবোর্ড শর্টকাট বরাদ্দ করুন

শুধুমাত্র মজার জন্য, ফোকাস মোড সক্ষম বা অক্ষম করা সহজ করতে একটি শর্টকাট যোগ করুন। ম্যানিফেস্টে "commands" কী যোগ করুন।

{
  ...
  "commands": {
    "_execute_action": {
      "suggested_key": {
        "default": "Ctrl+B",
        "mac": "Command+B"
      }
    }
  }
}

"_execute_action" কীটি action.onClicked() ইভেন্টের মতো একই কোড চালায়, তাই কোনো অতিরিক্ত কোডের প্রয়োজন নেই।

এটি কাজ করে তা পরীক্ষা করুন

যাচাই করুন যে আপনার প্রকল্পের ফাইল গঠন নিম্নলিখিত মত দেখাচ্ছে:

ফোকাস মোড ফোল্ডারের বিষয়বস্তু: manifest.json, background.js, focus-mode.css, এবং ছবি ফোল্ডার।

স্থানীয়ভাবে আপনার এক্সটেনশন লোড করুন

ডেভেলপার মোডে একটি আনপ্যাক করা এক্সটেনশন লোড করতে, Hello World- এর ধাপগুলি অনুসরণ করুন৷

একটি ডকুমেন্টেশন পৃষ্ঠায় এক্সটেনশন পরীক্ষা করুন

প্রথমে নিচের যেকোনো একটি পেজ খুলুন:

তারপর, এক্সটেনশন অ্যাকশনে ক্লিক করুন। আপনি যদি একটি কীবোর্ড শর্টকাট সেট আপ করেন, আপনি Ctrl + B বা Cmd + B টিপে এটি পরীক্ষা করতে পারেন।

এটি থেকে যেতে হবে:

ফোকাস মোড এক্সটেনশন বন্ধ
ফোকাস মোড এক্সটেনশন বন্ধ

এর জন্য:

ফোকাস মোড এক্সটেনশন চালু
ফোকাস মোড এক্সটেনশন চালু করুন

🎯 সম্ভাব্য উন্নতি

আপনি আজ যা শিখেছেন তার উপর ভিত্তি করে, নিম্নলিখিতগুলির যেকোনটি সম্পন্ন করার চেষ্টা করুন:

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

নির্মাণ করতে থাকুন।

এই টিউটোরিয়ালটি শেষ করার জন্য অভিনন্দন 🎉। এই সিরিজের অন্যান্য টিউটোরিয়ালগুলি সম্পূর্ণ করার মাধ্যমে আপনার দক্ষতা বৃদ্ধি করা চালিয়ে যান:

এক্সটেনশন যা শিখবেন
পড়ার সময় স্বয়ংক্রিয়ভাবে পৃষ্ঠাগুলির একটি নির্দিষ্ট সেটে একটি উপাদান সন্নিবেশ করান।
ট্যাব ম্যানেজার একটি পপআপ তৈরি করতে যা ব্রাউজার ট্যাবগুলি পরিচালনা করে।

অন্বেষণ চালিয়ে যান

আমরা আশা করি আপনি এই ক্রোম এক্সটেনশনটি তৈরি করা উপভোগ করেছেন এবং আপনার এক্সটেনশন ডেভেলপমেন্ট শেখার যাত্রা চালিয়ে যেতে উত্তেজিত৷ আমরা নিম্নলিখিত শিক্ষার পথগুলি সুপারিশ করি:

  • বিকাশকারীর গাইডে উন্নত এক্সটেনশন তৈরির সাথে প্রাসঙ্গিক ডকুমেন্টেশনের টুকরোগুলির জন্য কয়েক ডজন অতিরিক্ত লিঙ্ক রয়েছে৷
  • খোলা ওয়েবে যা পাওয়া যায় তার বাইরেও এক্সটেনশনগুলির শক্তিশালী APIগুলিতে অ্যাক্সেস রয়েছে৷ Chrome API-এর ডকুমেন্টেশন প্রতিটি API-এর মধ্য দিয়ে চলে।