Creating links to other documents within a Chrome App.

[Andrew Dodson]

In my main.html file i put an anchor tag

<a href="lib/info.html">Info</a>

That didn't work, so i tried modifying all links at runtime, similar to how the background.js creates the main app page.

 // Create Links to launch the test environments
 var A = Array.prototype.slice.call(document.querySelectorAll('a'));
 A.forEach(function(a){


 // Center window on screen.
 var screenWidth = screen.availWidth;
 var screenHeight = screen.availHeight;
 var width = 500;
 var height = 300;


 a.addEventListener('click', function(){
 chrome.app.window.create(a.href, {
 id: "helloTestsID",
 outerBounds: {
 width: width,
 height: height,
 left: Math.round((screenWidth-width)/2),
 top: Math.round((screenHeight-height)/2)
 }
 });
 });
 })

I got the error

Unchecked runtime.lastError while running app.window.create: The URL used for window creation must be local for security reasons.

    at HTMLAnchorElement.<anonymous> (chrome-extension://pheppafanmpkmdkohnndopphekmmmpln/main.js:86:22)reportIfUnchecked @ extensions::lastError:133handleResponse @ extensions::sendRequest:78

index.html:1 Can't open same-window link to "chrome-extension://pheppafanmpkmdkohnndopphekmmmpln/lib/hello/tests/specs/index.html"; try target="_blank".

So my question? 

How do i (pulling hair out) create a simple link in Chrome Apps. Please note i need this to run in the chrome app, because its actually a test suite i'm opening. It has to be separate from the code because its a test suite etc... 

Thanks in advance.

[Andrew Dodson]

I have figured i could load in an iframe, as described here https://developer.chrome.com/apps/manifest/sandbox and exampled here https://github.com/GoogleChrome/chrome-app-samples/tree/master/samples/sandbox

This addresses this issue.

[Sergey]

If your content is indeed external, you're much better off using a webview instead of an iframe here: see https://developer.chrome.com/apps/app_external as to the reasons why.

You could also just add target="_blank" to your link, as the error message suggests, and remove all the JS code that you wrote: that would open the link in the browser with no additional work.

However, I strongly suspect that your resource (lib/info.html) is actually local to the app. If so, all you had to do to make the call to chrome.app.window.create() work was convert the relative URL to absolute using chrome.runtime.getURL: 

chrome.app.window.create(

 chrome.runtime.getURL(a.href),

 {

 outerBounds: {
 width: width,
 height: height,
 left: Math.round((screenWidth-width)/2),
 top: Math.round((screenHeight-height)/2)
 }
 });
 });

Also note that specifying a fixed id for your new window makes it a singleton: all your links will open in its single instance, possibly replacing the previous content. This may or may not be what you want: if it's not, drop the id or make it dynamic.