How do I make Firefox auto-refresh on file change?

Charles_Roper_1944 0
Viewed 56672

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 update 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.

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

firefox browser css html
11 Answers

Have a look at FileWatcher extension: https://addons.mozilla.org/en-US/firefox/addon/filewatcher/

  • it's a WebExtension, so it works with the latest Firefox
  • it has a native app (to be installed locally) that monitors watched files for changes using native OS calls (no polling!) and notifies the WebExtension to let it reload the web page
  • reload is driven by rules: a rule contains the page URL (with regular expression support) and its included/excluded local source files
  • open source: https://github.com/coolsoft-ita/filewatcher

DISCLAIMER: I'm the author of the extension ;)

user_101545420

Browsersync can do this from the server side / outside of the browser.

This can achieve more repeatable results / things that don't require so much clicking.

This will serve a page and refresh on change

cd static_content
browser-sync start --server --files .

It also allows a scripting mode.

user_18925840

This is certainly hacky, but if you want to work locally without making any external request (to live.js, for example), or run any local server, I think this might be useful. This is not specific to web development, you can adopt similar strategy to any other workflow.

You will need two tiny tools (which are present in almost all distribution repos): inotify-tools and xdotool.

First get the ID of your Firefox and your editor window using xdotool.

$ xdotool search --name "Mozilla Firefox"
60817411
60817836
$ xdotool search --name "Pluma"  # Pluma is my editor
94371842

Depending on the number of processes running, you will get one or more window ID. Use xdotool windowactivate <ID> to know which one you want (the focus changes to the respective window).

Use inotifywait -e close_write to monitor changes to your local file and when you save the file using your editor, change focus to your browser, reload xdotool key CTRL+R and focus back to your editor. This is so instantaneous you will not notice nothing.

Also, inotifywait exits on change, so you might have to do it in a loop. Here is a minimum working example (in Bash in your working directory).

while /usr/bin/true
do
    inotifywait -e close_write index.html;
    xdotool windowactivate 60917411;  # Switch to Firefox
    xdotool key CTRL+R;               # Reload Firefox
    xdotool windowactivate 94371842   # Switch back to Pluma
done
  • You can use inotifywait to watch for the entire directory or some selected files in your directory.
  • You can write a script that can automate is easily.
  • This works on Linux (I've tested this on Void Linux.)
user_77047530

You can use live.js with a tampermonkey script to avoid having to include https://livejs.com/live.js in your HTML file.

// ==UserScript==
// @name         Auto reload
// @author       weirane
// @version      0.1
// @match        http://127.0.0.1/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    if (Number(window.location.port) === 8000) {
        const script = document.createElement('script');
        script.src = 'https://livejs.com/live.js';
        document.body.appendChild(script);
    }
})();

With this tampermonkey script, the live.js script will be automatically inserted to pages whose address matches http://127.0.0.1:8000/*. You can change the port according to your need.

user_109741060
Related