https://github.com/xpl/crx-hotreload

Chrome Extension Hot Reloader
https://github.com/xpl/crx-hotreload

chrome chrome-extension hot-reload hot-reloading

Last synced: 16 days ago
JSON representation

Chrome Extension Hot Reloader

• Host: GitHub
• URL: https://github.com/xpl/crx-hotreload
• Owner: xpl
• License: unlicense
• Created: 2016-11-06T19:51:31.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2024-03-30T19:14:58.000Z (8 months ago)
• Last Synced: 2024-04-30T21:11:57.171Z (7 months ago)
• Topics: chrome, chrome-extension, hot-reload, hot-reloading
• Language: JavaScript
• Homepage:
• Size: 35.2 KB
• Stars: 834
• Watchers: 17
• Forks: 124
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Chrome Extension Hot Reloader

> [!IMPORTANT]  

> 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 :(

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](https://60devs.com/hot-reloading-for-chrome-extensions.html) (thanks to [KingOfNothing](https://habrahabr.ru/users/KingOfNothing/) for the translation).

## Features

- Works by checking timestamps of files

- Supports nested directories

- Automatically disables itself in production

- And it's under a 40 lines of code!

## How To Use

1. Drop [`hot-reload.js`](https://github.com/xpl/crx-hotreload/blob/master/hot-reload.js) to your extension's directory.

2. Put the following into your `manifest.json` file:

```json

    "background": { "scripts": ["hot-reload.js"] }

```

Also, you can simply clone this repository and use it as a boilerplate for your extension.

## Installing From NPM

It is also available as NPM module:

```

npm install crx-hotreload

```

Then use a `require` (or `import`) to execute the script.