aloha,
i trying make chrome app replaces chrome dev editor. here have currently:
background.js
chrome.app.runtime.onlaunched.addlistener(function() { chrome.app.window.create('backstage.html', { 'outerbounds': { 'width': 1036, 'height': 583 } }); }); backstage.html
<!doctype html> <html> <head> <title>celestia pro</title> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=material+icons"> <link rel = "stylesheet" href = "material.css"> <link rel = "stylesheet" href = "material.min.css"> <link rel = "stylesheet" href = "styles.css"> </head> <body> <!-- drawer open in large screens. header shown, in small screens. --> <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header"> <header class="mdl-layout__header"> <div class="mdl-layout__header-row"> <div class="mdl-layout-spacer"></div> <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right"> <label class="mdl-button mdl-js-button mdl-button--icon" for="fixed-header-drawer-exp"> <i class="material-icons">search</i> </label> <div class="mdl-textfield__expandable-holder"> <input class="mdl-textfield__input" type="text" name="sample" id="fixed-header-drawer-exp"> </div> </div> </div> </header> <div class="mdl-layout__drawer"> <span class="mdl-layout-title">title</span> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="">link</a> <a class="mdl-navigation__link" href="">link</a> <a class="mdl-navigation__link" href="">link</a> <a class="mdl-navigation__link" href="">link</a> </nav> </div> <main class="mdl-layout__content"> <div class="page-content"> <style> .demo-card-wide.mdl-card { width: 100%; } .demo-card-wide > .mdl-card__title { color: #fff; height: 176px; background: url('welcome-card.jpg') center / cover; } .demo-card-wide > .mdl-card__menu { color: #fff; } div.start-cards { padding-top: 25px; padding-left: 50px; padding-right: 50px; } </style> <div class="start-cards" align = center> <div class="demo-card-wide mdl-card mdl-shadow--2dp"> <div class="mdl-card__title"> <h2 class="mdl-card__title-text">welcome celestia pro</h2> </div> <div class="mdl-card__supporting-text"> celestia pro new integrated development environment (ide) allows developers create chrome apps , efficiently. we're still in our baby stages, hope tool works you. </div> <div class="mdl-card__actions mdl-card--border"> <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" onclick="runwizard()"> started </a> <script> </script> </div> </button> </div> </div> </div> </main> </div> </div> <script src = "./material.min.js"> <script src = "./material.js"> </body> </html> this seems fine , dandy until try make get started button mention open something. want open page called 'backstage2.html', no matter combination try, doesn't seem work. here have tried.
- the
<a href="">method - using chrome.app.window.current and/or chrome.app.window.create script adding script button ("runwizard()")
none of these seem work. want able open backstage2.html in same chrome app windows! how can this, if possible? extremely appreciated.
you may want use web components , import file in main file. can use regular web component. other option send request background page can hold reference opened window. reference has contentwindow property javascript's window object. can use replace content of man window (after read new file data using e.g. fetch).
