{"id":17941043,"url":"https://github.com/simplifyjobs/webpack-ext-reloader","last_synced_at":"2025-05-16T10:08:48.924Z","repository":{"id":37021899,"uuid":"344718760","full_name":"SimplifyJobs/webpack-ext-reloader","owner":"SimplifyJobs","description":"Add hot reloading to your webpack WebExtension! 🔥","archived":false,"fork":false,"pushed_at":"2025-05-15T18:25:38.000Z","size":6693,"stargazers_count":104,"open_issues_count":19,"forks_count":31,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-16T10:08:42.936Z","etag":null,"topics":["chrome-extension","hacktoberfest","webextension","webpack","webpack-plugin"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/webpack-ext-reloader","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SimplifyJobs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.MD","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-03-05T06:39:15.000Z","updated_at":"2025-05-01T18:11:36.000Z","dependencies_parsed_at":"2024-01-01T13:32:13.368Z","dependency_job_id":"ede31301-1237-4816-8658-51bfe1d2b1b5","html_url":"https://github.com/SimplifyJobs/webpack-ext-reloader","commit_stats":{"total_commits":385,"total_committers":21,"mean_commits":"18.333333333333332","dds":0.5064935064935066,"last_synced_commit":"3b0a0a4084f55045d80e29fc520b91a27a0c1a2d"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimplifyJobs%2Fwebpack-ext-reloader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimplifyJobs%2Fwebpack-ext-reloader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimplifyJobs%2Fwebpack-ext-reloader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimplifyJobs%2Fwebpack-ext-reloader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SimplifyJobs","download_url":"https://codeload.github.com/SimplifyJobs/webpack-ext-reloader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254509477,"owners_count":22082892,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chrome-extension","hacktoberfest","webextension","webpack","webpack-plugin"],"created_at":"2024-10-29T01:04:57.782Z","updated_at":"2025-05-16T10:08:43.916Z","avatar_url":"https://github.com/SimplifyJobs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Webpack Extension Reloader\n\nA Webpack plugin to automatically reload browser extensions during development.\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/webpack/webpack\"\u003e\n    \u003cimg width=\"200\" height=\"200\" src=\"https://webpack.js.org/assets/icon-square-big.svg\"\u003e\n  \u003c/a\u003e\n  \u003cbr\u003e\n  \u003cbr\u003e\n\n[![npm version](https://img.shields.io/npm/v/webpack-ext-reloader)](https://www.npmjs.com/package/webpack-ext-reloader)\n[![Test Status](https://github.com/SimplifyJobs/webpack-ext-reloader/workflows/tests/badge.svg)](https://github.com/SimplifyJobs/webpack-ext-reloader/actions?query=branch%3Amaster)\n[![Known Vulnerabilities](https://snyk.io/test/github/SimplifyJobs/webpack-ext-reloader/badge.svg)](https://snyk.io/test/github/SimplifyJobs/webpack-ext-reloader/)\n[![NPM Downloads](https://img.shields.io/npm/dt/webpack-ext-reloader.svg)](https://www.npmjs.com/package/webpack-ext-reloader)\n\n\u003c/div\u003e\n\n## Installing\n\nFor npm:\n\n```bash\nnpm install webpack-ext-reloader --save-dev\n```\n\nFor yarn:\n\n```bash\nyarn add webpack-ext-reloader --dev\n```\n\n## What is this?\n\nThis is a webpack plugin that brings hot reloading functionality to WebExtensions, essentially resembling `webpack-dev-server` but for [WebExtensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions).\n\nThis project is a fork of [`webpack-extension-reloader`](https://github.com/rubenspgcavalcante/webpack-extension-reloader), maintained and updated by the team at Simplify. The goal is to continue supporting the latest version of webpack (`webpack-extension-reloader` only supports webpack v4) while introducing new improvements, such as HMR.\n\n![](.github/sample-gif.gif)\n\n**Note**: This plugin does not support [**Hot Module Replacement (HMR)**](https://webpack.js.org/concepts/hot-module-replacement/) yet.\n\n## How to use\n\n### Using as a plugin\n\nAdd `webpack-ext-reloader` to the plugins section of your webpack configuration file. This plugin does not output the manifest; it might read it for information at most. For outputting not only the `manifest.json` but other static files as well, use `CopyWebpackPlugin`.\n\n```js\nconst ExtReloader = require('webpack-ext-reloader');\n\nplugins: [\n  new ExtReloader(),\n  new CopyWebpackPlugin([\n      { from: \"./src/manifest.json\" },\n      { from: \"./src/popup.html\" },\n    ]),\n]\n```\n\nYou can point to your `manifest.json` file...\n\n```js\nplugins: [\n  new ExtReloader({\n    manifest: path.resolve(__dirname, \"manifest.json\")\n  }),\n  // ...\n]\n```\n\n... or you can also use some extra options (the following are the default ones):\n\n```js\n// webpack.dev.js\nmodule.exports = {\n  mode: \"development\", // The plugin is activated only if mode is set to development\n  watch: true,\n  entry: {\n    'content-script': './my-content-script.js',\n    background: './my-background-script.js',\n    popup: 'popup',\n  },\n  // ...\n  plugins: [\n    new ExtReloader({\n      port: 9090, // Which port use to create the server\n      reloadPage: true, // Force the reload of the page also\n      entries: { // The entries used for the content/background scripts or extension pages\n        contentScript: 'content-script',\n        background: 'background',\n        extensionPage: 'popup',\n      }\n    }),\n    // ...\n  ]\n}\n```\n\n**Note I**: Either `entry` or `manifest` is needed. If both are provided, the `entry` will override the information from `manifest.json`. If neither is provided, the default `entry` values (as shown above) are used.\n\nRun your application with Webpack in watch mode:\n\n```bash\nNODE_ENV=development webpack --config myconfig.js --mode=development --watch \n```\n\n**Note II**: You need to set `--mode=development` to activate the plugin. If you didn't set it in the webpack.config.js already, you need to run with `--watch` since the plugin will be able to sign the extension only if webpack triggers the rebuild.\n\n### Multiple Content Script and Extension Page support\n\nIf your extension uses more than one content script or extension page, like:\n\n```js\nentry: {\n  'my-first-content-script': './my-first-content-script.js',\n  'my-second-content-script': './my-second-content-script.js',\n  background: './my-background-script.js',\n  'popup': './popup.js',\n  'options': './options.js',\n}\n```\n\nUse the `entries.contentScript` or `entries.extensionPage` options as an array:\n\n```js\nplugins: [\n  new ExtReloader({\n    entries: { \n      contentScript: ['my-first-content-script', 'my-second-content-script'],\n      background: 'background',\n      extensionPage: ['popup', 'options'],\n    }\n  }),\n]\n```\n\n### CLI\n\nIf you'd rather skip the plugin setup, you can use the client included with the package. Install the package globally or use `npx`:\n\n```bash\nnpx webpack-ext-reloader\n```\n\nIf run directly, it will use the default configurations. But if you'd like customization:\n\n```bash\nnpx webpack-ext-reloader --config wb.config.js --port 9080 --no-page-reload --content-script my-content.js --background bg.js --extension-page popup.js\n```\n\nFor **multiple** content scripts or extension pages, separate the options with commas (without spaces):\n\n```bash\nnpx webpack-ext-reloader --content-script my-first-content.js,my-second-content.js --extension-page popup.js,options.js\n```\n\n### Client options\n\n| Name              | Default           | Description                                                       |\n| ----------------- | ----------------- | ----------------------------------------------------------------- |\n| --help            |                   | Shows help                                                        |\n| --config          | webpack.config.js | Path to the webpack configuration file                            |\n| --port            | 9090              | Port to run the server on                                         |\n| --manifest        |                   | Path to the extension's **manifest.json** file                    |\n| --content-script  | content-script    | **Entry/entries** name(s) for the content script(s)               |\n| --background      | background        | **Entry** name for the background script                          |\n| --extension-page  | popup             | **Entry/entries** name(s) for the extension page(s)               |\n| --no-page-reload  |                   | Disable auto-reloading of all **pages** running the plugin        |\n\nWhenever content or background scripts are modified, the extension will reload.  \n**Note**: This plugin only works in **development** mode. Remember to set the NODE_ENV before running the commands above.\n\n### Contributing\n\nBefore opening any **issue** or **pull request**, please refer to the [contribution guide](/.github/CONTRIBUTING.MD).\n\n### License\n\nThis project is a fork from [rubenspgcavalcante/webpack-extension-reloader](https://github.com/rubenspgcavalcante/webpack-extension-reloader), which is licensed under the [MIT license](https://github.com/rubenspgcavalcante/webpack-extension-reloader/blob/master/LICENSE). All modifications made in this fork are also licensed under the [MIT license](https://github.com/SimplifyJobs/webpack-ext-reloader/blob/master/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimplifyjobs%2Fwebpack-ext-reloader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimplifyjobs%2Fwebpack-ext-reloader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimplifyjobs%2Fwebpack-ext-reloader/lists"}