Skip to content
a chrome extension composed of three elm apps that synchronize a single model
Branch: master
Clone or download
Latest commit 99dd280 Oct 10, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
background Initial commit Oct 10, 2017
common Initial commit Oct 10, 2017
content Initial commit Oct 10, 2017
popup Initial commit Oct 10, 2017
.gitignore Initial commit Oct 10, 2017
README.md Initial commit Oct 10, 2017
elm-package.json Initial commit Oct 10, 2017
gulpfile.babel.js Initial commit Oct 10, 2017
manifest.json Initial commit Oct 10, 2017
package-lock.json Initial commit Oct 10, 2017
package.json Initial commit Oct 10, 2017

README.md

elm-chrome-extension

This experimental project demonstrates a Chrome extension composed of three Elm applications that communicate through Chrome's message passing.

screenshot

The three apps:

  1. The persistent background app that runs globally for the duration of the browser session.
    • It holds the state and the other apps subscribe to state updates.
  2. The content-script app runs on each website tab.
  3. The popup app that runs each time you click the extension button.

The content-script and popup apps use one-way messaging to trigger actions in the background app.

Every time the background app model updates, it broadcasts to all listeners which replace their model with the new version.

The Demo

This demo syncs up a simple model that tracks global mouse clicks:

type alias Model =
    { clicks : Int }

A click in any tab and a click in the popup app will update the model for all tabs/popup apps.

Development

Git clone and then npm install.

Build the extension into the dist/ folder:

npm run build

Build to dist/ and rebuild on file changes:

npm run watch

Once built, load the dist/ folder as an extension in Chrome's UI.

You can’t perform that action at this time.