Firefox auto-refresh on file change

Question

Does anyone know of an extension for Firefox, or a script or some other mechanism, that can monitor one or more local files. Firefox would auto-refresh or otherwise updated its canvas when it detected a change (of timestamp) in the files(s).

For editing CSS, it would be ideal if just the CSS could be reloaded, rather than a full HTML re-render.

For dynamic files, one could programatically touch a stub file, which could be monitored as a proxy for changes in dynamic content.

Effectively it would enable similar behaviour to Firebug with its dynamic HTML/CSS editing, only through external files.

Thoughts, suggestions, ideas? Possible? Pie-in-the-sky?

Answer 1

You could just place a javascript interval on your page, have it query a local script which checks the last date modified of the css file, and refreshes it if it changed.

jQuery Example:

var modTime = 0;
setInterval(function(){
  $.post("isModified.php", {"file":"main.css", "time":modTime}, function(rst) {
    if (rst.time != modTime) {
      modTime = rst.time;
      // reload style tag
      $("head link[rel='stylesheet']:eq(0)").remove();
      $("head").prepend($(document.createElement("link")).attr({
          "rel":"stylesheet",
          "href":"http://sstatic.net/mso/all.css?v=4372"
        })
      );
    }
  });
}, 5000);

Answer 2

There are some IDE's that contain this ability (They'll have a pane within them or some other means to auto-refresh a page on save).

If you want to do this yourself a quick hack is to set the meta refresh on the page to a low value - one or two seconds.

# Will refresh the page content every second
<meta http-equiv="refresh" content="1" />

Answer 3

I think that you can solve it by using some ajax requests after a determinate interval. You can do a request to CSS files and then if you don't get the "not modified" header you delete your css and load it again. For dynamic files you do a request and store the response and then every time you make a request to that file you compare the response to the latest.

Answer 4

Xrefresh with firebug.

Answer 5

If others are still looking into this, I know Coda by Panic does this all in one window (Mac Only).

http://www.panic.com/coda/