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


You may also like...