Automate Chrome Extension Deployment

Google Chrome gives developers rich Chrome APIs to interact with the Chrome browser and web pages through extensions¹. Extension files are zipped into .crx package that users download and install and generally fulfill a single purpose making them easy to understand (i.e. An extension that allows shortening URLs can contain multiple components and a range of functionality, as long as everything points towards a common purpose). You can read more about features Google Chrome extension provides and if you have not built an extension in the past, I encourage you to check out sample extensions and read this getting started tutorial.

In this article, I will show you how to automate deploying your extension to Chrome Web Store. The traditional way to update your existing extension is through the Chrome Developer Dashboard upload interface and afterwards publish to the Chrome Web Store.

This is fine, except you will need to create your app’s zip file, alongside updating your manifest.json file. I strongly believe in automating simple tasks and with Travis CI, you can achieve Continuous Deployment².

Setup

You will need to have:

• Node.js and npm installed
• Travis CI account and Travis CI Client (CLI) installed
• Chrome Web Store Developer Account
• An existing extension project
• Understanding of npm and package.json file
• Coffee

We will be using chrome-webstore-upload-cli, an npm package that provides CLI options that allows interacting with Chrome Web Store API.

$ npm install chrome-webstore-upload-cli --save-dev

Read this guide and follow steps to generate Google API keys. You will need Google API clientId, clientSecret and refreshToken. Keep this safe and secure, it is required for deploying your extension to Chrome Web Store.

Configure

Travis CI

Travis CI will enable Continuous Deployment of your extension project to Chrome Web Store, confirm you have authorized Travis CI with your GitHub account and activated the extension repository you want to use with Travis CI.

Add a .travis.yml file to your extension project, this controls Travis CI behavior.

$ touch .travis.yml

Copy and paste the below into the .travis.yml and replace kcehmhmmioeddhjddnaenanalobejajn with your extension project EXTENSION_ID.

language: node_js
node_js:
  - 8.11.3

deploy:
  skip_cleanup: true
  provider: script
  script: npm run deploy
  on:
    branch: master

env:
  EXTENSION_ID=ockddcaogdonfmcfhdb

This specifies a Node.js project that should be built with version 8.11.3.

• deploy block specifies the command Travis CI will run on the GitHub master branch.
• env block specifies environment variables³ to include during build.

Add Google API clientId, clientSecret and refreshToken into your Travis CI project settings, environment variables section. Do not check Display value in build log.

npm Scripts

npm scripts are used to automate common repetitive tasks without the need for tools or external task runners like Gulp. Most of our work will happen in the package.json file that npm uses as a manifest.

If you do not have this file, create using npm initialize option

$ npm init -y

and include deploy property in scripts section

{
  "scripts": {
    "deploy": "webstore upload --auto-publish",
  },
  "devDependencies": {
    "chrome-webstore-upload-cli": "^1.2.0",
  }
}

You might have other scripts command in your package.json file. But this deploy script will invoke chrome-webstore-upload-cli upload method with flag –auto-publish and will read EXTENSION_ID, CLIENT_ID, CLIENT_SECRET and REFRESH_TOKEN from Travis CI environment variables.

Deploy

Update your extension version field in manifest.json file and push this changes alongside any previous change to your extension GitHub repository, master branch and watch Travis CI deploy your changes to Chrome Web Store.

You can run the deploy command locally, npm run deploy but should fail unless you provide EXTENSION_ID, CLIENT_ID, CLIENT_SECRET and REFRESH_TOKEN in your shell.

$ EXTENSION_ID=xxxx CLIENT_ID=xxxx CLIENT_SECRET=xxxx REFRESH_TOKEN=xxxx npm run deploy

Final Thoughts

By now you should have Continuous Deployment setup with Travis CI and subsequent push to GitHub master branch should trigger build and deploy to Chrome Web Store. I recommend you check out this project, ufus-extension to learn more about extensions and view chrome-webstore-upload-cli setup.

Mail me if you have any questions? Would be happy to help.