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

כדי לאפשר למשתמשים להתאים אישית את ההתנהגות של תוסף, צריך לספק דף אפשרויות. המשתמש יכול לצפות אפשרויות של תוסף כלשהו באמצעות לחיצה ימנית על סמל התוסף בסרגל הכלים ולאחר מכן בחירה באפשרויות או ניווט לדף ניהול התוספים בכתובת 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>

שימוש ב-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 מוגדר לערך לא נכון.

{
  "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'));
  }
});

ממשק API של כרטיסיות

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

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

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

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

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

התאמת גודל

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

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