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

1. 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

2. 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).
3. 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.