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": {
    "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 () => runApp() ); function runApp() {'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 !


Fur­ther reading

You may also like...