Drift Chrome Extention

Chrome Extension docs

You can find the latest version on the extension here

Installing

1. Clone the repository.
2. Install global packages by running ./install.sh
3. Run npm install.
4. Run npm run start
5. Load your extension on Chrome following:
   1. Access chrome://extensions/
   2. Check Developer mode
   3. Click on Load unpacked extension
   4. Select the build folder.

Developing

Typescript

Typescript allows us to do strict types for Javascript.

Learn more here

Interfaces

All of interfaces will start with a capital I

So far the structure is to have a interfaces.ts inside each folder inside modules. This'll handle all the interfaces for the modules.

For front-end components, the interface file lives along side the component. Look at src/js/popup/ActivityFeed/interfaces.ts for a good example of how to type a react-redux connected component.

Testing Changes To manifest.json

Please note that the hot reloading does not work for changes to this file, so you will need to kill and rerun npm run start to see your changes.

Types for npm modules

You have to install the typings for modules to support ES6 import structure (import { get } from 'lodash') Some packages will have typing files built in, otherwise install them via npm install --save-dev @types/${package name}

If you are using a module that doesn't have a type file you can either choose to import the module using the require format, const package = require('package-name') or you can choose to create a declaration file. Create a ${package-name}.d.ts file in src/js/declarations.. The base file needs to have declare module '${package-name}' but eventually we should start writing out an actual declaration file with the correct interfaces.

Typesync is a cool library to look through your package.json and install any missing types

Webpack

No one knows how this works.

Strict Versioning

Save strict versions to the package.json

I'd recommend npm config set save-exact true to make this easier. Defaults any --save to be strict.

Testing

We have unit tests that run via npm run unit-tests.

These are Mocha tests that live in the test folder. These *.spec.ts files mirror the structure of the app itself.

We are using Chai for our assertion library. Currently we are using the expect format for assertions, but this is open for discussion.

Coverage

We also have code coverage reports. We are using Instanbul for coverages. You can run them via npm run coverage. This creates a coverage folder with the results. There is an index.html file that has a nice visual tables to look at the coverage per file.

Travis

Travis will run against all PRs and make sure all all the units pass. The PR will have a check that notifies us that the branch doesn't fail any unit tests.

Releases

We use tags to create releases.

• Create a tag by running npm version [semantic increment type]
  • ex: npm version patch for 0.0.x, npm version minor for 0.x.0, and npm version major for x.0.0 releases.
• Then push them up by running git push origin master and git push --tag
  • Travis will pick this up and automatically build, zip, and upload a file to our releases page.
• Once the zip file builds, download it from github and install it locally (testing)
• if that's in good shape, go to the Chrome Webstore through the Chrome Webstore developer dashboard and verify the new release is staged as the "Draft Version"
• then run the command npm run publish

You will need an account that has been added to the Drift Extension Group for permissions to edit the listing.

You will also need chrome store keys in your ENV in order to deploy (EXTENSION_ID, CLIENT_ID, CLIENT_SECRET, REFRESH_TOKEN)

Beta extension

• You can upload a build to the beta version of the extension by running npm run build-beta. This will build a version of the app that is for the beta channel and uploads it to the Chrome Web Store.
• To deploy it, you can run npm run publish-beta