{"id":13448671,"url":"https://github.com/rubenspgcavalcante/webpack-extension-reloader","last_synced_at":"2025-05-15T18:00:22.446Z","repository":{"id":34723943,"uuid":"183030748","full_name":"rubenspgcavalcante/webpack-extension-reloader","owner":"rubenspgcavalcante","description":"A upgrade from 🔥webpack-chrome-extension-reloader🔥, now on all browsers","archived":false,"fork":false,"pushed_at":"2023-01-04T21:44:11.000Z","size":5830,"stargazers_count":495,"open_issues_count":90,"forks_count":79,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-10T14:42:04.736Z","etag":null,"topics":["browser-extension","extensions","hot-reloading","webpack","webpack-plugin"],"latest_commit_sha":null,"homepage":"","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/rubenspgcavalcante.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}},"created_at":"2019-04-23T14:18:23.000Z","updated_at":"2025-03-31T07:11:19.000Z","dependencies_parsed_at":"2023-01-15T08:46:42.769Z","dependency_job_id":null,"html_url":"https://github.com/rubenspgcavalcante/webpack-extension-reloader","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubenspgcavalcante%2Fwebpack-extension-reloader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubenspgcavalcante%2Fwebpack-extension-reloader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubenspgcavalcante%2Fwebpack-extension-reloader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubenspgcavalcante%2Fwebpack-extension-reloader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rubenspgcavalcante","download_url":"https://codeload.github.com/rubenspgcavalcante/webpack-extension-reloader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254119372,"owners_count":22017947,"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":["browser-extension","extensions","hot-reloading","webpack","webpack-plugin"],"created_at":"2024-07-31T05:01:52.256Z","updated_at":"2025-05-15T18:00:22.426Z","avatar_url":"https://github.com/rubenspgcavalcante.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Tools"],"sub_categories":[],"readme":"# Webpack Extension Reloader\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\u003c/div\u003e\n  \n[![npm version](https://badge.fury.io/js/webpack-extension-reloader.svg)](https://badge.fury.io/js/webpack-extension-reloader)\n[![Test Status](https://github.com/rubenspgcavalcante/webpack-extension-reloader/workflows/tests/badge.svg)](https://github.com/rubenspgcavalcante/webpack-extension-reloader/actions?query=branch%3Amaster)\n[![NPM Downloads](https://img.shields.io/npm/dt/webpack-extension-reloader.svg)](https://www.npmjs.com/package/webpack-extension-reloader)\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/b93aa8303bfb44a2a621cac57639ca26)](https://www.codacy.com/app/rubenspgcavalcante/webpack-extension-reloader?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=rubenspgcavalcante/webpack-extension-reloader\u0026amp;utm_campaign=Badge_Grade) [![Greenkeeper badge](https://badges.greenkeeper.io/rubenspgcavalcante/webpack-extension-reloader.svg)](https://greenkeeper.io/)\n\n## Installing\n\nnpm\n```bash\nnpm install webpack-extension-reloader --save-dev\n```\n\nyarn \n```bash\nyarn add webpack-extension-reloader --dev\n```\n\n## Solution for ...\nHave your ever being annoyed while developing a browser extension, and being unable to use\nwebpack-hot-server because it's not a web app but a browser extension?\n\nWell, now you can have automatic reloading!\n\n![](.github/sample-gif.gif)\n\n**Note**: This plugin doesn't allow [**Hot Module Replacement (HMR)**](https://webpack.js.org/concepts/hot-module-replacement/) yet.\n\n## What it does?\nBasically something similar to what the webpack hot reload middleware does. When you change the code and the webpack\ntrigger and finish the compilation, your extension is notified and then reloaded using the [standard browser runtime API](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions).  \nCheck out [Hot reloading extensions using Webpack](https://medium.com/front-end-hacking/hot-reloading-extensions-using-webpack-cdfa0e4d5a08) for more background.\n\n## How to use\n### Using as a plugin\nAdd `webpack-extension-reloader` to the plugins section of your webpack configuration file. Note that this plugin don't outputs the manifest (at most read it to gather information).\nFor outputing not only the `manifest.json` but other static files too, use `CopyWebpackPlugin`.\n```js\nconst ExtensionReloader  = require('webpack-extension-reloader');\n\nplugins: [\n  new ExtensionReloader(),\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```js\nplugins: [\n  new ExtensionReloader({\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```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 ExtensionReloader({\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**Note I**: `entry` or `manifest` are needed. If both are given, entry will override the information comming from `manifest.json`. If none are given the default `entry` values (see above) are used.\n\nAnd then just run your application with Webpack in watch mode:\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 (only if you didn't set on the webpack.config.js already) then you need to run with `--watch`, as the plugin will be able to sign the extension only if webpack triggers the rebuild (again, only if you didn't set on webpack.config).\n\n### Multiple Content Script and Extension Page support\nIf you use more than one content script or extension page in your extension, like:\n```js\nentry: {\n  'my-first-content-script': './my-first-content-script.js',\n  'my-second-content-script': './my-second-content-script.js',\n  // and so on ...\n  background: './my-background-script.js',\n  'popup': './popup.js',\n  'options': './options.js',\n  // and so on ...\n}\n```\n\nYou can use the `entries.contentScript` or `entries.extensionPage` options as an array:\n```js\nplugins: [\n  new ExtensionReloader({\n    entries: { \n      contentScript: ['my-first-content-script', 'my-second-content-script', /* and so on ... */],\n      background: 'background',\n      extensionPage: ['popup', 'options', /* and so on ... */],\n    }\n  }),\n  // ...\n]\n```\n\n### CLI\nIf you don't want all the plugin setup, you can just use the client that comes with the package.  \nYou can use by installing the package globally, or directly using `npx`:\n\n```bash\nnpx webpack-extension-reloader\n```\nIf you run directly, it will use the  default configurations, but if you want to customize\nyou can call it with the following options:\n```bash\nnpx webpack-extension-reloader --config wb.config.js --port 9080 --no-page-reload --content-script my-content.js --background bg.js --extension-page popup.js\n```\nIf you have **multiple** content scripts or extension pages, just use comma (with no spaces) while passing the option\n```bash\nnpx webpack-extension-reloader --content-script my-first-content.js,my-second-content.js,my-third-content.js --extension-page popup.js,options.js\n```\n\n### Client options\n\n| name             | default           | description                                                       |\n| ---------------- | ----------------- | ----------------------------------------------------------------- |\n| --help           |                   | Shows this help                                                   |\n| --config         | webpack.config.js | The webpack configuration file path                               |\n| --port           | 9090              | The port to run the server                                        |\n| --manifest       |                   | The path to the extension **manifest.json** file                  |\n| --content-script | content-script    | The **entry/entries** name(s) for the content script(s)           |\n| --background     | background        | The **entry** name for the background script                      |\n| --extension-page | popup             | The **entry/entries** name(s) for the extension pages(s)          |\n| --no-page-reload |                   | Disable the auto reloading of all **pages** which runs the plugin |\n\nEvery time content or background scripts are modified, the extension is reloaded :)  \n**Note:** the plugin only works on **development** mode, so don't forget to set the NODE_ENV before run the command above\n\n### Contributing\nPlease before opening any **issue** or **pull request** check the [contribution guide](/.github/CONTRIBUTING.MD).\n\n### License\nThis project is under the [MIT LICENSE](http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frubenspgcavalcante%2Fwebpack-extension-reloader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frubenspgcavalcante%2Fwebpack-extension-reloader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frubenspgcavalcante%2Fwebpack-extension-reloader/lists"}