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

ম্যানিফেস্ট সংস্করণ 1 ক্রোম 18-এ অবমুক্ত করা হয়েছে এবং ম্যানিফেস্ট সংস্করণ 1 সমর্থন সময়সূচী অনুযায়ী সমর্থন পর্যায়ক্রমে বন্ধ করা হবে। সংস্করণ 1 থেকে সংস্করণ 2 এ পরিবর্তন দুটি বিস্তৃত বিভাগের অধীনে পড়ে: API পরিবর্তন এবং নিরাপত্তা পরিবর্তন।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• আপনার এক্সটেনশন একটি পটভূমি পৃষ্ঠা ব্যবহার করে?

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

• একটি scripts বা page বৈশিষ্ট্য যোগ করুন যাতে পৃষ্ঠাটির কোড থাকে।

• একটি persistent সম্পত্তি যোগ করুন এবং আপনার পটভূমি পৃষ্ঠাকে একটি ইভেন্ট পৃষ্ঠায় রূপান্তর করতে এটি false সেট করুন

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

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

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

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

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

• আপনার এক্সটেনশন কি ওয়েব পৃষ্ঠাগুলিতে সামগ্রীর স্ক্রিপ্টগুলিকে ইনজেক্ট করে যা এক্সটেনশনের প্যাকেজে থাকা সংস্থানগুলি (যেমন চিত্র এবং স্ক্রিপ্ট) অ্যাক্সেস করতে হবে?

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

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

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

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

• JSON.parse() ব্যবহার করুন যদি আপনি JSON কোডকে কোনো বস্তুতে পার্স করছেন।

• একটি CSP-বান্ধব লাইব্রেরি ব্যবহার করুন, উদাহরণস্বরূপ, AngularJS ।

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

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

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

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

API পরিবর্তনের সারাংশ

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

ব্রাউজার কর্ম পরিবর্তন

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

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

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

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

• আপনি ব্যাজের উপর ঘোরার সময় টুলটিপে প্রদর্শিত পাঠ্যের জন্য default_name

• HTML পৃষ্ঠার জন্য default_popup যা ব্রাউজার কর্মের জন্য UI প্রতিনিধিত্ব করে (এবং এটি এখন একটি স্ট্রিং হতে হবে, এটি একটি বস্তু হতে পারে না)

পেজ অ্যাকশনে পরিবর্তন

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

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

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

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

• আপনি ব্যাজের উপর ঘোরার সময় টুলটিপে প্রদর্শিত পাঠ্যের জন্য default_name

• এইচটিএমএল পৃষ্ঠার জন্য default_popup যা পৃষ্ঠার কর্মের জন্য UI প্রতিনিধিত্ব করে (এবং এটি এখন একটি স্ট্রিং হতে হবে, এটি একটি বস্তু হতে পারে না)

সরানো এবং পরিবর্তিত APIs

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

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

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

ম্যানিফেস্ট সংস্করণ 1 থেকে সংস্করণ 2-এ যাওয়ার সাথে সাথে নিরাপত্তা-সম্পর্কিত বেশ কয়েকটি পরিবর্তন রয়েছে। এই পরিবর্তনগুলির মধ্যে অনেকগুলি Chrome-এর বিষয়বস্তু নিরাপত্তা নীতি গ্রহণের ফলে এসেছে; এর প্রভাব বোঝার জন্য আপনাকে এই নীতি সম্পর্কে আরও পড়তে হবে।

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

বিষয়বস্তু নিরাপত্তা নীতি ব্যবহারের কারণে, আপনি আর <script> ট্যাগগুলি ব্যবহার করতে পারবেন না যা HTML সামগ্রীর সাথে ইনলাইন। এগুলি অবশ্যই বাহ্যিক 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);

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

এম্বেডিং বিষয়বস্তু

এমন কিছু পরিস্থিতি রয়েছে যেখানে আপনার এক্সটেনশন এমন সামগ্রী এম্বেড করতে পারে যা বাহ্যিকভাবে ব্যবহার করা যেতে পারে বা একটি বাহ্যিক উত্স থেকে আসতে পারে৷

ওয়েব পৃষ্ঠাগুলিতে এক্সটেনশন সামগ্রী: যদি আপনার এক্সটেনশনটি সংস্থানগুলি (যেমন চিত্র, স্ক্রিপ্ট, সিএসএস শৈলী ইত্যাদি) এম্বেড করে যা ওয়েব পৃষ্ঠাগুলিতে ইনজেক্ট করা সামগ্রী স্ক্রিপ্টগুলিতে ব্যবহৃত হয়, তাহলে আপনাকে এই সংস্থানগুলিকে অনুমতি দেওয়ার জন্য web_accessible_resources বৈশিষ্ট্য ব্যবহার করতে হবে যাতে বহিরাগত ওয়েব পৃষ্ঠাগুলি তাদের ব্যবহার করতে পারে:

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

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

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

2. আপনি আপনার ম্যানিফেস্টের "content_security_policy" বিভাগে HTTPS এর উৎস তালিকাভুক্ত করার মাধ্যমে সীমিত উপায়ে CSP শিথিল করতে পারেন। গুগল অ্যানালিটিক্সের মতো একটি লাইব্রেরি অন্তর্ভুক্ত করতে, এটি নেওয়ার পদ্ধতি:

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

গতিশীল স্ক্রিপ্ট মূল্যায়ন ব্যবহার করে

সম্ভবত নতুন ম্যানিফেস্ট v2 স্কিমের সবচেয়ে বড় পরিবর্তনগুলির মধ্যে একটি হল যে এক্সটেনশনগুলি আর eval() বা নতুন Function() এর মতো গতিশীল স্ক্রিপ্ট মূল্যায়ন কৌশল ব্যবহার করতে পারে না বা JS কোডের স্ট্রিংগুলিকে ফাংশনে পাস করতে পারে না যা একটি eval() হতে পারে ব্যবহৃত, যেমন setTimeout() । উপরন্তু, কিছু সাধারণভাবে ব্যবহৃত জাভাস্ক্রিপ্ট লাইব্রেরি, যেমন Google মানচিত্র এবং নির্দিষ্ট টেমপ্লেটিং লাইব্রেরি, এই কৌশলগুলির কিছু ব্যবহার করার জন্য পরিচিত।

ক্রোম তাদের নিজস্ব মূলে চালানোর জন্য পৃষ্ঠাগুলির জন্য একটি স্যান্ডবক্স প্রদান করে, যেগুলি ক্রোমে অ্যাক্সেস অস্বীকার করে৷* APIs৷ নতুন বিষয়বস্তু নিরাপত্তা নীতির অধীনে eval() এবং এর মতো ব্যবহার করার জন্য:

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

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

আরও পড়া

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