This boilerplate uses redux for state handling throughout the whole app ( background page , content script and popup). All three files are bundled together using webpack (webpack.config.js).
The same webpack bundles are used for both development and production. Bundles and static files such as images and fonts are hosted in '/assets'.
Clone latest repo and install dependencies:
$ git clone https://github.com/setzeus/setgov.git
$ cd setgov
$ npm install
Get familiar with the folder structure
|-- /assets/ # Contains all webpack bundles and static assets. Used for development AND production.
|-- /background/ # Holds all files associated with the background page of a chrome extension
|-- /reducers/ # Reducers for redux
|-- /content/ # Holds all files associated with the content script of a chrome extension
|-- /components/ # Any components used by the content script
|-- /popup/ # Holds all files associated with popup of a chrome extension
|-- /components/ # Files making up the UI and functionality of Popup
|-- /css/ # Holds all the styling for popup
Unlike other boiler plates the development is production ready. Editing files from outside the assets folder will be reflected in the produciton bundle.
An advantage of this process is that it uses one webpack file to bundle up all three of the main parts of your chrome extension: the popup, background page and content script. This makes it extremly easy to quickly test changes during development.
Additionally, you'll need to manually duplicate index.html from ~/popup/index.html
to ~/assets/
(Instructions for Sublime Text only)
npm install eslint -g
Open up the terminal and navigate to the root of the repo
First we'll need to create the basic bundle and output to the assets folder in the root directory
$ npm run build
To access the app
Webpack will listen to your files and hot reload on save, but you'll need to close and open the extension (or refresh your current tab) to actually see your changes
Webpack watches over these entry points and reflects the changes in the production bundle
./popup/index.js
./background/src/index.js
./content/src/index.js
popup behaves just like any React/Redux app using `popup/index.js as its entry point. This file also defines the port where it connects with the background page using react-chrome-redux
The background page holds the Redux store that communicates with the content script and the popup page
Redux store is created in background/src/index.js
Configure the reducers in background/src/reducers
Content script is injected through the background page in background/index.js
Script is injected on first tab created and any tab change ( basically whenever you change url )
Would be ecstatic to hear feedback, just open an issue!