콘텐츠 수준의 google 크롬 확장 프로그램에서 jquery UI 사용 시도

Question

콘텐츠 스크립트의 범위가 귀하의 플러그인에서 사용되는 것으로 가정되는 웹 페이지에있는 것이 문제입니다.

은 그래서 CSS를 배경 : 홈페이지 (이미지/UI-bg_inset-hard_100_fcfdfd_1x100.png는) URL이됩니다 내가 가리 키도록해야 할 필요가 이해되는이 지금까지 작동하기 위해서는 (' http://webpageforplugin/images/ui-bg_inset-hard_100_fcfdfd_1x100.png') : URL ('크롬 확장 : //extensionId/images/ui-bg_inset-hard_100_fcfdfd_1x100.png')는

그래서 난 내가 누락 느낌

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; 
    } 
}; 

document.styleSheets을 haxorz 시도 명백한. 더 쉬운 방법이 있어야합니다.

내가 이걸 어떻게 관리 할지라도, 문자열을 만드는 확장 ID를 어떻게 얻을 수 있을까요?

이 기능이 작동하지 않아 아이콘이 제대로 가져올 수 없습니다. (확장 ID를 하드 코드했습니다)

아이디어가 있으십니까? 내가 최고의 한 것은 아니지만이 문제에 대한 예비 솔루션을 얻을 수 있었다 것

Answer 1

나는 현재이 있습니다 (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/'); 
    } 
}); 

그리고 난 그냥에이를 넣어 이 모든 것을 필요로하는 모든 CSS의 첫 번째 줄

#chrome-extention-relative-paths {} 

경고 이것은 배경 이미지 URL에만 필요합니다. JQuery와 UI

Answer 2

, 그것은 기본적으로 ;-)

작동, 그것은 JQuery와 - UI를-1.8.1.custom 편집에 대한 구성되어 있습니다. jQueryUI 테마의 css 및 url() 구성의 모든 발생을 상대 경로를 사용하여 절대 온라인 경로로 대체하십시오. 예를 들어, jQueryUI Subversion 사이트의 파일을 사용하여 "url (images/ui-bg_highlight-soft_100_eeeeee_1x100.png)"을 "url (http://jquery-ui.googlecode.com/svn/tags/1.8.1/themes/ui-lightness/images/ui-bg_highlight-soft_100_eeeeee_1x100.png)"으로 바꿉니다. 보시다시피, 사용 하시거나 사용하고 싶은 구체적인 테마 (이 경우 "ui-lightness")를 고려하여 앞에 "http://jquery-ui.googlecode.com/svn/tags/1.8.1/themes/ui-lightness/"을 넣으십시오.

더 나은 해결책을 찾으면 알려 드리겠습니다. , 제발 같은 ;-)

보다도,

  Germán. 

Answer 3

당신은 CSS에서 크롬 확장 ID를 참조 할 수 있습니다 - 볼이 게시물 : https://stackoverflow.com/a/8864212/113855이