تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

منح المستخدمين خيارات

مثلما تسمح الإضافات للمستخدمين بتخصيص متصفح 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 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 الخاص بالإضافة:

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 (boolean): يشير هذا الإعداد إلى ما إذا كان سيتم فتح صفحة خيارات الإضافة في علامة تبويب جديدة أم لا. في حال ضبط السياسة على 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 بسبب عدم استضافة رمز الخيارات المضمّنة في علامة تبويب. استخدِم runtime.connect() وruntime.sendMessage() بدلاً من ذلك، إذا كانت صفحة الخيارات تحتاج إلى معالجة علامة التبويب التي تتضمن الفيديو.

واجهات برمجة تطبيقات المراسلة

إذا أرسلت صفحة خيارات الإضافة رسالة باستخدام runtime.connect() أو runtime.sendMessage()، لن يتم ضبط علامة تبويب المُرسِل، وسيكون عنوان URL للمُرسِل هو عنوان URL لصفحة الخيارات.

مقاسات الشعار

يجب أن تحدد الخيارات المضمّنة تلقائيًا حجمها وفقًا لمحتوى الصفحة. ومع ذلك، قد لا يجد المربع المضمّن حجمًا مناسبًا لبعض أنواع المحتوى. هذه المشكلة أكثر شيوعًا مع صفحات الخيارات التي تضبط شكل المحتوى الخاص بها بناءً على حجم النافذة.

إذا كانت هذه مشكلة، قدِّم حدًّا أدنى ثابتًا للأبعاد لصفحة الخيارات لضمان العثور على الحجم المناسب للصفحة المضمّنة.