Getting started with webview in chrome apps

Do you want to get started in building great chrome applications using webview? You have come to the right place. Let's get started. In this small exercise, we will make a chrome app which will open a google.com inside a webview in three simple steps.

Step 1

Inside a new directory, create a manifest.json.

{
  "manifest_version": 2,
  "name": "Getting started with webview",
  "version": "2.0",
  "app": {
    "background": {
      "scripts": ["main.js"]
    }
  },
  "permissions": [
    "webview"
  ]
}

Step 2

In the same directory, create a main.js


chrome.app.runtime.onLaunched.addListener( () => runApp() );

function runApp() {
  chrome.app.window.create('index.html');
}

Step 3

In the same directory, create an index.html


<html>
    <head>
        Getting started with webview !
    </head>
    <body>
        <webview src="https://www.google.com" style="height:800px; width: 800px"/>
    </body>
</html>

Step 4

In chrome, navigate to chrome://extensions
Click on Load unpacked extensions
Select the directory for the project
Bingo ! Your first chrome app appears !