Hello! What about adding option to inject third-side css?
For example, I used this extension to write and test additional styles for site. I need to edit my own css; so, I inject localhosted .css, then monitoring it by your extension. Css is editable in IDE. When I save, it automatically updates on page.
It's be cool to do both part of operation in one extension

This says it all — current version of Chrome: Version 116.0.5845.187 (Official Build) (arm64); MacOS 13.5.2

Rules url :
http://localhost/tds/*
script url:
http://localhost/tds/*.css
(tried others .css urls too)

How can I debug it ?

Tried it on FF and Chrome

Summary: file:// URLs used to work in chrome on linux, provided that the the user enabled "Allow access to file URLs" in chrome://extensions/. This stopped working fairly recently (March 2020?).

I've read #3 and the comment on the Chrome web store. #3 refers to firefox, so seems not directly relevant. The comment on the Chrome web store, which refers to #3, is undated. Because I know that file:// URLs have worked recently, that answer seems out-of-date.

I'm using Chrome 81.0.4044.92 on Ubuntu, with LivePage 2.7.0.

When I look at the background page, I see no messages at all (incl debug levels).

Thanks for this awesome extension. It's been extremely helpful for a couple of years and I'd love to recover this lost functionality.

Host: https://altius.duckdns.org/*
Source files: https://altius.duckdns.org/wp-content/themes/altius/*.css*
https://altius.duckdns.org/wp-content/themes/altius/*/*.js*

Example of file being changed: https://altius.duckdns.org/wp-content/themes/altius/style.css?ver=1.0.0

How can I debug it with about:devtools-toolbox?type=extension&id=live-reload%40blaise%2Eio?

Clicking on Create a new reload rule... doesn't produce any effect:

Chrome version: 89.0.4389.114 (Build ufficiale) (a 64 bit)

Live Reload version: 1.8.2

Windows version: 10 Pro 1803 x64

Как при обновлении страницы учитывать кэш браузера?

Hello,

Currently, using firefox 102.0.1 on linux, the extension works correctly.
However, when the page reloads itself, the browser scrolls to the top of the page. I dislike that, I'd like the page to stay where it is.
My use case is generating and modifying html documentation using Sphinx and I'd like to see the document evolution where I scrolled, not the top of the page ;-)
I'm currently using live.js which does not scroll to the top.
Note that using chrome 103.0.5060.114 on linux does not have this scrolling side effect, so there's a workaround.
Thanks for your work.

I know this issue already exists, but it's locked, so...

In chrome://extensions, there is a toggle for allowing extensions access to file:/// urls.

Is it possible to let the extension try to access the file:/// urls?

Chrome Web Store is not accepting Live Reload 1.8.0:

"Spam and Placement in the Store"
Item has a blank description field, or missing icons or screenshots, and appears to be suspicious.

Description, icons and screenshots are not blank so this doesn't really help. I will try to submit a version with source code that is not minified.

Note: Live Reload 1.8.0 is live for Firefox.

Is there a way setup a script to work on all subdomains?

For example, I would like live reload to work on all pages on localhost, en.localhost, fr.localhost and de.localhost without making seperate scripts for each subdomain.

The new Microsoft Edge is based on Chromium, just like Google Chrome. Edge does have its own Add-ons store. Although adding extensions from the Chrome Web Store is possible too (after allowing), it has some advantages to also make the live-reload extension available in the Microsoft Edge Add-ons store.

If you're okay with it, I could do this for you. I have a Microsoft developer account with which I can submit extensions to the Edge Add-ons store. It would be published under my name, I unfortunately can't change that, but I'd of course provide links to this Github page. Thanks for letting me know what you think.

I'm creating a presentation using Reveal.js. I use the option history so that when I reload the html file after a change, it doesn't jump back to the first slide but "remembers" where I was last time. This is achieved by automatically postfixing each slide's URL with #/n where n is a number. (The very first slide's postfix is simply #/) For example:

main.html#/ (1st slide)
main.html#/1 (2nd slide)
main.html#/2 (3rd slide)
main.html#/3 (4th slide)
…

The problem is that live reload doesn't work when this feature is active. When it's disabled and the URL is always set to main.html, it works perfectly.

I've also tried setting main.html* and main.#/ as the host file and a source, but it didn't work either.

I'm using the addon with Firefox 58.0.1 x64 for Linux and running a local Python server, as suggested in the addon description.

I'm running the latest Chrome, and I have 20 tabs open (using The Great Discarder extension too, nothing else). I turned on Live Reload, watching on for only *://localhost:888/* (which is turned on in only 2 tabs) and my macBook's fans are going crazy. Checking my battery, it displays the browser consuming significant energy when Live Reload is on.

Once I disable Live Reload extension, things go quiet again.

I use Firefox.

I think right URL is https://github.com/blaise-io/live-reload#readme.

Saving the reload rule that is still monitoring seems to stop it so maybe use the same function calls to clear stale monitoring.

const selector = document.querySelectorAll("link[rel=stylesheet]");

