Search code examples
google-chromegoogle-chrome-extensionbookmarksgoogle-chrome-app

Open Chrome bookmark app in new window


I am trying to build a bookmark app for Chrome by following the instructions here. This is the sample manifest.json:

{
  "manifest_version": 2,
  "name": "Google Apps Certification app",
  "description": "Link to Google Apps Certification website",
  "version": "1.1",
  "icons": {
    "128": "128.png"
  },
  "app": {
    "urls": [
      "http://certification.googleapps.com/app-info/"
    ],
    "launch": {
      "web_url": "http://certification.googleapps.com/"
    }
  },
  "permissions": [
    "unlimitedStorage",
    "notifications"
  ]
}

It works fine for my page, but I like to open it in a separate window (which gives it a standalone impression on the Chromebook). Is this possible by just changing the json? I can't seem to find the relevant documentation on this...


Solution

  • According to this guide the container property (inside launch) and set it to panel, e.g.:

    "apps": {
        ...
        "launch" {
            "web_url": "http://certification.googleapps.com/",
            "container": "panel",
            /*optional*/ "height": xxx,
            /*optional*/ "width": yyy
        }
    }
    

    BTW, are you sure you are after a hosted app (i.e. points to an already deployed and externally hosted web-app) and not a packaged app (i.e. includes all necessary code in a .crx package and is locally installed and deployed) ?

    A packaged app can declare a background script, which can handle the chrome.app.runtime.onLaunched event, which grants more freedom on how you launch your app, e.g.:

    /* `In manifest.json`: */
    "app": {
        "background": {
            "scripts": ["background.js"]
        }
    }
    
    /* In `background.js`: */
    chrome.app.runtime.onLaunched.addListener(function() {
        chrome.app.window.create('main.html', {
            bounds: {
                width: 800,
                height: 600,
                left: 100,
                top: 100
            },
            minWidth: 800,
            minHeight: 600,
            ...
        });
    });
    

    For the full list of available options, take a look here.

    For an overview of packaged apps, you can start here.