4

i'm trying to write a little chrome extension. In the content script i'm using jquery-ui in order to offer a dialog:

$("<div>hello!</div>").dialog();

When running the extension die dialog is rendered without any images and the debug console tells me, that the images where not found:

GET http://testsite.com/images/ui-bg_diagonals-thick_20_666666_40x40.png 404 (Not Found)

Thats my folder layout:

.
├── css
│   ├── images
│   │   ├── animated-overlay.gif
│   │   ├── ui-bg_diagonals-thick_18_b81900_40x40.png
│   │   ├── ui-bg_diagonals-thick_20_666666_40x40.png
│   │   ├── ui-bg_flat_10_000000_40x100.png
│   │   ├── ui-bg_glass_100_f6f6f6_1x400.png
│   │   ├── ui-bg_glass_100_fdf5ce_1x400.png
│   │   ├── ui-bg_glass_65_ffffff_1x400.png
│   │   ├── ui-bg_gloss-wave_35_f6a828_500x100.png
│   │   ├── ui-bg_highlight-soft_100_eeeeee_1x100.png
│   │   ├── ui-bg_highlight-soft_75_ffe45c_1x100.png
│   │   ├── ui-icons_222222_256x240.png
│   │   ├── ui-icons_228ef1_256x240.png
│   │   ├── ui-icons_ef8c08_256x240.png
│   │   ├── ui-icons_ffd27a_256x240.png
│   │   └── ui-icons_ffffff_256x240.png
│   └── jquery-ui-1.10.4.min.css
└── js
    ├── jquery-1.11.1.min.js
    └── jquery-ui-1.10.4.min.js

so the question is: How can i use the images bundled with jquery-ui in the content page of my extension

Edit: the content script is injected via manifest:

"content_scripts": 
[
   {    "matches": ["<all_urls>"],
        "js": ["js/contentScript.js","3dparty/js/jquery-1.11.1.min.js","3dparty/js/jquery-ui-1.10.4.min.js"],
        "css": ["3dparty/css/jquery-ui-1.10.4.min.css"]
    }
],
Dakkar
  • 5,682
  • 5
  • 22
  • 28
  • How did you inject the content script? Via manifest or via executeScript? Did you list all the files in the `web_accessible_resources` section of your manifest? – devnull69 May 14 '14 at 11:08
  • 1
    And maybe this will help: http://stackoverflow.com/questions/13718669/chrome-ext-and-jquery-resources-must-be-listed-in-the-web-accessible-resources-m?rq=1 – devnull69 May 14 '14 at 11:09
  • I updated the question concerning the way i inject the content script. – Dakkar May 14 '14 at 11:24
  • too slow for edit ... The images are listed in the `web_accessible_resources` block of the manifest. But the problem seems to be, that the image URL is resolved relative to testsite.com (see console log entry) and not relative to the chrome extension. But i can't believe, that i have to "patch" the bundled css deliverd by jquery-ui from relative paths (images/img.png) to **static** paths (chrome://extension/__ugly_string_of_extension_id__/images/img.png) – Dakkar May 14 '14 at 11:30
  • Duplicate question with '[Google Chrome Extensions - Can't load local images with CSS](https://stackoverflow.com/questions/3559781/google-chrome-extensions-cant-load-local-images-with-css?noredirect=1&lq=1)' The relevant answer is [this](https://stackoverflow.com/a/32130426/6266192). – Dudi Boy Jul 06 '18 at 13:05

0 Answers0