Essayer d'utiliser jquery ui dans l'extension google chrome au niveau du contenu

Question

Le problème est que la portée du script de contenu est sur la page Web à laquelle votre plugin est supposé être utilisé.

Ainsi, l'arrière-plan css: url (images/ui-bg_inset-hard_100_fcfdfd_1x100.png) devient url (« http://webpageforplugin/images/ui-bg_inset-hard_100_fcfdfd_1x100.png ») pour que cela fonctionne pour autant que je compris je dois avoir à pointer vers: url ('chrome-extension: //extensionId/images/ui-bg_inset-hard_100_fcfdfd_1x100.png')

Alors j'ai essayé de haxorz les 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; 
    } 
}; 

Je sens que je suis absent l'évidence. Qu'il doit y avoir un moyen plus facile.

Même si je parviens à changer cela, comment puis-je obtenir l'ID de l'extension pour construire la chaîne. Btw cela ne fonctionne pas, les icônes ne sont pas correctement récupérées. (J'ai codé en dur l'extension ID)

Des idées?

Answer 1

J'ai actuellement ceci: (jquery-ui-content.hack.js)

$(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/'); 
    } 
}); 

Et je viens de mettre cela sur la première ligne de chaque css a besoin de ce

#chrome-extention-relative-paths {} 

ATTENTION cela ne fonctionne que pour les urls background-image qui est tout ce qui est nécessaire pour jquery ui

Answer 2

Il semble que je réussi à obtenir une solution préliminaire à ce problème bien qu'il ne soit pas le meilleur, il fonctionne ;-)

Fondamentalement, il consiste à éditer le jquery-ui-1.8.1.custom. css du thème jQueryUI et substituant toutes les occurrences de la construction url() en utilisant des chemins relatifs avec des chemins absolus en ligne. Par exemple, substituez "url (images/ui-bg_highlight-soft_100_eeeeee_1x100.png)" par "url (http://jquery-ui.googlecode.com/svn/tags/1.8.1/themes/ui-lightness/images/ui-bg_highlight-soft_100_eeeeee_1x100.png)" en utilisant les fichiers du site subversion de jQueryUI. Comme vous pouvez le voir, il suffit de mettre "http://jquery-ui.googlecode.com/svn/tags/1.8.1/themes/ui-lightness/" devant le thème concret que vous utilisez ou que vous voulez utiliser ("ui-légèreté" dans ce cas).

Au cas où je trouverais une meilleure solution, je vous le ferai savoir. S'il vous plaît, faire la même chose ;-)

Best,

  Germán. 

Answer 3

Vous pouvez référencer votre extension chrome ID dans le CSS - voir ce post: https://stackoverflow.com/a/8864212/113855