尝试在内容级别的Google Chrome扩展程序中使用jquery ui

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('chrome-extension://extensionId/images/ui-bg_inset-hard_100_fcfdfd_1x100.png')

所以我试图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;
    }   
};

我觉得我错过了显而易见的事实.必须有一个更简单的方法.

即使我设法改变这个,我将如何获得扩展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 所需的全部内容