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.
- Following the directions on the README, install
grunt-crx-auto-reload
- Next, modify the
Gruntfile.js
as so: - After the first run of
crx_auto_reload
task a filereload.js
will be created in theextensionDir
location. We need to loadreload.js
as a background script withinmanifest.json
. - Run
grunt watch
. - Edit
app/templates/bing.html
by adding a "s" to Bing and save the file. - Finally, refresh the Google Search page.
$ cd ~/chrome-extensions/binged
$ npm install grunt-crx-auto-reload --save-dev
// 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 ..
// 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.

grunt watch
detects the change a fires off the crx_auto_reload
task.
chrome://extensions
page.Conclusion
How does this magic happen? There is more explanation and commentary on the screencast as well as on the README.