Go back to the main page

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.
  1. Switch into the binged directory.
  2. $ cd ~/chrome-extensions/binged
    
  3. Following the directions on the README, install grunt-crx-auto-reload
  4. $ npm install grunt-crx-auto-reload --save-dev
    
  5. Next, modify the Gruntfile.js as so:
  6.   // 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 ..
     
    
  7. 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.
  8.   // 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.
  9. Run grunt watch.
  10. Edit app/templates/bing.html by adding a "s" to Bing and save the file.
  11. After adding the 's', grunt watch detects the change a fires off the crx_auto_reload task.
  12. Finally, refresh the Google Search page.
  13. 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.

Comment on this article?