Automatically reload your Chrome extension during development

This article is over 2 years old. Proceed with caution.

Regards ♨ – Minimul

Code from screencast and tutorial is available on Github. The screencast has more detail and explanation than this tutorial.

Boost development productivity by auto-reloading the Chrome extension

In my 2 part series I used Yeoman and Angular to create a Chrome extension. One annoyance was that after each code change I had to reload the extension and then reload the page to see the changes. This quickly becomes tiresome so I created a grunt plugin called grunt-crx-auto-reload that when used in conjunction with grunt watch will automatically reload the extension after a change.

This tutorial is based on the binged extension that was scaffolded by the Yeoman chrome-extension-generator. Adapt for your extension environment.

Switch into the binged directory.

$ cd ~/chrome-extensions/binged

Following the directions on the README, install grunt-crx-auto-reload

$ npm install grunt-crx-auto-reload --save-dev

Next, modify the Gruntfile.js as so:

  // omitted ..
  watch: {
    // omitted ..
    },
    crx_auto_reload: {
      files: ['<%= yeoman.app %>/scripts/{,*/}*.js', '<%= yeoman.app %>/templates/{,*/}*.html'],
      tasks: ['crx_auto_reload']
    }
  },
  crx_auto_reload: {
    options: {
      extensionDir: '<%= yeoman.app %>'
    },
    default: {}
  },
  connect: {
    options: {
  // omitted ..

After the first run of crx_auto_reload task a file reload.js will be created in the extensionDir location. We need to load reload.js as a background script within manifest.json.

  // omitted ..
     "128": "images/icon-128.png"
  },
    "background": {
      "scripts": [
          "reload.js"
        ]
  },
  "default_locale": "en",
  "content_scripts": [
  {
  // omitted ..

The reload.js file has not been created yet in app/reload.js so don't reload the extension yet or you will receive an error.