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:

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

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.

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:

{ 
  "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.

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

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:

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.

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