From a Chrome based browser
You should be able to install it in all Chrome based browser such as Chrome, Chrome Canary, Chromium, Opera, Vivaldi, Yandex, and more ...
From continuous integration
Using latest develop branch builds: https://thomaschampagne.github.io/elevate/#/builds
Install steps with a standalone build: https://github.com/thomaschampagne/elevate/wiki/How-to-install-elevate-build-archive
From the sources
Go to chapter Environment setup.
Project structure description
The project is split into 2 sub-projects: the core and the embedded app.
The core contains the plugin's behaviour that acts directly on strava.com website. This includes extended stats on activities & segments efforts, best splits, google maps support, etc...
The core sources are located in plugin/core directory
The embedded app contains features like fitness trend, year progressions, ... and global plugin settings such as common settings, athlete settings & zones settings.
The embedded app sources are located in plugin/app directory
Notice: The plugin/common directory contains sources shared by both sub-projects.
Description of frameworks & tools used.
At a glance...
- Webpack as packager and dynamic EcmaScript module loader.
Embedded app dependencies
- Angular as frontend framework
- Angular Material for material designed components.
- Metrics Graphics and d3js for charting.
- MomentJS to parse, validate, manipulate, and display dates and times.
Here's what you need to install to run the extension in a chrome based browser:
- Chrome based browser (Chrome, Chromium, Chrome Canary, Opera,...), of course...
- NodeJS here. Version 10.x is required.
That's all :)
Clone the project
git clone https://github.com/thomaschampagne/elevate.git
Or using SSH
git clone firstname.lastname@example.org:thomaschampagne/elevate.git
Fetch NPM dependencies
npm command should be installed on your system through the NodeJS installation.
Enter in project directory
Then install NPM dependencies with
Once you have installed the NPM dependencies, you can build the plugin with the following command:
npm run build
Both core and embedded app will be built.
Once the build is completed, the plugin will be located in dist/ directory.
A production build can be also run with
npm run build:prod
This will disable TypeScript debug sources map and enable Ahead-of-Time compilation for embedded app.
Load plugin into your browser
Into your chrome based browser:
- Open new tab and type chrome://extensions, then enter.
- Tick Developer Mode checkbox.
- Click Load Unpacked Extension button, then choose dist/ directory (this is where you have the manifest.json file)
- Make sure to disable other instances of elevate. You can re-enable them back from same tab.
- Open strava.com
Build plugin on files changes
In order to avoid to re-run the painful
npm run build task on each file changes. You could run the following command:
This task will watch for files changes and automatically rebuild plugin to dist/ directory. It's a way more suitable and faster for a development workflow.
Run unit tests
The below command will run core and embedded app unit tests into a headless chrome.
Should be run and has to pass before any work submission.
You can package the extension with the following command
npm run package
A production build will be executed for this task.
On packaging done, a release archive will be generated in package/ directory.
npm run clean
This will clean dist/, package/ & *.js *.map generated files
Git-Flow Repository structure
The project repository is fitted for GitFlow branches management workflow.