Trying to use jquery ui in google chrome extension in the content level

The problem is that the scope of the content script is on the web page that your plugin is suppose to be used at.

So the css background:url(images/ui-bg_inset-hard_100_fcfdfd_1x100.png) becomes url('http://webpageforplugin/images/ui-bg_inset-hard_100_fcfdfd_1x100.png') in order for this to work as far as i understood i need to have it to point to: url('chrome-extension://extensionId/images/ui-bg_inset-hard_100_fcfdfd_1x100.png')

So i tried to haxorz the 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;
    }   
};

I feel that i'm missing the obvious. That there mus开发者_开发问答t be an easier way.

Even if i manage to change this how will i get the extension id to build the string.

Btw this doesn't work, the icons are not properly fetched. (I hardcoded the extension id)

Any ideas?

---

I currently have this: (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/');
    }
});

And I just put this on the first line of every css that needs this

#chrome-extention-relative-paths {}

WARNING this only works for background-image urls which is all that is required for jquery ui

---

You can reference your chrome extension ID in the CSS - see this post: https://stackoverflow.com/a/8864212/113855

---

It seems I managed to get a preliminary solution to this problem although it is not the best one, it works ;-)

Basically, it consists on editing the jquery-ui-1.8.1.custom.css of the jQueryUI theme and substituting all the occurrences of the url() construction using relative paths with absolute online paths. As an example, subtitute "url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png)" with "url(http://jquery-ui.googlecode.com/svn/tags/1.8.1/themes/ui-lightness/images/ui-bg_highlight-soft_100_eeeeee_1x100.png)" using the files from the jQueryUI subversion site. As you can see, you only have to put "http://jquery-ui.googlecode.com/svn/tags/1.8.1/themes/ui-lightness/" in front taking into account the concrete theme you are using or want to use ("ui-lightness" in this case).

In case I find a better solution, I'll let you know. Please, do the same ;-)

Best,

         Germán.