Creating an Options Page for Your Chrome Extension

⚙️ Creating an Options Page for Your Chrome Extension

An options page allows users to customize your extension's behavior. This guide covers everything you need to implement one.

❓ What is an Options Page?

An options page is a dedicated UI that lets users configure preferences and settings. It improves user experience by making your extension adaptable to their needs.

🛠️ Steps to Create an Options Page

1. Create the Options Page HTML

options.html:

<!DOCTYPE html>
<html>
<head><title>My Extension Options</title></head>
<body>
  <label>
    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>
  <button id="save">Save</button>
  <div id="status"></div>
  <script src="options.js"></script>
</body>
</html>

2. Create the Options Page JavaScript

options.js:

function save_options() {
  var color = document.getElementById('color').value;
  chrome.storage.sync.set({
    favoriteColor: color
  }, function() {
    var status = document.getElementById('status');
    status.textContent = 'Options saved.';
    setTimeout(function() {
      status.textContent = '';
    }, 750);
  });
}

function restore_options() {
  chrome.storage.sync.get({
    favoriteColor: 'red'
  }, function(items) {
    document.getElementById('color').value = items.favoriteColor;
  });
}

document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click', save_options);

3. Register the Options Page in `manifest.json`

{
  "options_page": "options.html"
}

🧪 Using Options in Your Extension

Access stored values in other scripts:

chrome.storage.sync.get({
  favoriteColor: 'red'
}, function(items) {
  console.log('The user\'s favorite color is ' + items.favoriteColor);
});

✅ Best Practices

Keep the UI simple and intuitive
Provide sensible default values
Use correct input types
Give immediate feedback on save
Allow configuration of API keys or endpoints when needed

🧾 Conclusion

Options pages give users control over how your extension behaves. You've now learned how to:

Create and register an options page
Save and restore preferences
Use preferences throughout your extension

Add flexibility and polish to your extension by implementing an options page today!

Happy building from the Mellowtel Team! 🎨

Creating an Options Page for Your Chrome Extension