This experimental project demonstrates a Chrome extension composed of three Elm applications that communicate through Chrome's message passing.
The three apps:
- 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.
- The content-script app runs on each website tab.
- 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.
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.
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.