Chrome Apps Open one Page into another Page

551 Views Asked by At

I am developing app for chrome apps in HTML5

My problem is: I have to open another page on clicking the link

anchor tag (<a href="page1.html" target="_blank">) is also not working

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello World</title>
    <link href="styles/main.css" rel="stylesheet">
</head>
<body>
    <h1>Hello, World!</h1>
    <a href="page1.html" target="_blank">Click Me</a>
</body>
</html>

background.js:

chrome.app.runtime.onLaunched.addListener(function() {

  var screenWidth = screen.availWidth;
  var screenHeight = screen.availHeight;
  var width = 500;
  var height = 300;

  chrome.app.window.create('index.html', {
    id: "helloWorldID",
    bounds: {
      width: width,
      height: height,
      left: Math.round((screenWidth-width)/2),
      top: Math.round((screenHeight-height)/2)
    },
  });
});

How to open page1.html with a link from the app window?

1

There are 1 best solutions below

0
On

There are a few ways to create new windows in a Chrome App. First is simply window.open, which is what you'd do for normal web content (i.e., stuff you'd open in a normal browser tab). This works much like a native app opening a browser window using whatever application is registered to handle .html file extensions, which is to say it'll open the web content in the user's default browser.

Next is the very same chrome.app.window.create that you used to create your app's initial window. So set a listener on the link or button you want to initiate the opening of the new window, and put the create() call in there. This is what you'd want in your case, because you're not trying to display regular web content but rather are showing HTML that's embedded in your app.

Finally, if you want window.open behavior but need to know it'll open in Chrome in the same profile as the app, see chrome.browser.openTab, whose progress you can follow at https://code.google.com/p/chromium/issues/detail?id=358315. (Update: I just spoke with rpaquay who says this API is live in dev channel.)

For completeness, I should also mention normal web content in a Chrome App window, for which you want <webview>, or else packaged/embedded resources in a <webview>, which require webview:partitions:accessible_resources (see codereview.chromium.org/308903002 for details). I don't think that last part is live yet, so the names might change.