یک سال پیش، در ماه مه ۲۰۲۲، ما پنل کناری را به کروم اضافه کردیم. این یک سطح همراه جدید است که به کاربران امکان میدهد در کنار محتوایی که مرور میکنند، از ابزارها استفاده کنند. امروز، مفتخریم اعلام کنیم که افزونه شما میتواند از کروم ۱۱۴ به بعد، محتوا را در پنل کناری نمایش دهد.
برای کاربران بهتر، برای توسعهدهندگان آسانتر
ما قبلاً شاهد بودهایم که بسیاری از توسعهدهندگان، تجربههای شبیه به نوار کناری را در افزونههای خود پیادهسازی کردهاند، به همین دلیل است که ما از تبدیل آن به یک استاندارد پلتفرم هیجانزدهایم. با API جدید Side Panel ، اکنون میتوانید یک رابط کاربری پایدار ارائه دهید که در کنار صفحهای که کاربر بازدید میکند، باز میشود. کاربران از موقعیتیابی و چیدمان ثابت بین افزونهها بهرهمند خواهند شد. علاوه بر این، امکان نمایش رابط کاربری بدون درخواست مجوزهای میزبان، یک مزیت قابل توجه در حفظ حریم خصوصی برای کاربران است، با این مزیت اضافی که تعداد هشدارهایی را که برای افزونه شما در زمان نصب نشان داده میشود، کاهش میدهد.
رابط برنامهنویسی کاربردی پنل کناری (Side Panel API) دردسرهای مرتبط با تزریق محتوا به یک صفحه غیرقابل اعتماد را از بین میبرد. همچنین نیاز به حفظ سازگاری در سایتهای مختلف و بررسی گزارشهای باگ در مورد اختلالات تصادفی ناشی از افزونه شما را به میزان قابل توجهی کاهش میدهد.
همراهی برای کاربران در سراسر وب
هنگام ساخت یک تجربه پنل کناری جدید به عنوان بخشی از افزونه خود، باید یک نکته را در نظر داشته باشید: چگونه به کاربران کمک میکنید تا وظایف خود را در سراسر وب انجام دهند؟ در اینجا چند سوال وجود دارد که باید در نظر بگیرید:
- پنل کناری من چگونه به کاربر کمک میکند؟
- سیاست تکمنظوره بودن در مورد پنل کناری شما نیز اعمال میشود. مطمئن شوید که پنل کناری شما قابلیتهایی را ارائه میدهد که مستقیماً به بقیه افزونه شما و آنچه کاربر میخواهد به آن دست یابد، مرتبط است.
- آیا پنل کناری من فقط در مواقع مرتبط نمایش داده میشود؟
- API پنل کناری به شما امکان میدهد انتخاب کنید کاربرانتان پنل کناری را در کدام سایتها ببینند. به این ترتیب میتوانید از نمایش آن در مواقعی که به کاربر مربوط نیست یا به محتوایی که کاربر در حال مرور آن است مرتبط نیست، جلوگیری کنید.
- آیا طراحی با بقیهی بخشهای الحاقی من هماهنگ است؟
- پنل کناری شما باید از نظر بصری جذاب باشد و با لوگو، رنگها، آیکونها و فونتهای افزونه و فهرست فروشگاه شما مطابقت داشته باشد. این امر به کاربران در هر کجا که از افزونه شما استفاده میکنند، یک تجربه سازگار و قابل تشخیص میدهد.
- کاربران چگونه میتوانند پنل کناری من را پیدا کنند؟
- با ارائه مستندات یا آموزش کافی در افزونه، به کاربران جدید نحوه استفاده از پنل کناری خود را بیاموزید. این به شما کمک میکند تا کاربران را حفظ کنید و از نظرات منفی در فهرست فروشگاه خود جلوگیری کنید. به یاد داشته باشید، میتوانید قبل از نصب افزونه، با قرار دادن یک ویدیوی یوتیوب که نحوه عملکرد افزونه شما را در فهرست فروشگاه شما نشان میدهد، آموزش را به کاربران شروع کنید!
ما همچنین سیاستهای برنامه خود را بهروزرسانی کردهایم، و بهروزرسانیهایی در بخشهای «بهترین شیوهها» و «دستورالعملهای کیفیت» خود اعمال کردهایم تا برخی از این ملاحظات را منعکس کنیم. این تغییرات تأکید میکنند که پنل کناری شما باید با ارائه قابلیتهای مکمل، به عنوان یک همراه مفید برای تجربیات مرور کاربران عمل کند. همچنین روشن میکنند که پنل کناری شما نباید دارای عوامل حواسپرتی غیرضروری باشد.
مروری بر API
برای اینکه افزونه شما در پنل کناری نمایش داده شود، مجوز "sidePanel" را در مانیفست خود درخواست کنید و کلید "side_panel" را به همراه "default_path" که به صفحهای در افزونه شما اشاره میکند، اضافه کنید:
مانیفست.json:
{
...
"side_panel": {
"default_path": "sidepanel.html"
},
"permissions": [
"sidePanel"
]
...
}
در صفحه پنل کناری، میتوانید اسکریپتها را بارگذاری کنید و APIهای افزونه را مانند هر صفحه افزونه دیگری فراخوانی کنید. آیکون پنل کناری شما از آیکون افزونه شما گرفته خواهد شد - فراموش نکنید که برای زیبایی بیشتر، آن را تنظیم کنید.
قابلیتهای اضافی
میتوانید پنل کناری را به آیکون عملیات خود پیوند دهید تا در هر زمانی به راحتی باز شود:
سرویس-ورکر.js:
await chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
اگر میخواهید پنل کناری شما فقط در صفحات خاصی نمایش داده شود، میتوانید این موضوع را کنترل کنید و از نمایش آن در جاهای دیگر که برای کاربر مرتبط نیست، جلوگیری کنید:
سرویس-ورکر.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 });
}
});
بیشتر بدانید
ما مستندات API پنل کناری را منتشر کردهایم که میتوانید از امروز شروع به خواندن آن کنید. همچنین نمونههایی را به مخزن chrome-extensions-samples اضافه کردهایم که مکان بسیار خوبی برای مشاهده نحوه استفاده از API در عمل است.
همانطور که گفته شد، صفحات سیاستها و بهترین شیوههای ما نیز مورد بازنگری قرار گرفتهاند تا اطلاعات بیشتری در مورد نحوه ساخت یک پنل جانبی که بهترین تجربه را برای کاربران شما فراهم میکند، به اشتراک بگذارند.
شما میتوانید با مراجعه به صفحه «تازهها» از اخبار افزونههای کروم مطلع شوید و اگر سوالی دارید یا در مورد API پنل کناری به کمک نیاز دارید، میتوانید از گروه گوگل افزونههای کرومیوم دیدن کنید.