es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

La extensión de Chrome no está guardando el valor en el almacenamiento local.

24 Jul, 2023 Programación

Estoy tratando de crear mi propio tema de modo oscuro personalizado en Javascript, es una extensión de Chrome. Está casi terminado, el controlador de clic funciona muy bien, hace que el sitio web se oscurezca y viceversa. Sin embargo, quiero que guarde el valor para que si oscurezco la página web, siga siendo oscura incluso después de actualizar la página o abrir la misma página nuevamente (espero que tenga sentido). En este momento, una vez que actualizo la página, pierde el valor, por lo que si se aplica el modo oscuro, vuelve a ser blanco (y si abro la misma página, es blanco en la segunda pestaña). Adjunto las capturas de pantalla, ¿alguien podría decirme qué está mal o qué está causando el problema para que finalmente pueda terminar la extensión?

chrome.storage.sync.set({ key: "dark" }, function () {
  console.log("El valor se estableció en 'dark'");
});
chrome.storage.sync.get(["key"], function (result) {
  console.log("El valor actualmente es " + result.key);
});
// localStorage.setItem("darkMode", 1);
})();

Código del manifest.json:
{
  "name": "extensión de Chrome",
  "description": "Cambia entre modo oscuro y modo claro",
  "version": "1.0.0",
  "manifest_version": 2,
  "background": {
    "scripts": ["popup.js"],
    "persistent": true
  },
  "browser_action": {
    "default_title": "PYL",
    "default_popup": "popup.html"
  },
  "permissions": ["https://*/*", "http://*/*", "tabs", "storage", "activeTab"]
}
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para guardar el valor del tema de modo oscuro en la extensión de Chrome, puedes utilizar la API chrome.storage.sync. Esta API te permite almacenar y recuperar datos en varios dispositivos que hayan iniciado sesión en la misma cuenta de Google.

    Para guardar el valor, puedes utilizar la función chrome.storage.sync.set(), que toma como argumento un par de clave y valor. En este caso, puedes establecer la clave como “dark” y el valor como true o false dependiendo de si el modo oscuro está habilitado o deshabilitado.

    Para recuperar el valor guardado, puedes utilizar la función chrome.storage.sync.get(), que toma como argumento un array de claves. En este caso, puedes pasar un array con “key” como único elemento para recuperar el valor guardado bajo la clave “key”.

    Aquí tienes cómo puedes modificar el código para guardar y recuperar el valor del tema de modo oscuro:

    (() => {
  const toggleBtn = document.getElementById('toggle');

  toggleBtn.addEventListener('click', () => {
    const body = document.body;
    const isDarkMode = body.classList.toggle('dark');
    // Guardar el valor del tema de modo oscuro
    chrome.storage.sync.set({ darkMode: isDarkMode }, function () {
      console.log(`El valor se ha establecido como ${isDarkMode ? 'oscuro' : 'claro'}`);
    });
  });

  // Recuperar el valor del tema de modo oscuro
  chrome.storage.sync.get(['darkMode'], function (result) {
    const body = document.body;
    const isDarkMode = result.darkMode;
    if (isDarkMode) {
      body.classList.add('dark');
    } else {
      body.classList.remove('dark');
    }
    console.log(`El valor actualmente es ${isDarkMode ? 'oscuro' : 'claro'}`);
  });
})();

    Además, debes agregar el permiso “storage” al archivo manifest.json para permitir que la extensión utilice la API chrome.storage.sync. Así es cómo debería verse el manifest.json modificado:

    {
  "name": "extensión de Chrome",
  "description": "Cambiar entre modo oscuro y modo claro",
  "version": "1.0.0",
  "manifest_version": 2,
  "background": {
    "scripts": ["popup.js"],
    "persistent": true
  },
  "browser_action": {
    "default_title": "PYL",
    "default_popup": "popup.html"
  },
  "permissions": [
    "https://*/*",
    "http://*/*",
    "tabs",
    "storage",
    "activeTab"
  ]
}

Comments are closed.