I'd suggest to use a broader selector like:
document.querySelectorAll("link[rel*=stylesheet], link[rel=preload][as=style]")
for all possiblities, like
<link rel="preload stylesheet" href="...css"> and
<link rel="preload" as="style" href="...css">.

Preload @MDN

Really appreciate your plugin. Was wondering if the readme could clarify why the Firefox Extension requests permission to "Access your data for all websites." If it's not needed it should be removed.

Thanks for your work!

Not sure if this is an issue but it would be cool to add this feature

(sorry I also was #2 but I used the wrong account)

It is not working for me unfortunately.

I'm using Doxygen 1.8.13 to generate .html, .css, .js and .png files to a folder lets say
file:///C:/html/

So in the PlugIn I configured the following Paths:
Host URL:
file:///C:/html/*.html

Source file URLs
file:///C:/html*

Monitor source URLs every [2] seconds

But after a new build from Doxgen the page gets never reloaded.

It is not working for me unfortunately.

I'm using Doxygen 1.8.13 to generate .html, .css, .js and .png files to a folder lets say
file:///C:/html/

So in the PlugIn I configured the following Paths:
Host URL:
file:///C:/html/*.html

Source file URLs
file:///C:/html*

Monitor source URLs every [2] seconds

But after a new build from Doxgen the page gets never reloaded.

Hi @blaise-io ,

It is documented that, yes, live-reload can reload the page on backend change. And I did success to do that some weeks/months ago But as of today, I am not able to reload on backend change (not css, nor js).

How to reproduce

1. Setup extension on localhost:4200/*, also tried with an additional localhost:4200/search/products (see screenshot)
2. Change backend page (rendered html)
3. No reload occurs.

Config:

Infos

• Firefox 74.0
• live-reload 1.8.0

I start a local server use serve . in local directory, and the server choose a random port number
I want to set a rule for all http://localhost:[any port number], How can I do it? Or must I add a port number in source file URLs?

How can you add support for PHP files?

/src/components/*.js
/src/app.js

app.js imports ES modules exported by js files under /src/components
However with the rules above, only app.js is being detected.
/src/components js files are being loaded as per network inspector

If I add script tags for those component js files, live-reload does pick up on them and detect changes. So changes are only detected if the script is referenced in the html markup. Not sure if this limitation is inherent to this implementation.

Live Reload has suddenly stopped working… possibly due to new Chrome version?
Chrome Version 80.0.3987.106, MacOS 10.14.6

Hello! I was trying to set this up to monitor my files being changed within a specific directory on my local machine, but the Sources input field is requiring a URL.

Is there a way around this validation and if so, will it work with the local files?

I am using this in Google Chrome Version 117.0.5938.88 (Official Build) (arm64). I enabled live reload on a site I am developing, but it seems to do nothing when my CSS files change. I have configured

Configuration

Host URL: http://site.test/**
Source File: *://*.site.test/*
(ignore none)
2 seconds
Enabled:

• Reload stylesheets without reloading the host page
• Reload frames without reloading the host page
  (saved)

Trouble Shooting

1. Turned off & on
2. Uninstalled and reinstalled extension
3. Updated chrome

More Information

• Caching is disabled
• Manually refreshing works
• Other extensions like Easy Auto Refresh seem to work fine

The link to the Chrome Web Store, as referenced from the README, appears to be broken.

Could the extension be re-uploaded to the Chrome Web Store? Thanks!

It seems to have a long cooldown period after it trigger a reload(works perfect the first time), then after around 30s it seems to detected there are something to monitor.

It only works when there is a 1 number next to extension icon, then you change file on disk, it reloads itself, then the 1 is gone, at this moment updating file on disk has no effect, it does not reload, after 30s, the 1 appears again, then it works again.. you just need to wait another 30s.

browser : google chrome

Is it possible to monitor the html file itself for changes?

I am running a page using DDEV in WSL2 i call them in Firefox (DEV) on Windows 10, like so:

http://d9-theme.ddev.site

I've set up the watcher like this:

Host-URL: http://d9-theme.ddev.site/*

Source-File-URLs:
http://d9-theme.ddev.site/themes/custom/digico/css/*.css
http://d9-theme.ddev.site/themes/custom/digico/js/*.js

I am able to open "http://d9-theme.ddev.site/themes/custom/digico/css/digico.global.min.css" so the configured paths should be correct.

I would really love to see this working.. gulp-livereload, what i've used in the past, didn't work for me withing WSL2.

Hello,
Currently, using firefox 102.0.1 on linux, the extension works correctly.
However, when the page reloads itself, the browser scrolls to the top of the page. I dislike that, I'd like the page to stay where it is.
My use case is generating and modifying html documentation using Sphinx and I'd like to see the document evolution where I scrolled, not the top of the page ;-)
I'm currently using live.js (which does not scroll to the top) but would rather use your extension without this side effect.
Anyway thanks for your work.

Can you add trace exclusions (e.g. for /wp-admin)?
If not, are you planning to introduce such an option?