In Greasemonkey, I'm trying to use a local copy of an image found online. The image is temporarily stored in C:\temp.

This doesn't work:

var b = document.body;
b.style.background = '#ccc url("file:///C:/temp/bg.jpg") repeat-x top left';

In Firebug, I can hover over the path in the style window and the image will popup, showing that the image is there and that the path is correct, but Firefox just isn't displaying it. I've even tried redrawing the page:

  setTimeout(function(){element.className = element.className;},500);

If I use the path to the original http url (http://somedomain/bg.jpg) it'll work, but trying to avoid that. I'm not sure why it's having a problem rendering local images.

In Greasemonkey, I'm trying to use a local copy of an image found online. The image is temporarily stored in C:\temp.

This doesn't work:

var b = document.body;
b.style.background = '#ccc url("file:///C:/temp/bg.jpg") repeat-x top left';

In Firebug, I can hover over the path in the style window and the image will popup, showing that the image is there and that the path is correct, but Firefox just isn't displaying it. I've even tried redrawing the page:

  setTimeout(function(){element.className = element.className;},500);

If I use the path to the original http url (http://somedomain/bg.jpg) it'll work, but trying to avoid that. I'm not sure why it's having a problem rendering local images.

• javascript
• css
• greasemonkey
• background-image

5 Answers 5

Greasemonkey provides a means to do this and without promising your PC's security (Please turn that security check back on, there are gazillions of websites waiting to exploit such holes).

Here's one way to do it:

1. For best results, use the Greasemonkey user-scripts manager (CtrlShiftA) to uninstall the old version of the script, if any.

2. Copy the desired image to whatever folder contains your script source, not the installed script in the profile directory.

   For example, if your script source is in C:\myScripts\, copy bg.jpg to that folder. Do not use the temp folder for your script source.

3. Add these lines to the Script's metadata section:

   // @resource MyBG_Image bg.jpg
   // @grant    GM_getResourceURL
   

4. Then you can use this code in your script:

   var b = document.body;
   b.style.background = '#ccc url("' + GM_getResourceURL ("MyBG_Image") + '") repeat-x top left';
   

5. Now install the script by opening the file with Firefox, For example, in FF use the File->Open File menu (Or CtrlO) to open C:\myScripts\MyScript.user.js
   Greasemonkey will prompt to (re)install the script and the local file bg will then work.

This is because you can't add a reference to a local file (file://) from a different domain other than the local one.

A security error message is displayed in the error console. (just in case you havent seen it before)

Please read Same-origin policy for file: URIs for details.

Brock Adams is absolutely right. The script must be (re)installed, as he describes.

adding this to metadata:

    // @resource MyTest_Image animated_gif_test.gif

and this to script makes the GM use an image on lacal machine

    //images[x].src  = GM_getResourceURL ("MyTest_Image");

More on this method here: http://wiki.greasespot/GM_getResourceURL

    // ==UserScript==
    // @resource logo http://www.example./logo.png
    // ==/UserScript==

    var img = document.createElement('img');
    img.src = GM_getResourceURL("logo");
    document.body.appendChild(img);

I could not get this to work either until I added the following...

// @grant       GM_getResourceURL

From: http://www-archive.mozilla/releases/mozilla1.7.12/known-issues.html

For security reasons, Mozilla does not allow web content to link to local files. An error like:Security Error: Content at url may not load or link to file:///something will appear in the javascript console. If you need to follow links to local paths it is remended that you drag the link to the location bar and then drop it on the webpage. If you really don't like the security check and are willing to risk all files on your system and that your system can access then you may add the following line to user.js in your personal profile directory. user_pref("security.checkloaduri", false); (Bug 84128)