All Projects â†’ rubenspgcavalcante â†’ Webpack Chrome Extension Reloader

rubenspgcavalcante / Webpack Chrome Extension Reloader

Licence: mit
🔥 Hot reloading while developing Chrome extensions with webpack 🔥

Programming Languages

typescript
23551 projects

Projects that are alternatives of or similar to Webpack Chrome Extension Reloader

Wcer
Webpack plugin to enable reloading while developing Chrome extensions.
Stars: ✭ 71 (-80.55%)
Mutual labels:  webpack, webpack-plugin, hot-reloading
Webpack Extension Reloader
A upgrade from 🔥webpack-chrome-extension-reloader🔥, now on all browsers
Stars: ✭ 355 (-2.74%)
Mutual labels:  webpack, webpack-plugin, hot-reloading
Critters
🦔 A Webpack plugin to inline your critical CSS and lazy-load the rest.
Stars: ✭ 2,894 (+692.88%)
Mutual labels:  webpack, webpack-plugin
Copy Webpack Plugin
Copy files and directories with webpack
Stars: ✭ 2,679 (+633.97%)
Mutual labels:  webpack, webpack-plugin
Webpack Assets Manifest
This Webpack plugin will generate a JSON file that matches the original filename with the hashed version.
Stars: ✭ 269 (-26.3%)
Mutual labels:  webpack, webpack-plugin
Unused Files Webpack Plugin
Glob all files that are not compiled by webpack under webpack's context
Stars: ✭ 210 (-42.47%)
Mutual labels:  webpack, webpack-plugin
Hard Source Webpack Plugin
www.npmjs.com/package/hard-source-webpack-plugin
Stars: ✭ 2,608 (+614.52%)
Mutual labels:  webpack, webpack-plugin
Webpack Shell Plugin
Run shell commands either before or after webpack builds
Stars: ✭ 250 (-31.51%)
Mutual labels:  webpack, webpack-plugin
Scalable React Typescript Boilerplate
⭐️ Scalable micro-framework featuring React and TypeScript
Stars: ✭ 174 (-52.33%)
Mutual labels:  webpack, hot-reloading
Webpack Cdn Plugin
A webpack plugin that use externals of CDN urls for production and local node_modules for development
Stars: ✭ 306 (-16.16%)
Mutual labels:  webpack, webpack-plugin
Webpack Sentry Plugin
Webpack plugin to upload source maps to Sentry
Stars: ✭ 299 (-18.08%)
Mutual labels:  webpack, webpack-plugin
Browser Sync Webpack Plugin
Easily use BrowserSync in your Webpack project.
Stars: ✭ 356 (-2.47%)
Mutual labels:  webpack, webpack-plugin
Bundle Buddy Webpack Plugin
🐐🐐🐐🐐 bundle-buddy-webpack-plugin 🐐🐐🐐🐐
Stars: ✭ 199 (-45.48%)
Mutual labels:  webpack, webpack-plugin
Wxapp Webpack Plugin
📦 微信小程序 webpack 插件
Stars: ✭ 185 (-49.32%)
Mutual labels:  webpack, webpack-plugin
Emojify Webpack Plugin
🦄 Turn your code into emoji
Stars: ✭ 178 (-51.23%)
Mutual labels:  webpack, webpack-plugin
Webpack Messages
Beautifully format Webpack messages throughout your bundle lifecycle(s)!
Stars: ✭ 238 (-34.79%)
Mutual labels:  webpack, webpack-plugin
Web Webpack Plugin
alternative for html-webpack-plugin
Stars: ✭ 318 (-12.88%)
Mutual labels:  webpack, webpack-plugin
Html Res Webpack Plugin
plugin for generating html in webpack
Stars: ✭ 170 (-53.42%)
Mutual labels:  webpack, webpack-plugin
Workerize Loader
🏗️ Automatically move a module into a Web Worker (Webpack loader)
Stars: ✭ 2,135 (+484.93%)
Mutual labels:  webpack, webpack-plugin
Webpack Virtual Modules
Webpack Virtual Modules is a webpack plugin that lets you create, modify, and delete in-memory files in a way that webpack treats them as if they were physically presented in the file system.
Stars: ✭ 286 (-21.64%)
Mutual labels:  webpack, webpack-plugin

