content.js

(() => {
  if (window.__noReloadPageInstalled) {
    return;
  }

  window.__noReloadPageInstalled = true;
  let enabled = false;
  let stopTimer = null;

  const startNavigationStopper = () => {
    window.stop();

    if (stopTimer) {
      window.clearInterval(stopTimer);
    }

    const startedAt = Date.now();
    stopTimer = window.setInterval(() => {
      window.stop();

      for (const type of ["keydown", "keyup"]) {
        document.dispatchEvent(
          new KeyboardEvent(type, {
            key: "Escape",
            code: "Escape",
            keyCode: 27,
            which: 27,
            bubbles: true,
            cancelable: true
          })
        );
      }

      if (Date.now() - startedAt > 5000) {
        window.clearInterval(stopTimer);
        stopTimer = null;
      }
    }, 50);
  };

  const isSubmitControl = (element) => {
    if (!(element instanceof HTMLElement)) {
      return false;
    }

    const control = element.closest("button, input");
    if (!control) {
      return false;
    }

    const tag = control.tagName.toLowerCase();
    const type = (control.getAttribute("type") || "").toLowerCase();

    return (
      (tag === "button" && (type === "" || type === "submit")) ||
      (tag === "input" && (type === "submit" || type === "image"))
    );
  };

  const getFormMethod = (form, submitter) => {
    return (
      submitter?.getAttribute("formmethod") ||
      form.getAttribute("method") ||
      "get"
    ).toUpperCase();
  };

  const getFormAction = (form, submitter) => {
    return new URL(
      submitter?.getAttribute("formaction") || form.getAttribute("action") || window.location.href,
      window.location.href
    );
  };

  const getFormEncoding = (form, submitter) => {
    return (
      submitter?.getAttribute("formenctype") ||
      form.getAttribute("enctype") ||
      "application/x-www-form-urlencoded"
    ).toLowerCase();
  };

  const appendSubmitterValue = (formData, submitter) => {
    if (!submitter?.name || submitter.disabled) {
      return;
    }

    if (submitter.type === "image") {
      formData.append(`${submitter.name}.x`, "0");
      formData.append(`${submitter.name}.y`, "0");
      return;
    }

    formData.append(submitter.name, submitter.value);
  };

  const createPlainTextBody = (formData) => {
    return Array.from(formData.entries())
      .map(([key, value]) => `${key}=${value instanceof File ? value.name : value}`)
      .join("\r\n");
  };

  const submitWithoutNavigation = async (form, submitter) => {
    const method = getFormMethod(form, submitter);
    const action = getFormAction(form, submitter);
    const encoding = getFormEncoding(form, submitter);
    const formData = new FormData(form);
    appendSubmitterValue(formData, submitter);

    const init = {
      method,
      credentials: "include",
      redirect: "follow"
    };

    if (method === "GET") {
      action.search = new URLSearchParams(formData).toString();
    } else if (encoding === "multipart/form-data") {
      init.body = formData;
    } else if (encoding === "text/plain") {
      init.body = createPlainTextBody(formData);
      init.headers = { "Content-Type": "text/plain;charset=UTF-8" };
    } else {
      init.body = new URLSearchParams(formData);
      init.headers = {
        "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
      };
    }

    await fetch(action.toString(), init);
  };

  const handleSubmit = (event) => {
    if (!enabled) {
      return;
    }

    startNavigationStopper();
    event.preventDefault();
    submitWithoutNavigation(event.target, event.submitter).catch((error) => {
      console.warn("StayPut could not submit the form.", error);
    });
  };

  document.addEventListener(
    "click",
    (event) => {
      if (!enabled || !isSubmitControl(event.target)) {
        return;
      }

      startNavigationStopper();
    },
    true
  );

  document.addEventListener("submit", handleSubmit);

  window.addEventListener("beforeunload", () => {
    if (enabled) {
      startNavigationStopper();
    }
  });

  chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message?.type === "SET_ENABLED") {
      enabled = Boolean(message.enabled);
      sendResponse({ enabled });
    }
  });
})();