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

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

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

בהמשך מופיע דף אפשרויות לדוגמה.

<!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>

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

// 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 (בוליאני)

    מציינים 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'));
  }
});

Tabs API

קוד של דף אפשרויות שמוטמע בתוסף לא מתארח בתוך כרטיסייה, ולכן יש השפעה על האופן שבו אפשר להשתמש ב-Tabs API:

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

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

Messaging APIs

אם דף האפשרויות של תוסף שולח הודעה באמצעות runtime.connect או runtime.sendMessage, הערך של Sender's tab לא יוגדר, והערך של Sender's URL יהיה כתובת ה-URL של דף האפשרויות.

התאמת גודל

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

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