Cómo puedo insertar CSS y Javascript en un iframe cargado en una extensión de Chrome

Question

Tengo un iframe en mi extensión de Chrome que carga un sitio web, me gustaría inyectar CSS y Javascript en el sitio web, pero solo cuando se carga en mi extensions iframe (para que no se vea afectado cuando el usuario navega por el sitio normalmente).

Me sorprendió que las extensiones de Chrome tengan aplicadas políticas de seguridad entre dominios cuando intentan acceder a las partes internas de un iframe, aunque pueden realizar solicitudes XHR entre dominios.

¿Hay una manera fácil de hacer esto? Pensé que podría hacerlo con executeScript, pero requiere una ID de pestaña.

Answer 1

La única manera de saber si se encuentra en una ifrmae es el window no es el top.

if (window == top) { 
    // Not in iframe 
} 
else { 
    // In an iframe 
} 

Solo puede hacer eso para las secuencias de comandos de contenido, no para las hojas de estilo. Lo que generalmente hago es dentro del script de contenido, verifico si no está en la ventana superior y luego continúo el script; de lo contrario, simplemente lo termino.

Crónica

1. inyectar la escritura de contenidos para dicho URL
2. En el guión de contenido, comprobar si la propiedad de la ventana, if (window != top) { loadContentScript() }
3. Cree el CSS en el código JavaScript si está demasiado preocupado Afectando. No deberías pensar si usas identificadores únicos.

Espero que haya sido de ayuda, lo hago por unas pocas extensiones mías.