همانطور که افزونه‌ها به کاربران امکان سفارشی‌سازی مرورگر کروم را می‌دهند، صفحه گزینه‌ها نیز امکان سفارشی‌سازی افزونه را فراهم می‌کند. از گزینه‌ها برای فعال کردن ویژگی‌ها استفاده کنید و به کاربران اجازه دهید انتخاب کنند که چه عملکردی با نیازهایشان مرتبط است.
پیدا کردن صفحه گزینه‌ها
کاربران می‌توانند از طریق لینک مستقیم یا با کلیک راست روی آیکون افزونه در نوار ابزار و سپس انتخاب گزینه‌ها، به صفحه گزینه‌ها دسترسی پیدا کنند. علاوه بر این، کاربران می‌توانند ابتدا با باز کردن chrome://extensions ، پیدا کردن افزونه مورد نظر، کلیک روی Details و سپس انتخاب لینک گزینه‌ها، به صفحه گزینه‌ها بروند.
صفحه گزینه‌ها را بنویسید
مثالی از صفحه گزینه‌ها در زیر آمده است:
گزینه‌ها.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 آمده است. آن را در همان پوشه options.html ذخیره کنید. این کار گزینه‌های مورد نظر کاربر را در دستگاه‌های مختلف با استفاده از storage.sync API ذخیره می‌کند.
options.js:
// Saves options to browser.storage
const saveOptions = () => {
const color = document.getElementById('color').value;
const likesColor = document.getElementById('like').checked;
browser.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 browser.storage.
const restoreOptions = () => {
browser.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" را به فایل مانیفست افزونه اضافه کنید:
مانیفست.json:
{
"name": "My extension",
...
"permissions": [
"storage"
]
...
}
رفتار صفحه گزینه‌ها را اعلام کنید
دو نوع صفحه گزینه‌های افزونه وجود دارد، تمام صفحه و جاسازی‌شده . نوع صفحه گزینه‌ها با نحوه اعلان آن در مانیفست تعیین می‌شود.
گزینه‌های تمام صفحه
یک صفحه کامل از گزینه‌های صفحه در یک برگه جدید نمایش داده می‌شود. فایل HTML گزینه‌ها را در قسمت "options_page" در مانیفست ثبت کنید.
مانیفست.json:
{
"name": "My extension",
...
"options_page": "options.html",
...
}
گزینه‌های تعبیه‌شده
یک صفحه گزینه‌های تعبیه‌شده به کاربران اجازه می‌دهد گزینه‌های افزونه را بدون نیاز به خروج از صفحه مدیریت افزونه‌ها در داخل یک کادر تعبیه‌شده تنظیم کنند. برای اعلام گزینه‌های تعبیه‌شده، فایل HTML را در زیر فیلد "options_ui" در مانیفست افزونه ثبت کنید و کلید "open_in_tab" را روی false تنظیم کنید.
مانیفست.json:
{
"name": "My extension",
...
"options_ui": {
"page": "options.html",
"open_in_tab": false
},
...
}
-
page(رشته) - مسیر صفحه گزینه‌ها را نسبت به ریشه افزونه مشخص می‌کند.
- تابع (boolean) برای باز کردن در تب (
open_in_tab) - نشان می‌دهد که آیا صفحه گزینه‌های افزونه در یک برگه جدید باز شود یا خیر. اگر روی
falseتنظیم شود، صفحه گزینه‌های افزونه به جای باز شدن در یک برگه جدید، درchrome://extensionsجاسازی می‌شود.
تفاوت‌ها را در نظر بگیرید
صفحات گزینه‌های تعبیه‌شده در chrome://extensions تفاوت‌های رفتاری ظریفی با صفحات گزینه‌ها در تب‌ها دارند.
لینک به صفحه گزینه‌ها
یک افزونه می‌تواند با فراخوانی browser.runtime.openOptionsPage() مستقیماً به صفحه گزینه‌ها لینک شود. برای مثال، می‌توان آن را به یک پنجره بازشو اضافه کرد:
پنجره.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 (browser.runtime.openOptionsPage) {
browser.runtime.openOptionsPage();
} else {
window.open(browser.runtime.getURL('options.html'));
}
});
API تب‌ها
از آنجا که کد گزینه‌های تعبیه‌شده در یک تب میزبانی نمی‌شود، نمی‌توان از Tabs API استفاده کرد. در صورت نیاز به دستکاری تب حاوی گزینه‌ها در صفحه، runtime.connect() و runtime.sendMessage() استفاده کنید.
APIهای پیام‌رسانی
اگر صفحه گزینه‌های یک افزونه با استفاده از runtime.connect() یا runtime.sendMessage() پیامی ارسال کند، تب فرستنده تنظیم نخواهد شد و آدرس اینترنتی فرستنده، آدرس اینترنتی صفحه گزینه‌ها خواهد بود.
اندازه
گزینه‌های تعبیه‌شده باید به‌طور خودکار اندازه خود را بر اساس محتوای صفحه تعیین کنند. با این حال، ممکن است کادر تعبیه‌شده برای برخی از انواع محتوا اندازه مناسبی پیدا نکند. این مشکل بیشتر برای صفحات گزینه‌ای که شکل محتوای خود را بر اساس اندازه پنجره تنظیم می‌کنند، رایج است.
اگر این یک مشکل است، حداقل ابعاد ثابتی را برای صفحه گزینه‌ها ارائه دهید تا مطمئن شوید که صفحه جاسازی‌شده اندازه مناسبی را پیدا می‌کند.