Overview

Prerequisites

You'll need node and yarn

Dependencies

Some of the main libraries used

tiny-atom - state management
preact - fast & tiny alternative to React
webpack - module bundler & dev sever
bublé - fast ES5 compiler
react-ace - ace editor for react (in combination with brace)

Development setup

Chrome extension

Open "Extensions" in Google Chrome (chrome://extensions/)
Enable development mode and click on "Load unpacked"
Select the extension folder from this project:

Extension Options

For development you'll need to point the extension to your local dev server rather than the CDN:

Open the extension and click on "Extension options"
Tick Development Mode
Set the app URL to https://localhost:9000/dist/app.js

Start dev server

Run $ make dev
Open https://localhost:9000/dist/app.js to allow Chrome to allow it as an unsafe resource

Deployment

Run $ make build to create the dist folder with the following files:

app.js - this file contains the main app
app.js.map - this is the source map for app.js
extension.zip - this is the chrome extension which loads app.js
report.html - this is the output of webpack-bundle-analyzer

Upload app.js and app.js.map to the permutive-extensions GCS bucket and place them inside the extensions folder. They'll be available on our CDN (https://cdn.permutive.com/extensions/app.js).
When making updates to the extension you'll need to upload extension.zip to the Chrome Web Store. Don't forget to increase the version number in manifest.json.