Aislamiento de CSS para la extensión de Chrome

Estoy construyendo una extensión de Chrome que realiza algunas inyecciones de IU mediante secuencias de comandos de contenido. El problema es que dado que cada sitio web es diferente y puede tratar de arruinarse con el posicionamiento predeterminado de ciertos elementos (divs, listas), etc., mi interfaz de usuario se ve diferente dependiendo de la página que se está utilizando.Aislamiento de CSS para la extensión de Chrome

He intentado usar el reinicio de YUI v3 y eso ayudó pero no eliminó todas las rarezas. ¿Alguien sabe de un método de reinicio aún más agresivo que no solo limpie el margen/relleno y restablezca el tamaño del texto?

Gracias de antemano.

Fuente

2011-02-28 Rui Jiang

-2

Es por eso que debe inyectar en document_end. Puede hacerlo configurando "run_at": "document_end" en el Content Script Manifest

Fuente

2011-02-28 22:12:17

bien, no es tanto cuando el código JavaScript se ejecuta, ya que es donde se inyecta el código HTML. ponerlo en el cuerpo significa que podría verse afectado por los estilos de página. –

Creo que la solución es usar contenido anónimo dentro de iframes. La técnica se detalla aquí: http://www.borderstylo.com/posts/220-anonymous-content-injection-in-google-chrome –

Acepto, la mejor inyección sería iframes de esa manera, los estilos no se heredarán. Pero siempre debes ubicarlo al final cuando el dom se carga. Debido a que algunos sitios web pueden ensuciar con su iframe si está cargado al principio. –

meyerweb's reset styles aspecto ligeramente más agresivo.

/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126 
    License: none (public domain) 
*/ 

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
}

Fuente

2012-04-19 02:04:21 Shawn

Hemos tenido un problema similar, hemos intentado restablece CSS y también el uso de etiquetas de identificación específicos para los elementos y reglas CSS, pero nunca fue lo suficientemente robusta ...

La mejor solución era inyectar los elementos en el DOM como elementos DOM de sombra que contienen el estilo en línea. Puede leer su archivo CSS a través de solicitudes AJAX e insertarlas en Shadow DOM dinámicamente, solo asegúrese de que estén dentro de los archivos web_accessible_resources (puede usar un comodín en su carpeta CSS).

En caso de que no esté familiarizado con Shadow DOM, here is un buen ejemplo de cómo funciona. Puede tomar un poco de refaccionamiento en su extremo, pero realmente es la única solución que funciona al 100%.

Fuente

2014-06-09 23:33:39 sagibb

Hace poco creé Boundary, una biblioteca CSS + JS para resolver problemas como este. Boundary crea elementos que están completamente separados del CSS de la página web existente.

Tome la creación de un cuadro de diálogo, por ejemplo. Después de la instalación del límite, usted puede hacer esto en el script contenido

var dialog = Boundary.createBox("yourDialogID", "yourDialogClassName"); 

Boundary.loadBoxCSS("#yourDialogID", "style-for-elems-in-dialog.css"); 

Boundary.appendToBox(
    "#yourDialogID", 
    "<button id='submit_button'>submit</button>" 
); 

Boundary.find("#submit_button").click(function() { 
    // find() function returns a regular jQuery DOM element 
    // so you can do whatever you want with it. 
    // some js after button is clicked. 
});

Los elementos dentro de #yourDialogID no se verán afectados por la página web existente.

Espero que esto ayude. Por favor avísame si tienes alguna pregunta.

https://github.com/liviavinci/Boundary

Fuente

2014-10-17 18:46:05

Aislamiento de CSS para la extensión de Chrome

Respuesta

Cuestiones relacionadas