Package Exports
- create-react-ext
- create-react-ext/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (create-react-ext) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
A tool to generate Chrome extension using React & Webpack with auto-update support
Manifest
This tool generates manifest v3. Manifest v<3 won't be supported by Google developers
How to use
- Create React project (using create-react-app for instance)
- Install
create-react-ext: npm i create-react-ext - Install
@types/chrome: npm i @types/chrome (it'll add type definitions for Chrome extension development) - Start project (npm start for instance). After that webpack-dev-server must be launched at localhost:3000
- Generate extension: cd node_modules/create-react-ext && npm init (it'll add
extfolder in your project) - Load this extension in Chrome from ext folder
- Work with React project. Work with background.js / manifest.js. Changes will update and reload the extension
How it works
This tool generates chrome extension from React project. How?
- It'll create
extfolder - It'll generate in
extfolder basic files like background.js / manifest.js / icon.png - It'll generate in
extfolder webpack assests index.html / js-assets from webpack-dev-server - Tool will watch for changes in background.js / manifest.js or in React project and reload extension with changed files
TODO:
- Terminate broken ws-connections?
- Use webpack build assets in extension rather than generated from webpack-dev-server. It will omit redundant code and unneeded logs as well as errors
- Prevent background.js from caching.
chrome.runtime.reload()sometimes works - sometimes not