وكما تسمح الإضافات للمستخدمين بتخصيص متصفّح Chrome، تتيح صفحة الخيارات تخصيص الإضافة. استخدِم الخيارات لتفعيل الميزات والسماح للمستخدمين باختيار الوظائف التي تناسب احتياجاتهم.
العثور على صفحة الخيارات
يمكن للمستخدمين الوصول إلى صفحة الخيارات من خلال رابط مباشر أو من خلال النقر بزر الماوس الأيمن على رمز الإضافة في شريط الأدوات ثم اختيار "الخيارات". بالإضافة إلى ذلك، يمكن للمستخدمين الانتقال إلى صفحة الخيارات من خلال فتح 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.
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" إلى ملف البيان الخاص بالإضافة:
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 بشكل طفيف عن صفحات الخيارات في علامات التبويب.
رابط إلى صفحة الخيارات
يمكن أن ترتبط الإضافة مباشرةً بصفحة الخيارات من خلال استدعاء browser.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 (browser.runtime.openOptionsPage) {
browser.runtime.openOptionsPage();
} else {
window.open(browser.runtime.getURL('options.html'));
}
});
Tabs API
بما أنّ رمز الخيارات المضمّنة غير مستضاف في علامة تبويب، لا يمكن استخدام واجهة Tabs API.
استخدِم runtime.connect() وruntime.sendMessage() بدلاً من ذلك،
إذا كانت صفحة الخيارات بحاجة إلى تعديل علامة التبويب الحاوية.
واجهات برمجة التطبيقات الخاصة بالمراسلة
إذا أرسلت صفحة خيارات إحدى الإضافات رسالة باستخدام runtime.connect() أو runtime.sendMessage()، لن يتم ضبط علامة تبويب المُرسِل، وسيكون عنوان URL الخاص بالمُرسِل هو عنوان URL الخاص بصفحة الخيارات.
مقاسات الشعار
يجب أن تحدّد الخيارات المضمَّنة حجمها تلقائيًا استنادًا إلى محتوى الصفحة. ومع ذلك، قد لا يجد المربّع المضمّن حجمًا مناسبًا لبعض أنواع المحتوى. وتحدث هذه المشكلة غالبًا في صفحات الخيارات التي تعدّل شكل المحتوى استنادًا إلى حجم النافذة.
إذا كانت هذه مشكلة، قدِّم الحدّ الأدنى الثابت لأبعاد صفحة الخيارات لضمان أن تجد الصفحة المضمّنة حجمًا مناسبًا.