Disclaimer

This repository and package are archived, for now on it's recommended to use webpack-extension-reloader

Webpack Chrome Extension Reloader

A Webpack plugin to enable hot reloading while developing Chrome extensions.

npm version Build Status NPM Downloads Codacy Badge Greenkeeper badge

Installing

npm

npm install webpack-chrome-extension-reloader --save-dev

yarn

yarn add webpack-chrome-extension-reloader --dev

Solution for ...

Have your ever being annoyed while developing a Google Chrome extension, and being unable to use webpack-hot-server because it's not a web app but a browser extension?

Well, now you can do hot reloading!

What it does?

Basically something similar to what the webpack hot reload middleware does. When you change the code and the webpack trigger and finish the compilation, your extension is notified and then reloaded using the chrome.runtime API. Check out Hot reloading Chrome extensions using Webpack for more background.

How to use

Using as a plugin

Add webpack-chrome-extension-reloader to the plugins section of your webpack configuration file.

const ChromeExtensionReloader  = require('webpack-chrome-extension-reloader');

plugins: [
    new ChromeExtensionReloader()
]

You can also set some options (the following are the default ones):

// webpack.dev.js
module.exports = {
  mode: "development", // The plugin is activated only if mode is set to development
  watch: true,
  entry: {
      'content-script': './my-content-script.js',
      background: './my-background-script.js'
  },
  //...
  plugins: [
      new ChromeExtensionReloader({
        port: 9090, // Which port use to create the server
        reloadPage: true, // Force the reload of the page also
        entries: { // The entries used for the content/background scripts
          contentScript: 'content-script', // Use the entry names, not the file name or the path
          background: 'background' // *REQUIRED
        }
      })
  ]
}

And then just run your application with Webpack in watch mode:

NODE_ENV=development webpack --config myconfig.js --mode=development --watch 

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).

Multiple Content Script support

If you use more than one content script in your extension, like:

entry: {
    'my-first-content-script': './my-first-content-script.js',
    'my-second-content-script': './my-second-content-script.js',
    // and so on ...
    background: './my-background-script.js'
}

You can use the entries.contentScript options as an array:

plugins: [
    new ChromeExtensionReloader({
      entries: { 
        contentScript: ['my-first-content-script', 'my-second-content-script', /* and so on ... */],
        background: 'background'
      }
    })
]

CLI

If you don't want all the plugin setup, you can just use the client that comes with the package.
You can use by intalling the package globably, or directly using npx after installing locally the plugin:

npx wcer

If you run directly, it will use the default configurations, but if you want to customize you can call it with the following options:

npx wcer --config wb.config.js --port 9080 --no-page-reload --content-script my-content.js --background bg.js 

If you have multiple content scripts, just use comma (with no spaces) while passing the option

npx wcer --content-script my-first-content.js,my-second-content.js,my-third-content.js 

Client options

name default description
--help Shows this help
--config webpack.config.js The webpack configuration file path
--port 9090 The port to run the server
--content-script content-script The entry/entries name(s) for the content script(s)
--background background The entry name for the background script
--no-page-reload Disable the auto reloading of all pages which runs the plugin

Every time webpack triggers a compilation, the extension reloader are going to do the hot reload :)
Note: the plugin only works on development mode, so don't forget to set the NODE_ENV before run the command above

Contributing

Please before opening any issue or pull request check the contribution guide.

Building and Testing

Inside this repository have an example plugin, so you can test and see it working After clone the repo, run:

yarn build

And then run:

yarn sample

This will make the webpack run in watch mode for the sample plugin source and output the built files on the "dist" directory. Load the extension (the files in "sample/dist" directory) in Chrome using the "load unpacked extension", open a new tab in any site and open the developer panel on it. Watch the dev. tools console tab, and do some changes on the background or content script. Voila!

Note: You must have both background and content scripts for this plugin to work, and they must be specified in separate entry chunks in your webpack config.

The reloading script will be injected only on the main entries chunks (in background and content script). Any other chunks will be ignored.

License

This project is under the MIT LICENSE

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected]