webview - load html file

In this post I will show you how to load local html file inside a webview follow these four simple steps. This is a continuation of the post Getting started with webview in chrome apps.

Step 1

Inside a new directory, create a manifest.json.

{
  "manifest_version": 2,
  "name": "Loading Local HTML inside a webview",
  "version": "2.0",
  "app": {
    "background": {
      "scripts": ["main.js"]
    }
  },
  "permissions": [
    "webview"
  ],
  "webview": {
    "partitions": [
      {
        "name": "trusted",
        "accessible_resources": ["local.html"]
      }
    ]
  }
}

Step 2 : Remains the same as described in Getting started with webview in chrome apps

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 & local.html


/* local.html */

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <h2>Welcome to local HTML</h2>
        <p>I am local html from a trusted resources !</p>
    </body>
</html>


/* index.html */

<html>
    <head>
        Load Local HTML file inside a webview !
    </head>
    <body>
        <webview partition="trusted" src="local.html">
        </webview>
    </body>
</html>

Step 4

In chrome, navigate to chrome://extensions
Click on Load unpacked extensions
Select the directory for the project
Bingo ! Now you can load local html files inside your webview !