Tutorials

How to Create an Options Page for Your Chrome Extension

Learn how to create a Chrome extension options page, register it in manifest.json, save user preferences, and restore settings with chrome.storage.

Mellowtel

— 1 min read
Share

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

Read more