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": {
    "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() {

Step 3

In the same directory, create an index.html & local.html

/* local.html */

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

/* index.html */

        Load Local HTML file inside a webview !
        <webview partition="trusted" src="local.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 !


Further reading

You may also like...

Leave a Reply

Your email address will not be published.