├── .eslintrc ├── .npmignore ├── LICENSE ├── README.md ├── hot-reload.js ├── manifest.json └── package.json /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parserOptions": { 3 | "ecmaVersion": 6, 4 | "sourceType": "module" 5 | }, 6 | "parser": "babel-eslint", 7 | "rules": { 8 | "strict": 1 9 | } 10 | } -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | This is free and unencumbered software released into the public domain. 2 | 3 | Anyone is free to copy, modify, publish, use, compile, sell, or 4 | distribute this software, either in source code form or as a compiled 5 | binary, for any purpose, commercial or non-commercial, and by any 6 | means. 7 | 8 | In jurisdictions that recognize copyright laws, the author or authors 9 | of this software dedicate any and all copyright interest in the 10 | software to the public domain. We make this dedication for the benefit 11 | of the public at large and to the detriment of our heirs and 12 | successors. We intend this dedication to be an overt act of 13 | relinquishment in perpetuity of all present and future rights to this 14 | software under copyright law. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 19 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR 20 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, 21 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | 24 | For more information, please refer to 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Chrome Extension Hot Reloader 2 | 3 | > [!IMPORTANT] 4 | > 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 :( 5 | 6 | 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). 7 | 8 | Here's [a blog post explaining it](https://60devs.com/hot-reloading-for-chrome-extensions.html) (thanks to [KingOfNothing](https://habrahabr.ru/users/KingOfNothing/) for the translation). 9 | 10 | ## Features 11 | 12 | - Works by checking timestamps of files 13 | - Supports nested directories 14 | - Automatically disables itself in production 15 | - And it's under a 40 lines of code! 16 | 17 | ## How To Use 18 | 19 | 1. Drop [`hot-reload.js`](https://github.com/xpl/crx-hotreload/blob/master/hot-reload.js) to your extension's directory. 20 | 21 | 2. Put the following into your `manifest.json` file: 22 | 23 | ```json 24 | "background": { "scripts": ["hot-reload.js"] } 25 | ``` 26 | 27 | Also, you can simply clone this repository and use it as a boilerplate for your extension. 28 | 29 | ## Installing From NPM 30 | 31 | It is also available as NPM module: 32 | 33 | ``` 34 | npm install crx-hotreload 35 | ``` 36 | 37 | Then use a `require` (or `import`) to execute the script. 38 | -------------------------------------------------------------------------------- /hot-reload.js: -------------------------------------------------------------------------------- 1 | const filesInDirectory = dir => new Promise (resolve => 2 | dir.createReader ().readEntries (entries => 3 | Promise.all (entries.filter (e => e.name[0] !== '.').map (e => 4 | e.isDirectory 5 | ? filesInDirectory (e) 6 | : new Promise (resolve => e.file (resolve)) 7 | )) 8 | .then (files => [].concat (...files)) 9 | .then (resolve) 10 | ) 11 | ) 12 | 13 | const timestampForFilesInDirectory = dir => 14 | filesInDirectory (dir).then (files => 15 | files.map (f => f.name + f.lastModifiedDate).join ()) 16 | 17 | const watchChanges = (dir, lastTimestamp) => { 18 | timestampForFilesInDirectory (dir).then (timestamp => { 19 | if (!lastTimestamp || (lastTimestamp === timestamp)) { 20 | setTimeout (() => watchChanges (dir, timestamp), 1000) // retry after 1s 21 | } else { 22 | chrome.runtime.reload () 23 | } 24 | }) 25 | } 26 | 27 | chrome.management.getSelf (self => { 28 | if (self.installType === 'development') { 29 | chrome.runtime.getPackageDirectoryEntry (dir => watchChanges (dir)) 30 | chrome.tabs.query ({ active: true, lastFocusedWindow: true }, tabs => { // NB: see https://github.com/xpl/crx-hotreload/issues/5 31 | if (tabs[0]) { 32 | chrome.tabs.reload (tabs[0].id) 33 | } 34 | }) 35 | } 36 | }) 37 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 2, 3 | 4 | "name": "Chrome Extension Hot Reloader EXAMPLE", 5 | "description": "An example extension which demonstrates hot-reloading", 6 | "version": "1.1337.0", 7 | 8 | "background": { 9 | "scripts": ["hot-reload.js"] 10 | } 11 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "crx-hotreload", 3 | "version": "1.0.6", 4 | "description": "Watches for file changes in your Chrome extension's directory. When a change is detected, it reloads the extension and refreshes the active tab (to re-trigger the updated scripts).", 5 | "main": "hot-reload.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/xpl/crx-hotreload.git" 12 | }, 13 | "keywords": [ 14 | "chrome", 15 | "extension", 16 | "plugin", 17 | "chrome extension", 18 | "chrome plugin", 19 | "hot reload", 20 | "automatic reload", 21 | "restart on code change", 22 | "file monitor", 23 | "watchdog", 24 | "watch", 25 | "reload", 26 | "hot", 27 | "crx", 28 | "crx-hotreload" 29 | ], 30 | "author": "Vitaly Gordon (http://github.com/xpl)", 31 | "license": "Unlicense", 32 | "bugs": { 33 | "url": "https://github.com/xpl/crx-hotreload/issues" 34 | }, 35 | "homepage": "https://github.com/xpl/crx-hotreload#readme" 36 | } 37 | --------------------------------------------------------------------------------