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 !
