{"id":13448670,"url":"https://github.com/rubenspgcavalcante/webpack-chrome-extension-reloader","last_synced_at":"2025-03-22T09:31:34.985Z","repository":{"id":65412548,"uuid":"93183633","full_name":"rubenspgcavalcante/webpack-chrome-extension-reloader","owner":"rubenspgcavalcante","description":"🔥 Hot reloading while developing Chrome extensions with webpack 🔥","archived":true,"fork":false,"pushed_at":"2019-05-06T11:41:56.000Z","size":4710,"stargazers_count":380,"open_issues_count":2,"forks_count":25,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-03-05T00:24:09.502Z","etag":null,"topics":["chrome-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.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-02T16:19:51.000Z","updated_at":"2024-12-19T09:23:59.000Z","dependencies_parsed_at":"2023-01-22T08:05:39.036Z","dependency_job_id":null,"html_url":"https://github.com/rubenspgcavalcante/webpack-chrome-extension-reloader","commit_stats":null,"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubenspgcavalcante%2Fwebpack-chrome-extension-reloader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubenspgcavalcante%2Fwebpack-chrome-extension-reloader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubenspgcavalcante%2Fwebpack-chrome-extension-reloader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rubenspgcavalcante%2Fwebpack-chrome-extension-reloader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rubenspgcavalcante","download_url":"https://codeload.github.com/rubenspgcavalcante/webpack-chrome-extension-reloader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244937751,"owners_count":20535124,"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-extensions","hot-reloading","webpack","webpack-plugin"],"created_at":"2024-07-31T05:01:52.236Z","updated_at":"2025-03-22T09:31:32.512Z","avatar_url":"https://github.com/rubenspgcavalcante.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Disclaimer\nThis repository and package are archived, for now on it's recommended to use [webpack-extension-reloader](https://github.com/rubenspgcavalcante/webpack-extension-reloader)\n\n# Webpack Chrome Extension Reloader\nA Webpack plugin to enable hot reloading while developing Chrome extensions.\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-chrome-extension-reloader.svg)](https://badge.fury.io/js/webpack-chrome-extension-reloader)\n[![Build Status](https://travis-ci.org/rubenspgcavalcante/webpack-chrome-extension-reloader.svg?branch=master)](https://travis-ci.org/rubenspgcavalcante/webpack-chrome-extension-reloader)\n[![NPM Downloads](https://img.shields.io/npm/dt/webpack-chrome-extension-reloader.svg)](https://www.npmjs.com/package/webpack-chrome-extension-reloader)\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/b93aa8303bfb44a2a621cac57639ca26)](https://www.codacy.com/app/rubenspgcavalcante/webpack-chrome-extension-reloader?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=rubenspgcavalcante/webpack-chrome-extension-reloader\u0026amp;utm_campaign=Badge_Grade) [![Greenkeeper badge](https://badges.greenkeeper.io/rubenspgcavalcante/webpack-chrome-extension-reloader.svg)](https://greenkeeper.io/)\n\n## Installing\n\nnpm\n```\nnpm install webpack-chrome-extension-reloader --save-dev\n```\n\nyarn \n```\nyarn add webpack-chrome-extension-reloader --dev\n```\n\n## Solution for ...\nHave your ever being annoyed while developing a Google Chrome 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 do hot reloading!\n\n![](.github/sample-gif.gif)\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 chrome.runtime API.  Check out\n[Hot reloading Chrome 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-chrome-extension-reloader` to the plugins section of your webpack configuration file.\n```js\nconst ChromeExtensionReloader  = require('webpack-chrome-extension-reloader');\n\nplugins: [\n    new ChromeExtensionReloader()\n]\n```\n\nYou can also set some 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  },\n  //...\n  plugins: [\n      new ChromeExtensionReloader({\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\n          contentScript: 'content-script', // Use the entry names, not the file name or the path\n          background: 'background' // *REQUIRED\n        }\n      })\n  ]\n}\n```\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**Important**: 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 support\nIf you use more than one content script 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}\n```\n\nYou can use the `entries.contentScript` options as an array:\n```js\nplugins: [\n    new ChromeExtensionReloader({\n      entries: { \n        contentScript: ['my-first-content-script', 'my-second-content-script', /* and so on ... */],\n        background: 'background'\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 intalling the package globably, or directly using `npx` after installing locally the plugin:\n\n```bash\nnpx wcer\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 wcer --config wb.config.js --port 9080 --no-page-reload --content-script my-content.js --background bg.js \n```\nIf you have **multiple** content scripts, just use comma (with no spaces) while passing the option\n```bash\nnpx wcer --content-script my-first-content.js,my-second-content.js,my-third-content.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| --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| --no-page-reload |                   | Disable the auto reloading of all **pages** which runs the plugin |\n\nEvery time webpack triggers a compilation, the extension reloader are going to do the hot reload :)  \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### Building and Testing\nInside this repository have an example plugin, so you can test and see it working\nAfter clone the repo, run:  \n```\nyarn build\n```\n\n And then run:  \n ```\n yarn sample\n ```\n \n This will make the webpack run in watch mode for the sample plugin source and output the built files on the \"dist\"\n directory.\n Load the extension **(the files in \"sample/dist\" directory)** in Chrome using the \"load unpacked extension\", open a \n new tab in any site and open the developer panel on it. Watch the dev. tools console tab, and do some changes on \n the background or content script. Voila!\n\n**Note:**\nYou must have both background and content scripts for this plugin to work, and they must be specified in separate `entry` chunks\nin your webpack config.\n\nThe reloading script will be injected only on the main entries chunks (in background and content script). Any other\nchunks will be ignored.\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-chrome-extension-reloader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frubenspgcavalcante%2Fwebpack-chrome-extension-reloader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frubenspgcavalcante%2Fwebpack-chrome-extension-reloader/lists"}