options.js

// Options page logic for Escape Hatch
(function () {
  'use strict';

  const enabledEl = document.getElementById('enabled');
  const listEl = document.getElementById('list');
  const addBtn = document.getElementById('add');
  const saveBtn = document.getElementById('save');
  const resetBtn = document.getElementById('reset');

  function createRow(entry) {
    const wrapper = document.createElement('div');
    wrapper.className = 'phrase';
    const find = document.createElement('input');
    find.type = 'text';
    find.placeholder = 'Find phrase';
    find.value = entry && (entry.find || '') || '';
    const replace = document.createElement('input');
    replace.type = 'text';
    replace.placeholder = 'Replace with';
    replace.value = entry && (entry.replace || '') || '';
    const del = document.createElement('button');
    del.textContent = 'Remove';
    del.addEventListener('click', () => wrapper.remove());
    wrapper.appendChild(find);
    wrapper.appendChild(replace);
    wrapper.appendChild(del);
    return wrapper;
  }

  function load() {
    chrome.storage.sync.get(['enabled', 'customPhrases'], (res) => {
  enabledEl.checked = res.enabled === true;
      listEl.innerHTML = '';
      let custom = Array.isArray(res.customPhrases) ? res.customPhrases : [];
      // If there are no saved custom phrases, attempt to fetch defaults.json and pre-populate inputs
      if (!custom.length) {
        const url = chrome.runtime.getURL('defaults.json');
        fetch(url).then(r => r.json()).then(defs => {
          if (Array.isArray(defs) && defs.length) {
            custom = defs.map(p => ({ find: p.find, replace: p.replace }));
          }
          for (const p of custom) listEl.appendChild(createRow(p));
        }).catch(() => {
          // On error, leave the list empty
        });
      } else {
        for (const p of custom) listEl.appendChild(createRow(p));
      }
    });
  }

  function save() {
    const nodes = Array.from(listEl.querySelectorAll('.phrase'));
    const custom = nodes.map(n => {
      const inputs = n.querySelectorAll('input[type="text"]');
      return { find: inputs[0].value.trim(), replace: inputs[1].value.trim() };
    }).filter(p => p.find && p.replace);
    chrome.storage.sync.set({ enabled: enabledEl.checked, customPhrases: custom }, () => {
      // notify
      saveBtn.textContent = 'Saved';
      setTimeout(() => saveBtn.textContent = 'Save', 1200);
    });
  }

  addBtn.addEventListener('click', () => listEl.appendChild(createRow()));
  saveBtn.addEventListener('click', save);
  resetBtn.addEventListener('click', () => {
    // reset custom phrases to empty and leave disabled by default
    chrome.storage.sync.set({ enabled: false, customPhrases: [] }, load);
  });

  // Initialize options UI
  document.addEventListener('DOMContentLoaded', load);

  function escapeHtml(s) {
    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  }
})();