همانطور که برنامه‌های افزودنی به کاربران اجازه می‌دهند مرورگر کروم را سفارشی کنند، صفحه گزینه‌ها نیز سفارشی‌سازی برنامه افزودنی را فعال می‌کند. از گزینه‌ها برای فعال کردن ویژگی‌ها استفاده کنید و به کاربران اجازه دهید تا انتخاب کنند چه عملکردی با نیازهایشان مرتبط است.
مکان یابی صفحه گزینه ها
کاربران می توانند با لینک مستقیم یا با کلیک راست بر روی نماد برنامه افزودنی در نوار ابزار و سپس انتخاب گزینه ها به صفحه گزینه ها دسترسی پیدا کنند. علاوه بر این، کاربران می‌توانند ابتدا با باز کردن chrome://extensions ، مکان‌یابی برنامه افزودنی مورد نظر، کلیک کردن روی جزئیات و سپس انتخاب پیوند گزینه‌ها، به صفحه گزینه‌ها بروید.
صفحه گزینه ها را بنویسید
نمونه زیر نمونه ای از صفحه گزینه ها است:
options.html:
<!DOCTYPE html>
<html>
<head>
<title>My Test Extension Options</title>
</head>
<body>
<select id="color">
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
<option value="yellow">yellow</option>
</select>
<label>
<input type="checkbox" id="like" />
I like colors.
</label>
<div id="status"></div>
<button id="save">Save</button>
<script src="options.js"></script>
</body>
</html>
در زیر نمونه ای از اسکریپت گزینه ها آورده شده است. آن را در همان پوشه به عنوان options.html ذخیره کنید. این گزینه‌های برگزیده کاربر را در دستگاه‌های با استفاده از storage.sync API ذخیره می‌کند.
options.js:
// Saves options to chrome.storage
const saveOptions = () => {
const color = document.getElementById('color').value;
const likesColor = document.getElementById('like').checked;
chrome.storage.sync.set(
{ favoriteColor: color, likesColor: likesColor },
() => {
// Update status to let user know options were saved.
const status = document.getElementById('status');
status.textContent = 'Options saved.';
setTimeout(() => {
status.textContent = '';
}, 750);
}
);
};
// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
const restoreOptions = () => {
chrome.storage.sync.get(
{ favoriteColor: 'red', likesColor: true },
(items) => {
document.getElementById('color').value = items.favoriteColor;
document.getElementById('like').checked = items.likesColor;
}
);
};
document.addEventListener('DOMContentLoaded', restoreOptions);
document.getElementById('save').addEventListener('click', saveOptions);
در نهایت، مجوز "storage" به فایل مانیفست افزونه اضافه کنید:
manifest.json:
{
"name": "My extension",
...
"permissions": [
"storage"
]
...
}
رفتار صفحه گزینه ها را اعلام کنید
دو نوع صفحه گزینه های افزونه وجود دارد، صفحه کامل و جاسازی شده . نوع صفحه گزینه ها بر اساس نحوه اعلام آن در مانیفست تعیین می شود.
گزینه های صفحه کامل
یک صفحه گزینه های کامل صفحه در یک برگه جدید نمایش داده می شود. فایل HTML گزینه ها را در مانیفست در قسمت "options_page" ثبت کنید.
manifest.json:
{
"name": "My extension",
...
"options_page": "options.html",
...
}
گزینه های تعبیه شده
یک صفحه گزینه های جاسازی شده به کاربران اجازه می دهد تا گزینه های برنامه افزودنی را بدون دور شدن از صفحه مدیریت برنامه های افزودنی در یک کادر تعبیه شده تنظیم کنند. برای اعلام گزینه‌های تعبیه‌شده، فایل HTML را در قسمت "options_ui" در مانیفست پسوند ثبت کنید و کلید "open_in_tab" را روی false تنظیم کنید.
manifest.json:
{
"name": "My extension",
...
"options_ui": {
"page": "options.html",
"open_in_tab": false
},
...
}
-
page(رشته) - مسیر صفحه گزینه ها را نسبت به ریشه برنامه افزودنی مشخص می کند.
-
open_in_tab(بولی) - نشان می دهد که آیا صفحه گزینه های برنامه افزودنی در یک برگه جدید باز می شود یا خیر. اگر روی
falseتنظیم شود، صفحه گزینه های برنامه افزودنی به جای باز شدن در یک برگه جدید، درchrome://extensionsجاسازی می شود.
تفاوت ها را در نظر بگیرید
صفحات گزینه‌های تعبیه‌شده در chrome://extensions تفاوت‌های رفتاری ظریفی با صفحات گزینه‌ها در برگه‌ها دارند.
به صفحه گزینه ها پیوند دهید
یک برنامه افزودنی می تواند با فراخوانی chrome.runtime.openOptionsPage() مستقیماً به صفحه گزینه ها پیوند دهد. به عنوان مثال، می توان آن را به یک پنجره اضافه کرد:
popup.html:
<button id="go-to-options">Go to options</button>
<script src="popup.js"></script>
popup.js:
document.querySelector('#go-to-options').addEventListener('click', function() {
if (chrome.runtime.openOptionsPage) {
chrome.runtime.openOptionsPage();
} else {
window.open(chrome.runtime.getURL('options.html'));
}
});
Tabs API
از آنجا که کد گزینه های جاسازی شده در یک برگه میزبانی نمی شود، Tabs API نمی تواند استفاده شود. به جای آن از runtime.connect() و runtime.sendMessage() استفاده کنید، اگر صفحه گزینه ها نیاز به دستکاری برگه حاوی دارد.
API های پیام رسانی
اگر صفحه گزینه های یک برنامه افزودنی با استفاده از runtime.connect() یا runtime.sendMessage() پیامی ارسال کند، برگه فرستنده تنظیم نخواهد شد و URL فرستنده URL صفحه گزینه ها خواهد بود.
سایز بندی
گزینه های تعبیه شده باید به طور خودکار اندازه خود را بر اساس محتوای صفحه تعیین کنند. با این حال، جعبه تعبیه شده ممکن است اندازه مناسبی برای برخی از انواع محتوا پیدا نکند. این مشکل بیشتر برای صفحات گزینه هایی که شکل محتوای خود را بر اساس اندازه پنجره تنظیم می کنند، رایج است.
اگر این مشکل است، حداقل ابعاد ثابت را برای صفحه گزینه‌ها ارائه کنید تا مطمئن شوید که صفحه جاسازی شده اندازه مناسبی پیدا می‌کند.