Search code examples
google-chrome-extensiongoogle-chrome-appgoogle-chrome-os

Understanding Chrome App navigation


I am currently beginning to look at creating Chrome Apps and have followed a few of the basic tutorials now. I am happy with the basics so far except for one thing.

All the sample code and tutorials only seem to have one html file in the package, but what if I want to take a web app I have that uses more than one HTML page and turn it into a Chrome App?

How to I get the Chrome App to change from the index.html to another html page when I want to show some other html? I have tried using the standard html anchor tag along with the target set to _blank or _self, but it will only open a URL on the internet in a browser rather than changing the page in my application.

I am not from a web development background, so am I missing something basic to do this?


Solution

  • The simplest version of what Vincent Scheib said:

    index.html

    ...
    <div id="screen1" style="display:block">
    ...
    </div>
    <div id="screen2" style="display:none">
    ...
    </div>
    

    main.js

    ...
    // A navigational event happens:
    document.getElementById("screen1").style.display = "none";
    document.getElementById("screen2").style.display = "block";
    ...