Load local file in Chrome App Webview

Question

In Chrome packaged apps you can use to load external pages inside the app. Is there a way to make them load a local file (an html file inside the packaged app)? I can\'t us

Answer 1

You may try loading the file as a Blob via an XMLHttpRequest, then creating an object url to set it as webview's src attribute:

window.onload = function() {
    var wv = document.getElementById("wv");

    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'local_file.html', true);
    xhr.responseType = 'blob';
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var blob = new Blob([this.response], {type: 'text/html'});
            wv.src = window.URL.createObjectURL(blob);
        }
    };

    xhr.send();
};

Here's a working example: chrome_app_webview_test.

Answer 2

Don't have any code to show, but try this: Assuming you can read the local file (must use chrome.fileSystem.chooseEntry or have a retained entry on the file or its containing directory) and get a FileEntry object, you can then create a FileReader to get the file as a data URL. Then you can use that data URL directly in a webview. (Must have webview permission, in addition to the permissions needed to access the FileEntry.)

[Above is from memory while I'm eating breakfast. Might have some API names slightly off, but I hope you get the general idea.]

Answer 3

The local-resources sample has an example of loading an html file in a webview. You need to specify the files in the webview.partitions section of manifest.json.

Answer 4

Not exactly sure what you are looking for, but I have successfully used a <webview> tag pointing to a local .html file (including image and video resources) within the directory structure of an UNpackaged Chrome App. As its URL I simply use window.location.origin +'/files/my.html'. I leave my App unpackaged so I can dynamically generate the .html files. I guess you can pack the app if the content is static, but I have not tried.