Show Buttons
Share On Facebook
Share On Twitter
Share On Google Plus
Share On Linkdin
Share On Reddit
Share On Stumbleupon
Contact us
Hide Buttons

Getting started with webview in chrome apps

Do you want to get started in build­ing great chrome appli­ca­tions using web­view? You have come to the right place. Let’s get started.

In this small exer­cise, we will make a chrome app which will open a google.com inside a web­view in three sim­ple steps.

Step 1

Inside a new direc­tory, cre­ate 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 direc­tory, cre­ate a main.js


chrome.app.runtime.onLaunched.addListener( () => runApp() ); function runApp() { chrome.app.window.create('index.html'); }

Step 3

In the same direc­tory, cre­ate 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, nav­i­gate to chrome://extensions
  • Click on Load unpacked extensions
  • Select the direc­tory for the project
  • Bingo ! Your first chrome app appears !

webview

Fur­ther reading


You may also like...