Intentando usar jquery ui en la extensión google chrome en el nivel de contenido

Question

El problema es que el alcance del script de contenido está en la página web en la que se supone que se debe usar el complemento.

Así que el fondo css: url (images/ui-bg_inset-hard_100_fcfdfd_1x100.png) se convierte en url ('http://webpageforplugin/images/ui-bg_inset-hard_100_fcfdfd_1x100.png') para que esto funcione como lo que he entendido que necesita tener para que apunte a: url ('cromo-extensión: //extensionId/images/ui-bg_inset-hard_100_fcfdfd_1x100.png')

así que traté de haxorz los document.styleSheets

var ss = document.styleSheets; 

for (var i=0; i<ss.length; i++) { 
    var found=-1, x,i; 
    var rules = ss[i].cssRules || ss[i].rules; 

    for (var j=0; j<rules.length; j++) { 
     if ('.ui-helper-hidden'==rules[j].selectorText){ 
      found=i; 
      break; 
     } 
    } 
    if (found>-1){ 
     for (var j=0; j<rules.length; j++) { 
      if (x=rules[j].style.background){ 
       if ((i=x.indexOf('url'))!=-1) 
        rules[j].style.background = x.replace('http://page/images/','chrome-extension://extensionId/images/'); 
      } 
     } 
     break; 
    } 
}; 

siento que me falta lo obvio. Que debe haber una manera más fácil.

Incluso si consigo cambiar esto, ¿cómo obtendré el ID de extensión para construir la cadena?

Por cierto, esto no funciona, los iconos no se recuperan correctamente. (He codificado la identificación de la extensión)

¿Alguna idea?

Answer 1

Actualmente tengo esto: (content.hack.js jquery-ui-)

$(function(){ 
    function fixcsspath(rules, folder){ 
     var path_prefix = chrome.extension.getURL(''); 
     var lookfor = 'url('; 
     var ss = document.styleSheets; 

     for (var j=0; j<rules.length; j++) { 
      var b = rules[j].style['background-image']; 
      var s; 
      if (b && (s = b.indexOf(lookfor)) >= 0){ 
       s = s + lookfor.length; 
       rules[j].style['background-image'] = b.replace(b.substr(s,b.indexOf(folder)-s), path_prefix); 
      } 
     } 
    }; 

    var ss = document.styleSheets; 

    for (var i=0; i<ss.length; i++) { 
     var rules = ss[i].rules || ss[i].cssRules; 
     if (rules[0].selectorText!="#chrome-extention-relative-paths") 
      continue; 
     fixcsspath(ss[i].rules, '/images/'); 
    } 
}); 

Y acabo de poner esto en la primera línea de cada CSS que necesita este

#chrome-extention-relative-paths {} 

ADVERTENCIA esto sólo funciona para las direcciones URL imagen de fondo, que es todo lo que se requiere para jQuery UI

Answer 2

Parece que me las arreglé para conseguir una solución preliminar a este problema, aunque no es la mejor, es que funciona ;-)

Básicamente, consiste en la edición de la jquery-ui-1.8.1.custom. css del tema jQueryUI y sustituyendo todas las instancias de la construcción de url() utilizando rutas relativas con rutas en línea absolutas. Como ejemplo, subtitute "url (images/ui-bg_highlight-soft_100_eeeeee_1x100.png)" con "url (http://jquery-ui.googlecode.com/svn/tags/1.8.1/themes/ui-lightness/images/ui-bg_highlight-soft_100_eeeeee_1x100.png)" utilizando los archivos del sitio de subversión jQueryUI. Como puede ver, solo tiene que poner "http://jquery-ui.googlecode.com/svn/tags/1.8.1/themes/ui-lightness/" al frente teniendo en cuenta el tema concreto que está utilizando o desea usar ("ui-lightness" en este caso).

En caso de que encuentre una mejor solución, se lo haré saber. Por favor, haga lo mismo ;-)

mejor,

  Germán. 

Answer 3

Puede hacer referencia a su extensión cromo ID en el CSS - véase este post: https://stackoverflow.com/a/8864212/113855