נותנים למשתמשים אפשרויות

המשתמשים יכולים להתאים אישית את ההתנהגות של תוסף על ידי הצגת דף אפשרויות. המשתמשים יכולים לראות את האפשרויות של תוסף מסוים בלחיצה ימנית על סמל התוסף בסרגל הכלים ובחירת אפשרויות, או על ידי מעבר לדף ניהול התוסף ב-chrome://extensions, איתור התוסף הרצוי, לחיצה על Details ובחירת הקישור לאפשרויות.

כתיבה של דף האפשרויות

לפניכם דף אפשרויות לדוגמה.

<!DOCTYPE html>
<html>
<head><title>My Test Extension Options</title></head>
<body>

Favorite color:
<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>

אפשר לשמור את האפשרויות המועדפות של משתמש במכשירים שונים באמצעות API storage.sync.

// Saves options to chrome.storage
function save_options() {
  var color = document.getElementById('color').value;
  var likesColor = document.getElementById('like').checked;
  chrome.storage.sync.set({
    favoriteColor: color,
    likesColor: likesColor
  }, function() {
    // Update status to let user know options were saved.
    var status = document.getElementById('status');
    status.textContent = 'Options saved.';
    setTimeout(function() {
      status.textContent = '';
    }, 750);
  });
}

// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
function restore_options() {
  // Use default value color = 'red' and likesColor = true.
  chrome.storage.sync.get({
    favoriteColor: 'red',
    likesColor: true
  }, function(items) {
    document.getElementById('color').value = items.favoriteColor;
    document.getElementById('like').checked = items.likesColor;
  });
}
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click',
    save_options);

ההתנהגות של דף האפשרויות להצהרה

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

אפשרויות בדף המלא

דף האפשרויות של תוסף יוצג בכרטיסייה חדשה. קובץ ה-HTML של האפשרויות מופיע מתחת לשדה options_page.

{
  "name": "My extension",
  ...
  "options_page": "options.html",
  ...
}

אפשרויות בדף המלא

אפשרויות מוטמעות

אפשרויות מוטמעות מאפשרות למשתמשים להתאים את האפשרויות של התוספים בלי לצאת מדף ניהול התוספים שבתיבה מוטמעת. כדי להצהיר על אפשרויות מוטמעות, צריך לרשום את קובץ ה-HTML בשדה options_ui במניפסט של התוסף, ולהגדיר את המפתח open_in_tab כ-False.

{
  "name": "My extension",
  ...
  "options_ui": {
    "page": "options.html",
    "open_in_tab": false
  },
  ...
}

אפשרויות מוטמעות

  • page (מחרוזת)

    נתיב לדף האפשרויות, ביחס לשורש התוסף.

  • open_in_tab (boolean)

    יש לציין כ-false כדי להצהיר על דף אפשרויות מוטמע. אם הערך הוא true, דף האפשרויות של התוסף ייפתח בכרטיסייה חדשה ולא יוטמע ב-chrome://extensions.

חשוב לשים לב להבדלים

לדפי אפשרויות שמוטמעים בתוך chrome://extensions יש כמה הבדלי התנהגות קלים הקשורים לכך שהם לא מתארחים בכרטיסיות שלהם.

קישור לדף האפשרויות

תוסף יכול לקשר ישירות לדף האפשרויות באמצעות התקשרות אל chrome.runtime.openOptionsPage() .

<button id="go-to-options">Go to options</button>

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:

  • tabs.query אף פעם לא ימצא כרטיסייה בכתובת ה-URL של דף האפשרויות של התוסף.
  • tabs.onCreated לא יופעל כשדף האפשרויות ייפתח.
  • tabs.onUpdated לא יופעל כאשר משתנה מצב הטעינה של דף האפשרויות.
  • לא ניתן להשתמש ב-tabs.connect או ב-tabs.sendMessage כדי לתקשר עם דף האפשרויות.

השימוש ב-runtime.connect וב-runtime.sendMessage תעקוף את ההגבלות האלה במקרים שבהם צריך לשנות את הכרטיסייה שמכילה בדף האפשרויות.

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

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

התאמת גודל

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

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