2011-04-15 18 views
26

Mi extensión de Chrome necesita modificar ciertas reglas CSS en la página del usuario. Acceder a los estilos a través del document.styleSheets solo da acceso a estilos vinculados desde dentro del mismo dominio. Otros elementos de la matriz document.styleSheets tienen cssRules/rules establecido en nulo.cssLas reglas/reglas son nulas en Chrome

¿Por qué se aplica la política de dominios cruzados aquí? Los estilos se están aplicando de todos modos, independientemente de su origen, entonces, ¿cuál es el punto? ¿Y cómo evitarlo en mi caso?


EDIT:

La razón por la que tenga que modificar las reglas CSS de usuario (en oposición a la simple adición de la mía) es que necesito para proteger elemento personalizado inyectada por extensión se vea afectado por * reglas. see details in this question

+2

¿Te ayudaría hacer un restablecimiento total de CSS en todos los elementos que agregas? Tal vez esto ayude: http://stackoverflow.com/questions/4966030/how-not-to-inherit-styles-in-a- chrome-extension-content-script/4974909 – yonran

+1

Sí, estoy pensando un poco en la misma dirección. – artemave

+2

Puede usar el modificador! Important para anular otros estilos. – NoBugs

Respuesta

6

Los scripts de contenido no tienen ningún privilegio entre dominios en comparación con un javascript regular, por lo que se transfieren las limitaciones. Ver relacionado question #1, question #2.

Puede inyectarse su propio estilo CSS en el manifiesto:

"content_scripts": [ 
    { 
     "matches": ["http://www.google.com/*"], 
     "css": ["mystyles.css"] 
    } 
] 

donde se puede tratar de sobrescribir estilos originales mediante la definición de reglas con un mayor specificity.

también puede simplemente tweak concrete element styles través de javascript:

document.getElementById("id").style.property="value"; 
+0

He actualizado mi pregunta para indicar que la definición de mi propio CSS no es de mucha ayuda. – artemave

+1

Parece ser imposible, incluso cuando se agrega un encabezado Access-Control-Allow-Origin a la hoja de estilo, las reglas/cssrules son nulas si es de un dominio diferente. Una solución temporal, probablemente no aceptable en la mayoría de los casos, es obtener el contenido de la hoja de estilo a través de la solicitud ajax y anexar la respuesta a una etiqueta de estilo en el encabezado del documento. – CodeToad

+1

Aunque [respuesta interesante aquí] (http://stackoverflow.com/a/18471848/1028230), en la primera pregunta relacionada de serg: 'La única solución real a este problema es CORS cargar su CSS en primer lugar. Al usar un CORS xmlHTTPRequest para cargar el CSS desde un dominio externo, y luego inyectar el texto de respuesta ... ' – ruffin

0

me fijo mi versión del problema cambiando la URL de http: // a https: //. Doh!

Cuestiones relacionadas