Crx Live Reload Webpack Plugin
Livereload over SSE for develop Chrome Extension.
BACKGROUND
Since Chrome extensions can only load local files, devServer hot reload does not work (only the browser can be reloaded or the scripts can be re-executed remotely). We need to use scripts to make it reload automatically, which contains the background
and content-script
modules.
FEATURE
- Automatically inject reboot scripts.
- Both
background
and content-script
can use reboot capabilities.
INSTALL
$ npm install --dev @dumlj/crx-live-reload-webpack-plugin
$ yarn add --dev @dumlj/crx-live-reload-webpack-plugin
$ pnpm add @dumlj/crx-live-reload-webpack-plugin -D
USAGE
import { CrxLiveReloadWebpackPlugin } from '@dumlj/crx-live-reload-webpack-plugin'
export default {
mode: 'development',
entry: {
background: path.join(__dirname, 'background.ts'),
contentScript: path.join(__dirname, 'contentScript.ts'),
},
plugins: [
...new CrxLiveReloadWebpackPlugin({
host: '127.0.0.1',
port: 8080,
}),
],
devServer: {
hot: true,
liveReload: false,
devMiddleware: {
writeToDisk: true,
},
},
}
LIVE DEMO
Since I can't Mock Chrome, please open the console to view the logs.😅 And try to change background.js
or contentScript.js
files.
Webpack DevServer port is 8080
, Static Server port is 3000
. In real environment, Chrome Extension will mount ./build
folder.
INTERNAL DEPENDENCIES
@dumlj/crx-live-reload-webpack-plugin
└─┬ @dumlj/seed-webpack-plugin
├─┬─ @dumlj/feature-updater
│ ├─── @dumlj/shell-lib
│ ├─── @dumlj/util-lib
│ └─── @dumlj/mock-libPRIVATE
└─── @dumlj/mock-libPRIVATE