A webpack plugin to auto reloader when content scripts change
MIT License
A webpack plugin to auto reloader when content scripts change
npm i -D chrome-extension-reloader-webpack-plugin
add to webpack config
...
import { ChromeExtensionReloaderWebpackPlugin } from 'chrome-extension-reloader-webpack-plugin';
import pkg from '../package.json';
const chromeMainfestVersion = pkg.chromeExtension['mainifest-version'];
...
{
plugins:[
...
new ChromeExtensionReloaderWebpackPlugin({
manifestPath: path.resolve(__dirname, '../src/manifest.v2.json'),
entry: {
background: path.resolve(
__dirname,
chromeMainfestVersion === 3 ? '../src/background/v3.ts' : '../src/background/v2.ts'
),
popup: path.resolve(__dirname, '../src/popup/index.tsx'),
options: path.resolve(__dirname, '../src/options/index.tsx'),
contentScriptDirPath: path.resolve(__dirname, '../src/contents')
}
}),
...
]
}
All content script in this directory will dynamic generate(There can only be two levels of nesting)
If the contentScriptDirPath is contents
:
contents/test.js 🆗
contents/test/index.js 🆗
contents/test/a.js 🚫
contents/test/t/index.js 🚫
Because background and content script file can't import other file, so this plugin will override some webpack options for chrome extension dev
{
host: "localhost",
port: 8080,
...your options,
injectClient: false,
injectHot: false,
hot: true,
writeToDisk: true,
disableHostCheck: true,
}
For debug by vscode, this options will use inline-source-map
Because background js can't import file, so this option will use:
splitChunks: {
cacheGroups: {
vendor: {
name: "vendor",
chunks(chunk) {
return ["popup", "options"].includes(chunk.name);
},
test: /[\\/]node_modules[\\/]/,
priority: -10,
},
common: {
chunks(chunk) {
return ["popup", "options"].includes(chunk.name);
},
minChunks: 2,
priority: -20,
reuseExistingChunk: true,
},
},
},
runtimeChunk: false,