Chrome Ext and JQuery Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension

Question

I have Chrome extension that loads jquery-1.8.3.min.js and jquery-ui.js and jquery-ui-base64.css into the content script .
i use them in the content script NOT background script .
i set the configuration ( i think ) right but when i see in the console i getting errors i can see the icons in the windows just fine , but i still getting the errors in the Chrome window.
is it a bug in chrome im using version 23.0.1271.95 m?

this is the manifist :

{
"name":"Sample communication from content to background",
"description":"This is a sample for Simulating communication from content to background",
"manifest_version":2,
"version":"2",
"background":{
    "scripts":["background.js"]
},
"content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["jquery-1.8.3.min.js","jquery-ui.js","client.js"],
      "run_at":"document_end",
      "all_frames": true,
      "css":["jquery-ui-base64.css"]
    }
  ],
"web_accessible_resources": [
    "client.js","jquery-1.8.3.min.js","jquery-ui.js","jquery-ui-base64.css",
    "images/ui-bg_flat_0_aaaaaa_40x100.png",
    "images/ui-bg_flat_75_ffffff_40x100.png",
    "images/ui-bg_glass_55_fbf9ee_1x400.png",
    "images/ui-bg_glass_65_ffffff_1x400.png",
    "images/ui-bg_glass_75_dadada_1x400.png",
    "images/ui-bg_glass_75_e6e6e6_1x400.png",
    "images/ui-bg_glass_95_fef1ec_1x400.png",
    "images/ui-bg_highlight-soft_75_cccccc_1x100.png",
    "images/ui-icons_222222_256x240.png",
    "images/ui-icons_2e83ff_256x240.png",
    "images/ui-icons_454545_256x240.png",
    "images/ui-icons_888888_256x240.png",
    "images/ui-icons_cd0a0a_256x240.png"
  ],
"permissions": [ 
        "unlimitedStorage",
        "http://*/",
        "<all_urls>",
        "tabs"
   ]
}

in the jquery-ui-base64.css i changed all the imags url load to something like this :

 url(chrome-extension://__MSG_@@extension_id__/chrome-extension://__MSG_@@extension_id__/images/ui-bg_flat_75_ffffff_40x100.png) 
url(chrome-extension://__MSG_@@extension_id__/chrome-extension://__MSG_@@extension_id__/images/ui-bg_highlight-soft_75_cccccc_1x100.png)

but still im getting the errors:

Denying load of chrome-extension://mmoccjinakdjcmhjdjghhjnihbfkkgkp/chrome-extension://mmoccjinakdjcmhjdjghhjnihbfkkgkp/images/ui-bg_flat_75_ffffff_40x100.png. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
Denying load of chrome-extension://mmoccjinakdjcmhjdjghhjnihbfkkgkp/chrome-extension://mmoccjinakdjcmhjdjghhjnihbfkkgkp/images/ui-bg_highlight-soft_75_cccccc_1x100.png. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

the images are there in the images dir and i can see the icons in the JQuery dialog i created.

Sudarshan · Answer 1 · 2012-12-05T10:39:45.193

EDIT 1)

The following code works for all background\extension related DOM and css

manifest.json

Simple json structure with all permissions defined

{
"name": "My extension",
"version": "1.0",
"permissions": [
    "http://*/*", "tabs", "https://*/*"
],
"browser_action": {
    "default_icon": "icon.jpg",
    "default_popup":"popup.html"
},
"manifest_version": 2
}

popup.html

Linked style sheet for Browser action Popup

<html>
<head>
<link rel="stylesheet" href="styles.css"></link>
</head>
<body>
</body>
</html>

styles.css

used url() for image path

body{
    width : 500px;
    height: 500px;
    background-image: url('img/icon.jpg');
}

Let me know if it still fails

enter image description here

EDIT 2)

For Injecting Images through content stuff

Solution a)

Using this converter, you convert your image to base64 strings and you can use them as

{ background-image: url(data:image/png;base64,iVBORw ........ };

Solution b)

The following code will not work because

{
background-image:url(chrome.extension.getURL('img/icon.jpg'));
}

chrome.extension.getURL() is undefined for css.

So, i used js for injection of background-images\any image URL's(Because they have dynamic URL's)

manifest.json

Simple json structure with all permissions defined for content scripts and css

{
"name": "My extension",
"version": "1.0",
"permissions": [
    "http://*/*", "tabs", "https://*/*"
],
 "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js":["content.js"],
      "css": ["styles.css"]
    }
  ],
"web_accessible_resources": [
    "img/icon.jpg"
],  
"manifest_version": 2
}

content.js

As a trivial use case prepared a div and added background Image property

var newdiv = document.createElement('div');
newdiv.setAttribute("id", "moot450");
document.body.appendChild(newdiv);
document.getElementById('moot450').style.backgroundImage = "url(" + chrome.extension.getURL('img/icon.jpg') + ")";

styles.css

injected another css for refining injected div

#moot450{
    position:absolute; 
    width:500px;
    height:500px;
    /*background-image:url(chrome-extension://faaligkhohdchiijdkcokpefpancidoo/img/icon.jpg);*/
}

OUTPUT

Screen shot taken from Google Page after injection

enter image description here

Let me know if you need more information or if it fails.

well i forgat to say its all in content script not backgound — user63898, Dec 05 '12 at 09:01
@user63898: I have updated my suggestions in `edit 2)` let me know your views — Sudarshan, Dec 05 '12 at 10:42
@user63898 For reference this question is related to this question.. http://stackoverflow.com/q/13669762/189093 ... but that doesnt matter as the answer is rather simple... change `url(chrome-extension://__MSG_@@extension_id__/chrome-extension://__MSG_@@extension_id__/images/ui-bg_flat_75_ffffff_40x100.png) ` to `url(chrome-extension://__MSG_@@extension_id__/images/ui-bg_flat_75_ffffff_40x100.png)` and the other one like wise (not enoguh characters to put it in here). Notice the difference? You put `chrome-extension://__MSG_@@extension_id__` in the url twice for some reason. — PAEz, Dec 05 '12 at 11:51
@PAEz thanks allot ! how can i give you upvote or something here for the answer ? — user63898, Dec 06 '12 at 07:39
@user63898 its cool dont worry bout the points, just glad to help. — PAEz, Dec 06 '12 at 07:44

Chrome Ext and JQuery Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension

1 Answers1

Linked