Skip to main content

Reloading a Chrome App Project from Chrome Dev Tools

I'm going to be starting where I left off from my article Writing your First App on a Chromebook. If you haven't read that one yet, I would strongly recommend it.

So one of the pain points for me in working with Chrome apps is that it is not very easy to have a convenient way to reload the app for quick iteration. The standard way of doing this is to right-click on the app window and click  Reload app, or click the Reload link for your app on the chrome://extensions page. Both remove your hand from the keyboard to move a mouse over and click. While it doesn't sound like much, all those bits of time add up and wear on your ability to concentrate on the code.

What we need is a simple keyboard shortcut within Dev Tools to do this for us. Well, it turns out we already do, and we just need to help our app acknowledge it.

If you are ever using Dev Tools on a regular website and press CTRL+R it will reload the page, but if you do this in Dev Tools for your app window it will flat-out refuse with the following error:
Can't reload the window.
Now, if we try the shortcut on the Dev Tools window for our app's background page it will appear to be doing something, but our app window will not reload. This is because the command is only reloading the background page content, and that is where the key lies. If we can detect that reload on the background page, we can have the background page detect if the app window is open and reload it.

To do this we will first need to move our window creation call to it's own function to allow us to have it created when the app is launched, but also when the app's background page is reloaded. So our background.js should look something like this.
  1. function openMainWindow(){
  2.   chrome.app.window.create("main.html", {
  3.     id: "main",
  4.     innerBounds: {
  5.       minWidth: 320,
  6.       minHeight: 240,
  7.       maxWidth: 320,
  8.       maxHeight: 240
  9.     },
  10.     frame: {
  11.       type: "chrome",
  12.       color: "#ffaa55",
  13.       inactiveColor: "#dd8833"
  14.     }
  15.   });
  16. }

  17. chrome.app.runtime.onLaunched.addListener(openMainWindow);
So far this should allow our app window to open the same as it did before.
Now for some magic! Add the following at the end of background.js and try CTRL+R on the Dev Tools page for the app background page.
  1. var openWindows = chrome.app.window.getAll();

  2. for(var i = 0; i != openWindows.length; i++){
  3.   openWindows[i].close();
  4. }

  5. setTimeout(openMainWindow, 100);
Your app should now reload both the background page and the app window. Now let's step through the code to see what is going on here. Line 1 captures all of the open windows that are associated with our app, line 3 iterates through them, line 4 closes each window, and line 7 both waits for the old window to close(setTimeout) and calls the window creation function we created earlier(openMainWindow).

Now you have probably been able to tell that this setup would not allow you to have all windows connected with your app reopened on reload. The beauty of this configuration is that you can define what windows are re-opened. For example, if we also had second window, we could create a specific function for opening it like we did with openMainWindow and then add another timeout to open it like so:
  1. setTimeout(openMainWindow, 100);
  2. setTimeout(openExtraWindow, 100);
This is the simplest way I have found to make it simple to reload my apps quickly. Do you have any thoughts about how it could be done differently? Leave your ideas in the comments below and make sure to sign up for email notifications so you can know when I post new articles.