Automatically reload your Chrome extension during development

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.

Run grunt watch.
Edit app/templates/bing.html by adding a "s" to Bing and save the file.

After adding the 's', `grunt watch` detects the change a fires off the `crx_auto_reload` task.

Finally, refresh the Google Search page.

Bam! The change was picked up without having to reload at the `chrome://extensions` page.

Conclusion

How does this magic happen? There is more explanation and commentary on the screencast as well as on the README.

Pushed on 03/11/2014 by Christian