https://github.com/workable/devit2016
Building a Workable Chrome Extension in React & Redux
https://github.com/workable/devit2016
Last synced: 11 months ago
JSON representation
Building a Workable Chrome Extension in React & Redux
- Host: GitHub
- URL: https://github.com/workable/devit2016
- Owner: Workable
- License: mit
- Archived: true
- Created: 2016-05-09T16:53:42.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2024-04-12T15:11:55.000Z (almost 2 years ago)
- Last Synced: 2025-03-24T19:17:36.879Z (about 1 year ago)
- Language: CSS
- Size: 586 KB
- Stars: 4
- Watchers: 39
- Forks: 5
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Building a Workable Chrome Extension in React & Redux
This project demonstrates a message passing paradigm between the different building blocks of a Chrome Extension (i.e. content script, background script, etc...) based on Redux principles and accessories.
Through custom middleware and store enhancers, content script actions are sent as messages to the background script that tranforms them to corresponding reactions in the background context and vice versa. Furthermore, background state is always shared and synced across every connected content script instance.
The final output is a simple Chrome Extension called "Spoiled". As indicated by its name, "Spoiled" fetches spoilers for Game of Thrones characters in free narratives and was developed for Workable's workshop for the Devit 2016 conference.
The spoiler API is also included in the project.
## Prerequisites
Install Node > v5.x
Install Gulp
```
$ npm install -g gulp
```
## Install extension
```
$ npm i -g gulp
$ cd /extension
$ npm install
$ gulp
```
Gulp will build the extension code and place it in the `app/` directory.
After that, on `chrome://extensions` select `Load unpacked extensions` and pick the project's `app/` directory.
## Start server
```
$ cd /server
$ npm install
$ npm start
```
## Demo
Browse to `http://localhost:1337` and you are good to go!