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

Question

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 must 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?

Answer 1

I do have this same problem when trying to add an accordion menu to the visited page by means of a content script. I would appreciate if someone could share some light on this issue. Anyhow, I'll continue trying to figure out a workaround to share it with you. Thanks!.

Answer 2

Hi,

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.

Answer 3

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