Вот модифицированный код popup.js со встроенной функцией выбора background`а по ссылке на картинку и видео, а также с функцией постановки стандартного браузерного фона при нажатии на кнопку "Disable":

let backgrounds = {
  white: "#fff",
  gray: "#ddd",
  blue: "#0074D9"
};

function applyBackground(color) {
  let code = "document.body.style.backgroundColor = '" + backgrounds[color] + "';";
  browser.tabs.executeScript({code: code});
}

function applyImageBackground(url) {
  let code = "document.body.style.backgroundImage = 'url(" + url + ")';";
  browser.tabs.executeScript({code: code});
}

function applyVideoBackground(url) {
  let code = "document.body.innerHTML = '<video autoplay loop muted style=\"position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; z-index: -1;\"><source src=\"" + url + "\" type=\"video/mp4\"></video>'";
  browser.tabs.executeScript({code: code});
}

function resetBackground() {
  let code = "document.body.style.background = ''";
  browser.tabs.executeScript({code: code});
}

function togglePlugin() {
  browser.storage.local.get("enabled").then((result) => {
    let enabled = result.enabled === undefined ? true : !result.enabled;
    browser.storage.local.set({enabled: enabled});
    document.getElementById("toggle-button").textContent = enabled ? "Disable" : "Enable";
    if (enabled) {
      browser.storage.local.get("backgroundType").then((result) => {
        let backgroundType = result.backgroundType;
        if (backgroundType === "color") {
          browser.storage.local.get("backgroundColor").then((result) => {
            let backgroundColor = result.backgroundColor || "white";
            applyBackground(backgroundColor);
          });
        } else if (backgroundType === "image") {
          browser.storage.local.get("backgroundImageURL").then((result) => {
            let backgroundImageURL = result.backgroundImageURL;
            if (backgroundImageURL) {
              applyImageBackground(backgroundImageURL);
            }
          });
        } else if (backgroundType === "video") {
          browser.storage.local.get("backgroundVideoURL").then((result) => {
            let backgroundVideoURL = result.backgroundVideoURL;
            if (backgroundVideoURL) {
              applyVideoBackground(backgroundVideoURL);
            }
          });
        }
      });
    } else {
      resetBackground();
    }
  });
}

document.addEventListener("DOMContentLoaded", () => {
  let form = document.getElementById("options-form");
  form.addEventListener("submit", (e) => {
    e.preventDefault();
    let color = form.querySelector("input[name='background']:checked").value;
    browser.storage.local.set({backgroundType: "color", backgroundColor: color});
    applyBackground(color);
  });

  let imageForm = document.getElementById("image-form");
  imageForm.addEventListener("submit", (e) => {
    e.preventDefault();
    let url = imageForm.querySelector("input[name='image-url']").value;
    browser.storage.local.set({backgroundType: "image", backgroundImageURL: url});
    applyImageBackground(url);
  });

  let videoForm = document.getElementById("video-form");
  videoForm.addEventListener("submit", (e) => {
    e.preventDefault();
    let url = videoForm.querySelector("input[name='video-url']").value;
    browser.storage.local.set({backgroundType: "video", backgroundVideoURL: url});
    applyVideoBackground(url);
  });

  let button = document.getElementById("toggle-button");
  button.addEventListener("click", () => {
    togglePlugin();
  });

  browser.storage.local.get("enabled").then((result) => {
    let enabled = result.enabled === undefined ? true : result.enabled;
    browser.storage.local.set({enabled: enabled});
    document.getElementById("toggle-button").textContent = enabled ? "Disable" : "Enable";
    if (enabled) {
      browser.storage.local.get("backgroundType").then((result) => {
        let backgroundType = result.backgroundType;
        if (backgroundType === "color") {
          browser.storage.local.get("backgroundColor").then((result) => {
            let backgroundColor = result.backgroundColor || "white";
            applyBackground(backgroundColor);
          });
        } else if (backgroundType === "image") {
          browser.storage.local.get("backgroundImageURL").then((result) => {
            let backgroundImageURL = result.backgroundImageURL;
            if (backgroundImageURL) {
              applyImageBackground(backgroundImageURL);
            }
          });
        } else if (backgroundType === "video") {
          browser.storage.local.get("backgroundVideoURL").then((result) => {
            let backgroundVideoURL = result.backgroundVideoURL;
            if (backgroundVideoURL) {
              applyVideoBackground(backgroundVideoURL);
            }
          });
        }
      });
    } else {
      resetBackground();
    }
  });
});

В этом коде мы добавили функции для выбора backgroundа по ссылке на картинку и видео, а также функцию для постановки стандартного браузерного фона при нажатии на кнопку "Disable". Также мы добавили проверку на тип backgroundа при включении и выключении плагина, чтобы применять нужный стиль фона.


原文地址: https://www.cveoy.top/t/topic/bWLz 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录