Chrome-RTL/popup/popup.js

(() => {
  "use strict";

  const DEFAULTS = {
    enabled: true,
    fixDirection: true,
    useFont: true,
    fixInputs: true,
    disabledSites: []
  };

  const els = {
    host: document.getElementById("host"),
    status: document.getElementById("siteStatus"),
    thisSite: document.getElementById("thisSite"),
    fixDirection: document.getElementById("fixDirection"),
    useFont: document.getElementById("useFont"),
    fixInputs: document.getElementById("fixInputs"),
    enabled: document.getElementById("enabled")
  };

  let hostname = "";
  let supportedPage = false;
  let storageFailed = false;
  let state = { ...DEFAULTS };

  function pageInfo(url) {
    try {
      const parsed = new URL(url);
      const supported = (parsed.protocol === "http:" || parsed.protocol === "https:") && !!parsed.hostname;
      return { hostname: supported ? parsed.hostname : "", supported };
    } catch (error) {
      return { hostname: "", supported: false };
    }
  }

  function setDisabled(el, disabled) {
    el.disabled = disabled;
    const row = el.closest(".setting-row");
    if (row) row.classList.toggle("is-disabled", disabled);
  }

  function setStatus(text, tone) {
    els.status.textContent = text;
    els.status.dataset.tone = tone;
  }

  function render() {
    const siteDisabled = hostname ? state.disabledSites.includes(hostname) : false;
    const masterOff = !state.enabled;

    els.host.textContent = supportedPage ? hostname : "Unavailable";
    els.enabled.checked = !!state.enabled;
    els.thisSite.checked = supportedPage && !siteDisabled;
    els.fixDirection.checked = !!state.fixDirection;
    els.useFont.checked = !!state.useFont;
    els.fixInputs.checked = !!state.fixInputs;

    setDisabled(els.thisSite, storageFailed || masterOff || !supportedPage);
    setDisabled(els.fixDirection, storageFailed || masterOff);
    setDisabled(els.useFont, storageFailed || masterOff);
    setDisabled(els.fixInputs, storageFailed || masterOff);

    if (storageFailed) setStatus("Settings unavailable", "error");
    else if (!supportedPage) setStatus("This page cannot be modified", "error");
    else if (masterOff) setStatus("Extension paused everywhere", "paused");
    else if (siteDisabled) setStatus("Paused on this site", "paused");
    else setStatus("Persian correction active", "active");
  }

  function save(patch) {
    Object.assign(state, patch);
    chrome.storage.local.set(patch, () => {
      if (chrome.runtime.lastError) storageFailed = true;
      render();
    });
    render();
  }

  function init() {
    chrome.storage.local.get(DEFAULTS, (stored) => {
      if (chrome.runtime.lastError) storageFailed = true;
      else state = { ...DEFAULTS, ...stored };

      chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
        const info = pageInfo(tabs && tabs[0] ? tabs[0].url || "" : "");
        hostname = info.hostname;
        supportedPage = info.supported;
        render();
      });
    });
  }

  els.enabled.addEventListener("change", (event) => save({ enabled: event.target.checked }));
  els.fixDirection.addEventListener("change", (event) => save({ fixDirection: event.target.checked }));
  els.useFont.addEventListener("change", (event) => save({ useFont: event.target.checked }));
  els.fixInputs.addEventListener("change", (event) => save({ fixInputs: event.target.checked }));
  els.thisSite.addEventListener("change", (event) => {
    if (!hostname) return;
    const disabledSites = state.disabledSites.filter((site) => site !== hostname);
    if (!event.target.checked) disabledSites.push(hostname);
    save({ disabledSites });
  });

  chrome.storage.onChanged.addListener((changes, area) => {
    if (area !== "local") return;
    let changed = false;
    for (const key of Object.keys(DEFAULTS)) {
      if (changes[key]) {
        state[key] = changes[key].newValue;
        changed = true;
      }
    }
    if (changed) render();
  });

  init();
})();