Попытка использовать JQuery UI в расширении Google Chrome на уровне контента

Question

Проблема в том, что область действия скрипта контента находится на веб-странице, на которой предполагается использовать ваш плагин.

Итак, CSS-фон: url (images / 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')

Итак, я попытался улучшить документ.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;
    }   
};

Мне кажется, я упускаю очевидное. Что должно быть проще.

Даже если мне удастся изменить это, как я получу идентификатор расширения для построения строки.

Кстати, это не работает, значки не выбираются должным образом. (Я жестко закодировал идентификатор расширения)

Есть идеи?

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

Вы можете сослаться на свой идентификатор расширения Chrome в CSS - см. Этот пост: https://stackoverflow.com/a/8864212/113855

Answer 3

Кажется, мне удалось получить предварительное решение этой проблемы, хотя оно не самое лучшее, оно работает; -)

По сути, он состоит в редактировании 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 ) "с использованием файлов с сайта подрывной деятельности jQueryUI. Как видите, вам нужно только поставить "http://jquery -ui.googlecode.com / svn / tags / 1.8.1 / themes / ui-lightness / " впереди с учетом конкретной темы вы используете или хотите использовать (в данном случае «ui-lightness»).

Если я найду лучшее решение, я дам вам знать. Пожалуйста, сделайте то же самое; -)

Best

         Germán.