Trying to use jquery ui in google chrome extension in the content level
- by user135697
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?
