Geek Answers Handbook

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

The problem is that the script content area is on the webpage your plugin is supposed to use.

So 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 ') so that it works, as I understand it, to me need it to point to: URL ('chrome extension: //extensionId/images/ui-bg_inset-hard_100_fcfdfd_1x100.png')

So I tried haxorz 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 am missing the obvious. This should be an easier way.

Even if I manage to change this, how do I get the extension identifier to create the string.

Btw , . ( )

?

+5
3

: (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 {}

, jquery ui

+2

Chrome CSS - . : fooobar.com/questions/71245/...

+1

, , , ; -)

, jQuery-ui-1.8.1.custom.css jQueryUI url() . "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)", subversion jQueryUI. , " http://jquery-ui.googlecode.com/svn/tags/1.8.1/themes/ui-lightness/" , ( "ui-lightness" ).

In case I find the best solution, I will let you know. Please do the same; -)

Best

         Germán.
0
source

More articles:


All Articles