Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

mv3-hot-reload

Package Overview
Dependencies
3
Maintainers
1
Versions
9
Issues
File Explorer

Advanced tools

mv3-hot-reload

Enable hot reloading for content script and background script in MV3.

    0.2.7latest

Version published
Maintainers
1
Yearly downloads
6,059

Weekly downloads

Changelog

Source

  • chore(README): add webpack multi-main entry to usage c4ee830
  • Merge pull request #6 from s-KaiNet/main 345cfec
  • Better handling for multiple watchers. 21c803f

https://github.com/pacexy/mv3-hot-reload/compare/v0.2.6...v0.2.7

Readme

Source

mv3-hot-reload

Enable hot reloading for content script and background script (service worker) in MV3.

Install

yarn add mv3-hot-reload

How to use

1. Inject the code for hot reloading

Leverage Webpack's "multi-main entry" (Recommended)

// webpack.config.ts const isDev = process.env.NODE_ENV === 'development' function getEntry(name: string) { return [path.join(srcDir, name), ...(isDev ? [`mv3-hot-reload/${name}`] : [])] } const webpackConfig = { // ... entry: { // ... background: getEntry('background'), content: getEntry('content'), }, }

Import files into your background script (service worker) and content script

The code for hot reloading will only execute when process.env.NODE_ENV === 'development'.

// background.ts import 'mv3-hot-reload/background' // your code... // content.ts import 'mv3-hot-reload/content' // your code...

2. Add a script to your package.json and run it before development

Example:

"watch:src": "webpack --config webpack/webpack.dev.js --watch", + "watch:dist": "mv3-hot-reload", + "dev": "concurrently yarn:watch:*",

mv3-hot-reload.config.js (Optional)

module.exports = { // Specify the port of hot reload server, defaults to 9012 port: 9012, // Specify the directory you want to watch, defaults to 'dist' directory: 'dist', // Specifies an array of filenames that should be excluded in watched directory exclude: [], }

If you want to set the port, you also need to expose it with process.env.MV3_HOT_RELOAD_PORT to the client side.

An example:

// webpack.config.js const config = require('./mv3-hot-reload.config') module.exports = { // ... plugins: [ new webpack.EnvironmentPlugin({ MV3_HOT_RELOAD_PORT: config.port, }), ], }

Example

pacexy/chrome-extension-typescript-starter

Credits

The implementation of hot reloading in mv3 refers to theprimone/violet.

License

MIT

Keywords

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc