Skip to content
a chrome extension composed of three elm apps that synchronize a single model
Branch: master
Clone or download
Pull request Compare This branch is 3 commits ahead, 1 commit behind danneu:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
background
common
content
popup
src
.gitignore
README.md
elm-import.js
elm-upgrade-2019-03-30T101459.696Z.log
elm.js
elm.json
elmext.html
gulpfile.babel.js
manifest.json
package-lock.json
package.json
popup.css

README.md

[Update]

For learning how to create Chrome extension by Elm, I forked this repo and updated it to Elm 0.19.

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.