popup.js

// $(function () {
//   $("#form").submit(function (e) {
//     e.preventDefault();
//     if (e.target[0].value) {
//       $("img").remove();
//       $("#submit-button-google-chrome-extension").remove();
//       $(
//         `<img id="selected-image" src='${e.target[0].value}' style='width:400px;'>`
//       ).appendTo("body");
//       $(
//         `<div id="submit-button-google-chrome-extension" style="margin-top:10px;"><button>Submit</button></div>`
//       ).appendTo("body");

//       //image-onerror
//       document.getElementById("selected-image").onerror = function () {
//         alert("Please enter valid url");
//         e.target[0].value = "";
//         $("#selected-image").remove();
//         $("#submit-button-google-chrome-extension").remove();
//       };
//     } else {
//       alert("Please enter valid url");
//       e.target[0].value = "";
//       $("#selected-image").remove();
//       $("#submit-button-google-chrome-extension").remove();
//     }
//   });
// });

document.addEventListener("DOMContentLoaded", function () {
  document.querySelector("#config").addEventListener("click", function () {
    window.open(chrome.runtime.getURL("options.html"));
  });

  document.querySelector("#about").addEventListener("click", function () {
    window.open("https://github.com/igrigorik/videospeed");
  });

  document.querySelector("#feedback").addEventListener("click", function () {
    window.open("https://github.com/igrigorik/videospeed/issues");
  });

  document.querySelector("#enable").addEventListener("click", function () {
    toggleEnabled(true, settingsSavedReloadMessage);
  });

  document.querySelector("#disable").addEventListener("click", function () {
    toggleEnabled(false, settingsSavedReloadMessage);
  });

  chrome.storage.sync.get({ enabled: true }, function (storage) {
    toggleEnabledUI(storage.enabled);
  });

  function toggleEnabled(enabled, callback) {
    chrome.storage.sync.set(
      {
        enabled: enabled,
      },
      function () {
        toggleEnabledUI(enabled);
        if (callback) callback(enabled);
      }
    );
  }

  function toggleEnabledUI(enabled) {
    document.querySelector("#enable").classList.toggle("hide", enabled);
    document.querySelector("#disable").classList.toggle("hide", !enabled);

    // const suffix = `${enabled ? "" : "_disabled"}.png`;
    // chrome.browserAction.setIcon({
    //   path: {
    //     19: "icons/icon19" + suffix,
    //     38: "icons/icon38" + suffix,
    //     48: "icons/icon48" + suffix,
    //   },
    // });

    // chrome.browserAction.setIcon({
    //   path: "/icons/extension_icon.png",
    // });
  }

  function settingsSavedReloadMessage(enabled) {
    setStatusMessage(
      `${enabled ? "Enabled" : "Disabled"}. Reload page to see changes`
    );
  }

  function setStatusMessage(str) {
    const status_element = document.querySelector("#status");
    status_element.classList.toggle("hide", false);
    status_element.innerText = str;
  }
});