FirefoxExtension/options.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My Font Changer Options</title>
  </head>
  <body>
    <h1>Choose a font:</h1>
    <select id="font-selector">
      <option value="Arial, sans-serif">Arial</option>
      <option value="Times New Roman, serif">Times New Roman</option>
      <option value="Courier New, monospace">Courier New</option>
    </select>
    <br><br>
    <button id="save-button">Save</button>
    <div id="switchToContrast"><a href="image_converter.html">Switch to change contrast</a></div>
    
    <script>
      // When the save button is clicked, save the selected font preference
      document.getElementById('save-button').addEventListener('click', function() {
        var selectedFont = document.getElementById('font-selector').value;
        browser.storage.sync.set({font: selectedFont});
      });

      // Load the saved font preference, if any, when the options page is opened
      browser.storage.sync.get('font').then(function(result) {
        var selectedFont = result.font;
        if (selectedFont) {
          document.getElementById('font-selector').value = selectedFont;
        }
      });
    </script>
  </body>
</html>