Be the first user to complete this post

  • 0
Add to List

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 !
webview

Further reading




Also Read:

  1. webview - load html file
  2. webview - load html file
  3. sessionStorage vs localStorage vs cookie applications