graeme0811/stravistix

Chrome/Opera extension adding features for Strava website with new performances data and improved ergonomics. Options made with AngularJS

1/ Install StravistiX from Chrome Store

Go to http://thomaschampagne.github.io/stravistix/

2/ Install from sources

2.1/ Install NodeJS with node package manager

You must run npm cli command via nodejs.org to fetch JS dependencies.

2.2/ Install Gulp task runner via node package manager

Skip this step if you already have global gulp-cli on your computer.

npm install --global gulp-cli

2.3/ Install gulp plugins dependencies

npm install

This will install required gulp plugins in order to run project tasks. Gulp plugins are specified into ./package.json file as devDependencies

2.4/ Build the project

gulp build

First, this will download others JS dependencies (underscore, angularjs, chart.js, ...) specified in hook/extension/package.json file if not already downloaded.

Next, all the extensions files from hook/extension/ will be copied to dist/ folder.

2.5/ Loading the extension

You can now load extension from chrome://extensions chrome tab:

• In chrome, open new tab and type chrome://extensions then enter
• Tick Developer Mode checkbox
• Click Load Unpacked Extension button, then choose dist/ folder (this is where you have manifest.json file)
• Done !

3/ How to develop in ?

3.1/ Making changes and view them

Development must be done inside hook/extension/ folder.

In chrome, use dist/ folder as Unpacked Extension for development

To apply files changes from hook/extension/ to dist/ you must run the build command:

gulp build

To save time, you can automatically copy files changes from hook/extension/ to dist/ using watch command:

gulp watch

3.2/ Create a package archive

gulp package

This will create zip archive of dist/ folder in package/StravistiX_vX.X.X_[date].zip

3.3/ Clean the project

gulp clean

This will clean dist/, package/ & hook/extension/node_modules/ folders

4/ Code Editor and Indentation plugin used

I used Atom editor with atom-beautify plugin for code indentation.

My Atom plugin list ;)