[Resuelto] Como modificar el CSS desde javascript.

[zellion]

Buenos días:

Me estoy pegando con un código javascript para intentar cambiar el color del fondo de una web cuando se pulse un botón, pero no consigo que se realice el cambio.

Ahora mismo tengo un fichero con el nombre "manifest.json" para crear el botón en la barra de herramientas con el siguiente código:

Código (html4strict) [Seleccionar] Expandir


{

 "description": "Demostrando botones de la barra de herramientas",
 "manifest_version": 2,
 "name": "Prueba",
 "version": "1.0",

 "background": {
   "scripts": ["prueba.js"]
 },

 "browser_action": {
   "default_icon": {
 "16": "icons/prueba-16.png",
     "32": "icons/prueba-32.png"
   }
 }
}


Al mismo nivel tengo otro fichero que se llama "prueba.js" con el siguiente código:

Código (javascript) [Seleccionar] Expandir


function openPage() {
 browser.tabs.create({
   url: "https://www.google.es"
 });
 document.body.style.backgroundColor = "yellow";
}

browser.browserAction.onClicked.addListener(openPage);


La idea es que cuando pulse el botón de la barra de herramientas, abra el buscador de google con el fondo amarillo en una nueva pestaña, pero se realiza todo menos el background. ¿Sabéis a qué puede deberse?

He probado también con un "document.getElementById("userlogin").style.background" por pintar un campo concreto, pero se sigue quedando con el fondo blanco.

Muchas gracias.

Un saludo.

[MinusFour]

Tienes que obtener el objeto window del tab.

Código (javascript) [Seleccionar] Expandir


browser.tabs.create({
  url: "https://www.google.es"
})
.then(t => browser.windows.get(t.windowId))
.then(w => {
  let document = w.document;
  //lo que quieras hacer con el documento aquí.
});

[EdePC]

Saludos,

- Correcto, necesitas obtener el ID del Tab a manipular. En caso de Chrome hay que especificar permisos en el manifest.json, uno para manipular Tabs y otro para acceder al contenido de las páginas web:

Código (javascript) [Seleccionar] Expandir

{
  "description": "Demostrando botones de la barra de herramientas",
  "manifest_version": 2,
  "name": "Prueba",
  "version": "1.0",

  "permissions": ["tabs", "https://*/*"],

  "background": {
    "scripts": ["prueba.js"]
  },

  "browser_action": {
    "default_icon": {
    "16": "icons/prueba-16.png",
    "32": "icons/prueba-32.png"
    }
  }
}

- Luego, como siempre en caso de Chrome, la acción createTab no implica que se pueda acceder al DOM de la página que se carga en esa Tab, ya que dicho DOM apenas se estará creando, en este caso hay que poner un manejador de evento cuando se actualiza una Tab, revisar que corresponda al ID del Tab creado y que haya terminado de cargar.

Código (javascript) [Seleccionar] Expandir

var myTabId; // Guardará el ID del Tab creado

chrome.browserAction.onClicked.addListener(openPage);

chrome.tabs.onUpdated.addListener( function(tabId, ChangeInfo, tab) {
  if ( tabId === myTabId && tab.status === "complete") {
    chrome.tabs.executeScript(myTabId, {
      code: "document.body.style.backgroundColor = 'yellow'"
    });
  }
});

// Yo acostumbro poner las funciones abajo del todo ...
function openPage() {
  chrome.tabs.create({
    url: "https://www.google.es"
  }, function(tab) {
    myTabId = tab.id; // Guarda el ID del Tab creado
  });
}


- En mi Chrome funciona sin problemas. Viva Chrome! XD

[zellion]

Buenas chicos:

Muchas gracias voy a probar los códigos que habéis puesto y analizarlos.

@EdePC, se me olvidó comentar que lo estoy realizado para el navegador Firefox, entiendo que para este navegador no haría falta hacer las referencias como en Chrome, ¿no?

Un saludo.

[MinusFour]

Oops, el objeto window que te regresa el tabs no es el objeto global del tab. Si tienes que usar esos permisos que te ha dicho @EdePC

No necesitas usar el event listener de onUpdated:

Código (javascript) [Seleccionar] Expandir


function openPage() {
browser.tabs.create({
  url: "https://www.google.es"
})
.then(() => {
    browser.tabs.executeScript({
    code: `document.body.style.backgroundColor = 'yellow';`
  });
});
}
browser.browserAction.onClicked.addListener(openPage);

Esto funciona porque el script se carga por defecto después que el documento termina por cargarse completamente.

[EdePC]

- Será cosa de leer la documentación de la API, en caso de Chrome es solo cambiar browser por chrome, ya que chrome no usa browser:

Uncaught ReferenceError: browser is not defined

- Aunque el Script de MinusFour no me funciona en Chrome, supongo que chrome.tabs.create() no devuelve una Promesa y en Firefox si, o algo así lo checkeo más tarde y haber si me aventuro a ponerlo en Firefox, jeje, es mi primera Extensión .

Error in event handler: TypeError: Cannot read property 'then' of undefined prueba.js:5

function openPage() {
  chrome.tabs.create({
    url: "https://www.google.es"
  })
  .then(() => {
    chrome.tabs.executeScript({
      code: `document.body.style.backgroundColor = 'yellow';`
    });
  });
}

[zellion]

@MinusFour he probado el código facilitado y funciona a las mil maravillas. Voy intentar adaptarlo para hacer otras cosas, aparte de pintar el background.

@EdePC mañana lo implemento para Chrome, a ver que sale, ya que nunca me he pegado con esto .

Muchas gracias a los dos  .

Por cierto, entiendo que para desarrollar extensiones del estilo antes hay que leerse la documentación de los navegadores, ¿no? Por ejemplo:

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons

No obstante, voy a buscar un manual de javascript para refrescar memoria.

Un saludo.