টিউটোরিয়াল: ম্যানিফেস্ট V2-এ মাইগ্রেট করুন

ক্রোম ১৮-এ ম্যানিফেস্ট ভার্সন ১ বাতিল করা হয়েছে এবং ম্যানিফেস্ট ভার্সন ১ সাপোর্ট শিডিউল অনুযায়ী এর সাপোর্ট পর্যায়ক্রমে বন্ধ করে দেওয়া হবে। ভার্সন ১ থেকে ভার্সন ২-এর পরিবর্তনগুলো দুটি প্রধান ভাগে বিভক্ত: এপিআই পরিবর্তন এবং নিরাপত্তা পরিবর্তন।

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

এপিআই পরিবর্তনের চেকলিস্ট

• আপনি কি browser_actions প্রপার্টি ব্যবহার করছেন নাকি chrome.browserActions API ব্যবহার করছেন?

• browser_actions একবচন browser_action প্রপার্টি দিয়ে প্রতিস্থাপন করুন।

• chrome.browserActions chrome.browserAction দিয়ে প্রতিস্থাপন করুন।

• ` icons প্রপার্টিটি default_icon দিয়ে প্রতিস্থাপন করুন।

• name প্রপার্টিটি default_title দিয়ে প্রতিস্থাপন করুন।

• popup প্রপার্টিটি default_popup দিয়ে প্রতিস্থাপন করুন (এবং এটি এখন অবশ্যই একটি স্ট্রিং হতে হবে)।

• আপনি কি page_actions প্রপার্টি ব্যবহার করছেন নাকি chrome.pageActions API ব্যবহার করছেন?

• page_actions page_action দিয়ে প্রতিস্থাপন করুন।

• chrome.pageActions chrome.pageAction দিয়ে প্রতিস্থাপন করুন।

• ` icons প্রপার্টিটি default_icon দিয়ে প্রতিস্থাপন করুন।

• name প্রপার্টিটি default_title দিয়ে প্রতিস্থাপন করুন।

• popup প্রপার্টিটি default_popup দিয়ে প্রতিস্থাপন করুন (এবং এটি এখন অবশ্যই একটি স্ট্রিং হতে হবে)।

• আপনি কি chrome.self প্রপার্টিটি ব্যবহার করছেন?

• chrome.extension দিয়ে প্রতিস্থাপন করুন।

• আপনি কি Port.tab প্রপার্টিটি ব্যবহার করছেন?

• Port.sender দিয়ে প্রতিস্থাপন করুন।

• আপনি কি chrome.extension.getTabContentses() অথবা chrome.extension.getExtensionTabs() এপিআই ব্যবহার করছেন?

• chrome.extension.getViews( { "type" : "tab" } ) দিয়ে প্রতিস্থাপন করুন।

• আপনার এক্সটেনশনটি কি কোনো ব্যাকগ্রাউন্ড পেজ ব্যবহার করে?

• background_page প্রপার্টিটিকে একটি background প্রপার্টি দিয়ে প্রতিস্থাপন করুন।

• একটি scripts বা page প্রপার্টি যোগ করুন যাতে পেজটির কোড থাকবে।

