Watches for file changes in your extension's directory. When a change is detected, it reloads the extension and refreshes the active tab (to re-trigger the updated scripts).
Here's a blog post explaining it (thanks to KingOfNothing for the translation).
- Works by checking timestamps of files
- Supports nested directories
- Automatically disables itself in production
- And it's under a 40 lines of code!
-
Drop
hot-reload.jsto your extension's directory. -
Put the following into your
manifest.jsonfile:
"background": { "scripts": ["hot-reload.js"] }Also, you can simply clone this repository and use it as a boilerplate for your extension.
It is also available as NPM module:
npm install crx-hotreload
Then use a require (or import) to execute the script.
- Does not work with Manifest Version 3, as Chrome has recently removed the APIs essential for working with file system from background scripts: https://stackoverflow.com/questions/65975659/how-do-i-get-access-to-all-the-files-in-the-extension-in-chrome-extension-manife/65976345 :(