https://github.com/tripss/chrome-extension-react-redux-boilerplate
Chrome extension boilerplate with React and Redux
https://github.com/tripss/chrome-extension-react-redux-boilerplate
Last synced: about 1 year ago
JSON representation
Chrome extension boilerplate with React and Redux
- Host: GitHub
- URL: https://github.com/tripss/chrome-extension-react-redux-boilerplate
- Owner: TriPSs
- License: mit
- Created: 2018-09-03T14:24:29.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-05-22T08:59:10.000Z (about 7 years ago)
- Last Synced: 2025-01-22T00:43:22.123Z (over 1 year ago)
- Language: JavaScript
- Size: 14.6 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Chrome Extensions React Redux Boilerplate
## Scripts
|`npm run `|Description|
|------------------|-----------|
|`build`|Builds the application one time|
|`build:watch`|Builds the application and watches the files for changes|
## Application Structure
The application structure presented in this boilerplate is **fractal**, where functionality is grouped primarily by feature rather than file type. Please note, however, that this structure is only meant to serve as a guide, it is by no means prescriptive. That said, it aims to represent generally accepted guidelines and patterns for building scalable applications. If you wish to read more about this pattern, please check out this [awesome writeup](https://github.com/davezuko/react-redux-starter-kit/wiki/Fractal-Project-Structure) by [Justin Greenberg](https://github.com/justingreenberg).
```
.
├── src # Application source code
│ ├── config # Project configuration settings
│ ├── components # Reusable Presentational Components
│ ├── containers # Reusable Container Components
│ ├── modules # Modules that deserve a separate file
│ ├── routes # Main route definitions and async split points
│ │ ├── index.js # Bootstrap main application routes with store
│ │ └── Home # Fractal route
│ │ ├── components # Route specific components
│ │ └── index.js # Exports all the route specific components
│ │ ├── index.js # Route definitions
│ │ ├── assets # Assets required to render components
│ │ ├── HomeActions # Collections of actions
│ │ ├── HomeComponent # Presentational React Components
│ │ ├── HomeConstants # Collections of constants
│ │ ├── HomeContainer # Connect components to actions and store
│ │ ├── HomeReducer # Components reducer
│ │ ├── HomeSelectors # Collections of selectors
│ │ └── routes ** # Fractal sub-routes (** optional)
│ ├── reducers.js # Reducer registry and injection
│ ├── background.js # Background application, syncing store to chrome storage
│ ├── content.js # Startpoint of the app that is injected to html pages
│ ├── popup.js # Startpoint of the app that is opened when clicking on the app icon
│ └── styles # Application-wide styles (generally settings)
└── webpack.config.js # Webpack configuration
```
## Installation
1. Run `npm run build`
1. Open `chrome://extensions/` in your browser and enable Developer mode in the top right corner
1. Drag the [assets](./assets) folder into screen
1. The extension should now appear
> Small note: When updating background.js you have to reload the app
## Collaboration
If you have questions or [issues](https://github.com/TriPSs/chrome-extension-react-redux-boilerplate/issues), please [open an issue](https://github.com/TriPSs/chrome-extension-react-redux-boilerplate/issues/new)!