• আপনার ব্যাকগ্রাউন্ড পেজকে ইভেন্ট পেজে রূপান্তর করতে একটি persistent প্রপার্টি যোগ করুন এবং সেটিকে ফলস ( false সেট করুন।

নিরাপত্তা পরিবর্তনের চেকলিস্ট

• আপনি কি HTML পেজগুলিতে ইনলাইন স্ক্রিপ্ট ব্লক ব্যবহার করছেন?

• <script> ট্যাগের মধ্যে থাকা JS কোড সরিয়ে একটি বাহ্যিক JS ফাইলে রাখুন।

• আপনি কি ইনলাইন ইভেন্ট হ্যান্ডলার (যেমন onclick, ইত্যাদি) ব্যবহার করছেন?

• HTML কোড থেকে সেগুলোকে সরিয়ে একটি এক্সটার্নাল JS ফাইলে নিয়ে যান এবং এর পরিবর্তে addEventListener() ব্যবহার করুন।

• আপনার এক্সটেনশনটি কি এমন ওয়েব পেজগুলিতে কন্টেন্ট স্ক্রিপ্ট যুক্ত করে, যে পেজগুলির এক্সটেনশনটির প্যাকেজে থাকা রিসোর্স (যেমন ছবি এবং স্ক্রিপ্ট) অ্যাক্সেস করার প্রয়োজন হয়?

• web_accessible_resources প্রপার্টিটি সংজ্ঞায়িত করুন এবং রিসোর্সগুলো তালিকাভুক্ত করুন (এবং ঐচ্ছিকভাবে সেই রিসোর্সগুলোর জন্য একটি পৃথক কন্টেন্ট সিকিউরিটি পলিসিও যোগ করতে পারেন)।

• আপনার এক্সটেনশনটি কি বাহ্যিক ওয়েব পেজ এমবেড করে?

• স্যান্ডবক্স প্রপার্টিটি সংজ্ঞায়িত করুন।

• আপনার কোড বা লাইব্রেরি কি eval() , new Function() , innerHTML , setTimeout() ব্যবহার করছে, অথবা অন্য কোনোভাবে এমন JS কোডের স্ট্রিং পাস করছে যা ডাইনামিকভাবে ইভ্যালুয়েট করা হয়?

• JSON কোডকে কোনো অবজেক্টে পার্স করতে হলে JSON.parse() ব্যবহার করুন।

• একটি CSP-বান্ধব লাইব্রেরি ব্যবহার করুন, যেমন AngularJS ।

• আপনার ম্যানিফেস্টে একটি স্যান্ডবক্স এন্ট্রি তৈরি করুন এবং স্যান্ডবক্সে থাকা পেজটির সাথে যোগাযোগের জন্য postMessage() ব্যবহার করে সংশ্লিষ্ট কোডটি চালান।

• আপনি কি jQuery বা Google Analytics-এর মতো কোনো বাহ্যিক কোড লোড করছেন?

• লাইব্রেরিটি ডাউনলোড করে আপনার এক্সটেনশনে প্যাকেজ করার কথা বিবেচনা করুন, তারপর স্থানীয় প্যাকেজ থেকে এটি লোড করুন।

• আপনার ম্যানিফেস্টের "content_security_policy" অংশে, যে HTTPS ডোমেইনটি রিসোর্সটি পরিবেশন করে, সেটিকে Allowlist-এ অন্তর্ভুক্ত করুন।

এপিআই পরিবর্তনের সারাংশ

ম্যানিফেস্ট ভার্সন ২ ব্রাউজার অ্যাকশন এবং পেজ অ্যাকশন এপিআই-গুলোতে কিছু পরিবর্তন এনেছে এবং কয়েকটি পুরোনো এপিআই-কে নতুন এপিআই দিয়ে প্রতিস্থাপন করেছে।

ব্রাউজার ক্রিয়াকলাপগুলিতে পরিবর্তন

ব্রাউজার অ্যাকশন এপিআই কিছু নামকরণের পরিবর্তন এনেছে:

• browser_actions এবং chrome.browserActions প্রপার্টিগুলোকে তাদের একক রূপ browser_action এবং chrome.browserAction দ্বারা প্রতিস্থাপন করা হয়েছে।

• পুরানো browser_actions প্রপার্টির অধীনে icons , name , এবং popup প্রপার্টি ছিল। এগুলিকে প্রতিস্থাপন করা হয়েছে:

• ব্রাউজার অ্যাকশন ব্যাজ আইকনের জন্য default_icon

• ব্যাজের উপর মাউস হোভার করলে টুলটিপে যে লেখাটি প্রদর্শিত হয়, তার default_name

• ব্রাউজার অ্যাকশনের UI উপস্থাপনকারী HTML পৃষ্ঠার জন্য default_popup (এবং এটি এখন অবশ্যই একটি স্ট্রিং হতে হবে, কোনো অবজেক্ট হতে পারবে না)

পৃষ্ঠার ক্রিয়াকলাপগুলিতে পরিবর্তন

ব্রাউজার অ্যাকশনের পরিবর্তনের মতোই, পেজ অ্যাকশন এপিআই-তেও পরিবর্তন আনা হয়েছে:

• page_actions এবং chrome.pageActions প্রপার্টিগুলোকে তাদের একক রূপ page_action এবং chrome.pageAction দ্বারা প্রতিস্থাপন করা হয়েছে।

• পুরানো page_actions প্রপার্টির অধীনে icons , name , এবং popup প্রপার্টি ছিল। এগুলিকে প্রতিস্থাপন করা হয়েছে:

• পেজ অ্যাকশন ব্যাজ আইকনের জন্য default_icon

• ব্যাজের উপর মাউস হোভার করলে টুলটিপে যে লেখাটি প্রদর্শিত হয়, তার default_name

• পেজ অ্যাকশনের UI উপস্থাপনকারী HTML পেজের জন্য default_popup (এবং এটি এখন অবশ্যই একটি স্ট্রিং হতে হবে, কোনো অবজেক্ট হতে পারবে না)

এপিআইগুলি সরানো এবং পরিবর্তন করা হয়েছে

কয়েকটি এক্সটেনশন এপিআই সরিয়ে নতুন সংস্করণ দিয়ে প্রতিস্থাপন করা হয়েছে:

• background_page প্রপার্টিটি `background` দ্বারা প্রতিস্থাপিত হয়েছে।
• chrome.self প্রপার্টিটি সরিয়ে দেওয়া হয়েছে, এর পরিবর্তে chrome.extension ব্যবহার করুন।
• Port.tab প্রপার্টিটি Port.sender দ্বারা প্রতিস্থাপিত হয়েছে।
• chrome.extension.getTabContentses() এবং chrome.extension.getExtensionTabs() API-গুলোকে chrome.extension.getViews( { "type" : "tab" } ) দ্বারা প্রতিস্থাপন করা হয়েছে।

নিরাপত্তা পরিবর্তনের সারসংক্ষেপ

ম্যানিফেস্ট ভার্সন ১ থেকে ভার্সন ২-এ আপগ্রেড করার সাথে সাথে বেশ কিছু নিরাপত্তা-সংক্রান্ত পরিবর্তন এসেছে। এই পরিবর্তনগুলোর বেশিরভাগই ক্রোমের কন্টেন্ট সিকিউরিটি পলিসি (Content Security Policy) গ্রহণের ফল; এর প্রভাবগুলো বোঝার জন্য আপনার এই পলিসি সম্পর্কে আরও পড়া উচিত।

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

কন্টেন্ট সিকিউরিটি পলিসি ব্যবহারের কারণে, আপনি এখন আর HTML কন্টেন্টের সাথে ইনলাইন <script> ট্যাগ ব্যবহার করতে পারবেন না। এগুলোকে অবশ্যই এক্সটার্নাল JS ফাইলে স্থানান্তর করতে হবে। এছাড়াও, ইনলাইন ইভেন্ট হ্যান্ডলারও সমর্থিত নয়। উদাহরণস্বরূপ, ধরুন আপনার এক্সটেনশনে নিম্নলিখিত কোডটি ছিল:

<html>
<head>
  <script>
    function myFunc() { ... }
  </script>
</head>
</html>

এই কোডটি রানটাইমে একটি ত্রুটি সৃষ্টি করবে। এটি সমাধান করতে, <script> ট্যাগের বিষয়বস্তু বাহ্যিক ফাইলে সরিয়ে নিন এবং src='path_to_file.js' অ্যাট্রিবিউট দিয়ে সেগুলোকে রেফারেন্স করুন।

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

<body onload="initialize()">
<button onclick="handleClick()" id="button1">

এগুলো ম্যানিফেস্ট V2 এক্সটেনশনে কাজ করবে না। ইনলাইন ইভেন্ট হ্যান্ডলারগুলো সরিয়ে ফেলুন, সেগুলোকে আপনার এক্সটার্নাল JS ফাইলে রাখুন এবং তার পরিবর্তে সেগুলোর জন্য ইভেন্ট হ্যান্ডলার রেজিস্টার করতে addEventListener() ব্যবহার করুন। উদাহরণস্বরূপ, আপনার JS কোডে ব্যবহার করুন:

window.addEventListener("load", initialize);
...
document.getElementById("button1").addEventListener("click",handleClick);

এটি আপনার এক্সটেনশনের আচরণকে তার ইউজার ইন্টারফেস মার্কআপ থেকে আলাদা করার একটি অনেক বেশি পরিচ্ছন্ন উপায়।

বিষয়বস্তু এমবেড করা

কিছু ক্ষেত্রে আপনার এক্সটেনশন এমন কন্টেন্ট এমবেড করতে পারে যা বাহ্যিকভাবে ব্যবহার করা যায় বা কোনো বাহ্যিক উৎস থেকে আসতে পারে।

ওয়েব পেজে এক্সটেনশনের কন্টেন্ট: যদি আপনার এক্সটেনশন এমন রিসোর্স (যেমন ছবি, স্ক্রিপ্ট, CSS স্টাইল ইত্যাদি) এমবেড করে যা ওয়েব পেজে ইনজেক্ট করা কন্টেন্ট স্ক্রিপ্টে ব্যবহৃত হয়, তাহলে আপনাকে web_accessible_resources প্রপার্টি ব্যবহার করে এই রিসোর্সগুলোকে allowlist করতে হবে, যাতে বাইরের ওয়েব পেজগুলো সেগুলো ব্যবহার করতে পারে।

{
...
  "web_accessible_resources": [
    "images/image1.png",
    "script/myscript.js"
  ],
...
}

বাহ্যিক কন্টেন্ট এমবেড করা: কন্টেন্ট সিকিউরিটি পলিসি আপনার প্যাকেজ থেকে শুধুমাত্র লোকাল স্ক্রিপ্ট এবং অবজেক্ট লোড করার অনুমতি দেয়, যা বাহ্যিক আক্রমণকারীদের আপনার এক্সটেনশনে অজানা কোড প্রবেশ করানো থেকে বিরত রাখে। তবে, এমন সময় আসে যখন আপনি বাহ্যিকভাবে পরিবেশিত রিসোর্স, যেমন jQuery বা Google Analytics কোড লোড করতে চান। এটি করার দুটি উপায় আছে:

1. প্রাসঙ্গিক লাইব্রেরিটি (যেমন jQuery) স্থানীয়ভাবে ডাউনলোড করুন এবং আপনার এক্সটেনশনের সাথে প্যাকেজ করুন।

2. আপনার ম্যানিফেস্টের 'content_security_policy' বিভাগে HTTPS অরিজিনগুলোকে allowlisting করার মাধ্যমে আপনি সীমিতভাবে CSP শিথিল করতে পারেন। Google Analytics-এর মতো কোনো লাইব্রেরি অন্তর্ভুক্ত করার জন্য এই পদ্ধতিটি অনুসরণ করতে হবে:

   {
     ...,
     "content_security_policy": "script-src 'self'
     https://ssl.google-analytics.com; object-src 'self'",
     ...
   }
   

ডায়নামিক স্ক্রিপ্ট মূল্যায়ন ব্যবহার করে

নতুন ম্যানিফেস্ট v2 স্কিমের সম্ভবত সবচেয়ে বড় পরিবর্তনগুলোর মধ্যে একটি হলো, এক্সটেনশনগুলো এখন আর eval() বা new Function() এর মতো ডাইনামিক স্ক্রিপ্ট ইভ্যালুয়েশন কৌশল ব্যবহার করতে পারবে না, অথবা setTimeout() এর মতো ফাংশনে JS কোডের স্ট্রিং পাস করতে পারবে না, যা eval() ব্যবহার করতে বাধ্য করবে। এছাড়াও, গুগল ম্যাপস এবং কিছু টেমপ্লেটিং লাইব্রেরির মতো কিছু বহুল ব্যবহৃত জাভাস্ক্রিপ্ট লাইব্রেরি এই কৌশলগুলোর কয়েকটি ব্যবহার করে থাকে বলে জানা যায়।

ক্রোম পেজগুলির জন্য তাদের নিজস্ব অরিজিনে চলার জন্য একটি স্যান্ডবক্স প্রদান করে, যেখান থেকে chrome.* API-গুলিতে অ্যাক্সেস পাওয়া যায় না। নতুন কন্টেন্ট সিকিউরিটি পলিসির অধীনে eval() এবং এই জাতীয় ফাংশন ব্যবহার করার জন্য:

1. আপনার ম্যানিফেস্ট ফাইলে একটি স্যান্ডবক্স এন্ট্রি তৈরি করুন।
2. স্যান্ডবক্স এন্ট্রিতে, আপনি স্যান্ডবক্সে যে পেজগুলো চালাতে চান সেগুলোর তালিকা দিন।
3. স্যান্ডবক্সড পেজের সাথে যোগাযোগের জন্য postMessage() এর মাধ্যমে মেসেজ পাসিং ব্যবহার করুন।

এটি কীভাবে করতে হয় সে সম্পর্কে আরও বিস্তারিত জানতে, স্যান্ডবক্সিং ইভ্যাল ডকুমেন্টেশন দেখুন।

আরও পড়ুন

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