A year ago, in May 2022, we added the side panel to Chrome. This is a new companion surface that allows users to use tools alongside the content they are browsing. Today, we're excited to announce that your extension can start showing content in the side panel, beginning in Chrome 114.
ব্যবহারকারীদের জন্য ভালো, ডেভেলপারদের জন্য সহজ
আমরা ইতিমধ্যেই অনেক ডেভেলপারকে তাদের এক্সটেনশনে সাইডবারের মতো অভিজ্ঞতা যুক্ত করতে দেখেছি, আর একারণেই আমরা এটিকে একটি প্ল্যাটফর্ম স্ট্যান্ডার্ড হিসেবে প্রতিষ্ঠা করতে পেরে রোমাঞ্চিত। নতুন সাইড প্যানেল এপিআই (Side Panel API)- এর মাধ্যমে, আপনি এখন একটি স্থায়ী ইউজার ইন্টারফেস (UI) প্রদান করতে পারবেন, যা ব্যবহারকারীর দেখা কোনো পেজের পাশেই খুলবে। এর ফলে ব্যবহারকারীরা বিভিন্ন এক্সটেনশনের মধ্যে সামঞ্জস্যপূর্ণ অবস্থান এবং লেআউটের সুবিধা পাবেন। এছাড়াও, হোস্ট পারমিশনের অনুরোধ না করেই ইউজার ইন্টারফেস দেখানোর এই সুবিধাটি ব্যবহারকারীদের জন্য গোপনীয়তা রক্ষায় একটি বড় সাফল্য, এবং এর সাথে বাড়তি সুবিধা হিসেবে ইনস্টলের সময় আপনার এক্সটেনশনের জন্য দেখানো সতর্কবার্তার সংখ্যাও কমে আসবে।
The Side Panel API eliminates the headaches associated with injecting content into an untrusted page. It also significantly reduces the requirement for maintaining compatibility across different sites and sifting through bug reports about accidental disruptions caused by your extension.
ওয়েব জুড়ে ব্যবহারকারীদের সঙ্গী
When building a new side panel experience as part of your extension, you need to keep one thing in mind: how are you assisting users to complete tasks across the web? Here are a few questions you should consider:
- আমার সাইড প্যানেলটি ব্যবহারকারীকে কীভাবে সাহায্য করে?
- The single-purpose policy also applies to your side panel. Make sure that your side panel provides functionality that directly relates to the rest of your extension and what the user is trying to achieve.
- আমার সাইড প্যানেলটি কি শুধু প্রাসঙ্গিক হলেই দেখা যায়?
- The Side Panel API lets you choose which sites your users will see the side panel on. This way you can avoid showing it when it isn't relevant to the user or it isn't related to the content the user is browsing.
- ডিজাইনটি কি আমার সম্প্রসারিত অংশের বাকি অংশের সাথে সামঞ্জস্যপূর্ণ?
- Your side panel should have a visually appealing design that matches the logo, colors, icons, and fonts of your extension and store listing. This provides users a consistent, recognizable experience wherever they are using your extension.
- ব্যবহারকারীরা কীভাবে আমার সাইড প্যানেলটি খুঁজে পায়?
- Let new users know how to use your side panel by providing sufficient documentation or training within the extension. This will help you retain users and avoid bad reviews in your store listing. Remember, you can start to teach users before they install the extension by including a YouTube video that shows how your extension works in your store listing!
আমরা আমাদের প্রোগ্রাম পলিসিও আপডেট করেছি এবং এই বিষয়গুলোর কিছু প্রতিফলন ঘটাতে আমাদের বেস্ট প্র্যাকটিসেস ও কোয়ালিটি গাইডলাইনস সেকশনগুলোতেও পরিবর্তন এনেছি। এই পরিবর্তনগুলো তুলে ধরে যে, আপনার সাইড প্যানেলটি পরিপূরক কার্যকারিতা প্রদানের মাধ্যমে ব্যবহারকারীদের ব্রাউজিং অভিজ্ঞতার একটি সহায়ক সঙ্গী হিসেবে কাজ করবে। এগুলো এটাও স্পষ্ট করে দেয় যে, আপনার সাইড প্যানেলে অপ্রয়োজনীয় কোনো মনোযোগ-বিঘ্নকারী উপাদান থাকা উচিত নয়।
এপিআই-এর একটি সংক্ষিপ্ত বিবরণ
For your extension to appear in the side panel, request the "sidePanel" permission in your manifest , and add the "side_panel" key with a "default_path" pointing to a page within your extension:
manifest.json:
{
...
"side_panel": {
"default_path": "sidepanel.html"
},
"permissions": [
"sidePanel"
]
...
}
On a side panel page, you can load scripts and call extension APIs as you would on any other extension page. The icon for your side panel will be taken from your extension's icon - don't forget to set that for an extra bit of polish.
অতিরিক্ত ক্ষমতা
আপনি সাইড প্যানেলটিকে আপনার অ্যাকশন আইকনের সাথে লিঙ্ক করতে পারেন, যাতে এটি যেকোনো সময় সহজেই খোলা যায়:
service-worker.js:
await chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
আপনি যদি চান আপনার সাইড প্যানেলটি শুধু নির্দিষ্ট কিছু পেজেই দেখাক, তাহলে আপনি তা নিয়ন্ত্রণ করতে পারেন এবং ব্যবহারকারীর জন্য অপ্রাসঙ্গিক অন্য কোথাও এর প্রদর্শন রোধ করতে পারেন:
service-worker.js:
chrome.tabs.onUpdated.addListener((tabId, info, tab) => {
if (!tab.url) return;
const url = new URL(tab.url);
if (url.origin === 'https://example.com') {
chrome.sidePanel.setOptions({ tabId, path: 'sidepanel.html', enabled: true });
} else {
chrome.sidePanel.setOptions({ tabId, enabled: false });
}
});
আরও জানুন
We've published the Side Panel API documentation which you can start reading today. We've also added samples to the chrome-extensions-samples repository, which is a great place to see how the API can be used in practice.
যেমনটি উল্লেখ করা হয়েছে, আপনার ব্যবহারকারীদের জন্য সেরা অভিজ্ঞতা প্রদানকারী একটি সাইড প্যানেল কীভাবে তৈরি করা যায় সে সম্পর্কে আরও তথ্য জানাতে আমাদের নীতি পৃষ্ঠা এবং সর্বোত্তম অনুশীলনগুলিও সংশোধন করা হয়েছে।
আপনি আমাদের 'What's new' পেজ ভিজিট করে ক্রোম এক্সটেনশনের খবরাখবর সম্পর্কে জানতে পারবেন, এবং সাইড প্যানেল এপিআই (Side Panel API) নিয়ে আপনার কোনো প্রশ্ন থাকলে বা সাহায্যের প্রয়োজন হলে, আপনি ক্রোমিয়াম এক্সটেনশন গুগল গ্রুপে (Chromium extensions Google Group) যেতে পারেন।