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 !
