تمت ترجمة هذه الصفحة بواسطة 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.

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

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

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

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

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

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