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

webview — load html file

In this post I will show you how to load local html file inside a web­view fol­low these four sim­ple steps. This is a con­tin­u­a­tion of the post Get­ting started with web­view in chrome apps.

Step 1

Inside a new direc­tory, cre­ate 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 Get­ting started with web­view in chrome apps

In the same direc­tory, cre­ate a main.js


chrome.app.runtime.onLaunched.addListener( () => runApp() ); function runApp() { chrome.app.window.create('index.html'); }

Step 3

In the same direc­tory, cre­ate 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, nav­i­gate to chrome://extensions
  • Click on Load unpacked extensions
  • Select the direc­tory for the project
  • Bingo ! Now you can load local html files inside your webview !

webview-local-html

Fur­ther reading


You may also like...