elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Introducción a Git (Primera Parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Resuelto] Como modificar el CSS desde javascript.
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Resuelto] Como modificar el CSS desde javascript.  (Leído 942 veces)
zellion

Desconectado Desconectado

Mensajes: 75



Ver Perfil
[Resuelto] Como modificar el CSS desde javascript.
« en: 29 Agosto 2019, 12:23 pm »

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
  1. {
  2.  
  3.  "description": "Demostrando botones de la barra de herramientas",
  4.  "manifest_version": 2,
  5.  "name": "Prueba",
  6.  "version": "1.0",
  7.  
  8.  "background": {
  9.    "scripts": ["prueba.js"]
  10.  },
  11.  
  12.  "browser_action": {
  13.    "default_icon": {
  14.  "16": "icons/prueba-16.png",
  15.      "32": "icons/prueba-32.png"
  16.    }
  17.  }
  18. }
  19.  

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

Código
  1. function openPage() {
  2.  browser.tabs.create({
  3.    url: "https://www.google.es"
  4.  });
  5.  document.body.style.backgroundColor = "yellow";
  6. }
  7.  
  8. browser.browserAction.onClicked.addListener(openPage);
  9.  

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.


« Última modificación: 9 Septiembre 2019, 20:57 pm por #!drvy » En línea

MinusFour
Moderador Global
***
Conectado Conectado

Mensajes: 5.166


I'm fourth.


Ver Perfil WWW
Re: [Consulta] Como modificar el CSS desde javascript.
« Respuesta #1 en: 29 Agosto 2019, 15:41 pm »

Tienes que obtener el objeto window del tab.

Código
  1. browser.tabs.create({
  2.  url: "https://www.google.es"
  3. })
  4. .then(t => browser.windows.get(t.windowId))
  5. .then(w => {
  6.  let document = w.document;
  7.  //lo que quieras hacer con el documento aquí.
  8. });


En línea

EdePC
Moderador Global
***
Desconectado Desconectado

Mensajes: 1.751



Ver Perfil
Re: [Consulta] Como modificar el CSS desde javascript.
« Respuesta #2 en: 29 Agosto 2019, 15:59 pm »

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
  1. {
  2.  "description": "Demostrando botones de la barra de herramientas",
  3.  "manifest_version": 2,
  4.  "name": "Prueba",
  5.  "version": "1.0",
  6.  
  7.  "permissions": ["tabs", "https://*/*"],
  8.  
  9.  "background": {
  10.    "scripts": ["prueba.js"]
  11.  },
  12.  
  13.  "browser_action": {
  14.    "default_icon": {
  15.    "16": "icons/prueba-16.png",
  16.    "32": "icons/prueba-32.png"
  17.    }
  18.  }
  19. }

- 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
  1. var myTabId; // Guardará el ID del Tab creado
  2.  
  3. chrome.browserAction.onClicked.addListener(openPage);
  4.  
  5. chrome.tabs.onUpdated.addListener( function(tabId, ChangeInfo, tab) {
  6.  if ( tabId === myTabId && tab.status === "complete") {
  7.    chrome.tabs.executeScript(myTabId, {
  8.      code: "document.body.style.backgroundColor = 'yellow'"
  9.    });
  10.  }
  11. });
  12.  
  13. // Yo acostumbro poner las funciones abajo del todo ...
  14. function openPage() {
  15.  chrome.tabs.create({
  16.    url: "https://www.google.es"
  17.  }, function(tab) {
  18.    myTabId = tab.id; // Guarda el ID del Tab creado
  19.  });
  20. }
  21.  

- En mi Chrome funciona sin problemas. Viva Chrome! XD
En línea

zellion

Desconectado Desconectado

Mensajes: 75



Ver Perfil
Re: [Consulta] Como modificar el CSS desde javascript.
« Respuesta #3 en: 29 Agosto 2019, 16:55 pm »

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.
En línea

MinusFour
Moderador Global
***
Conectado Conectado

Mensajes: 5.166


I'm fourth.


Ver Perfil WWW
Re: [Consulta] Como modificar el CSS desde javascript.
« Respuesta #4 en: 29 Agosto 2019, 17:49 pm »

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
  1. function openPage() {
  2. browser.tabs.create({
  3.  url: "https://www.google.es"
  4. })
  5. .then(() => {
  6.    browser.tabs.executeScript({
  7.    code: `document.body.style.backgroundColor = 'yellow';`
  8.  });
  9. });
  10. }
  11. browser.browserAction.onClicked.addListener(openPage);

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

EdePC
Moderador Global
***
Desconectado Desconectado

Mensajes: 1.751



Ver Perfil
Re: [Consulta] Como modificar el CSS desde javascript.
« Respuesta #5 en: 29 Agosto 2019, 18:27 pm »

- 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:

Citar
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 :xD.

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

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

zellion

Desconectado Desconectado

Mensajes: 75



Ver Perfil
Re: [Consulta] Como modificar el CSS desde javascript.
« Respuesta #6 en: 30 Agosto 2019, 00:35 am »

@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 :xD.

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.
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines