דף זה תורגם על ידי 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. הפעולה הזו שומרת את האפשרויות המועדפות על המשתמש במכשירים שונים באמצעות ה-API 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 (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'));
  }
});

API לכרטיסיות

מכיוון שקוד האפשרויות המוטמעות לא מתארח בכרטיסייה, לא ניתן להשתמש ב-Tabs API. במקום זאת, השתמשו ב-runtime.connect() וב-runtime.sendMessage(), אם דף האפשרויות צריך לשנות את הכרטיסייה שמכילה.

ממשקי API להעברת הודעות

אם נשלחת הודעה מדף האפשרויות של התוסף באמצעות runtime.connect() או runtime.sendMessage(), כרטיסיית השולח לא תוגדר, וכתובת ה-URL של השולח תהיה כתובת ה-URL של דף האפשרויות.

התאמת גודל

האפשרויות המוטמעות אמורות לקבוע באופן אוטומטי את הגודל שלהן על סמך תוכן הדף. עם זאת, יכול להיות שהתיבה המוטמעת לא תמצא גודל מתאים לסוגים מסוימים של תוכן. הבעיה הזו נפוצה במיוחד בדפי אפשרויות שמשנים את צורת התוכן שלהם בהתאם לגודל החלון.

אם זו בעיה, יש לספק מידות מינימליות קבועות לדף האפשרויות כדי לוודא שבדף המוטמע יוצג גודל מתאים.