Upload local file to Chrome App Webview

Question

In Chrome apps that you can use to load external pages inside the app. Is there a way to get them to load a local file (html file inside a packaged application)? I can not use iframe because iframe does not support external resources (scripts, images, etc.).

Answer 1

You don’t need to show any code, but try this: suppose you can read a local file (you need to use chrome.fileSystem.chooseEntry or have a saved record in a file or a directory containing it) and get a FileEntry object, you can create a FileReader to get the file as the data url. You can then use this data URL directly in the web view. (Must have web browsing permission, in addition to the permissions required to access FileEntry.)

[Above, while I have breakfast. Some API names may be slightly disabled, but I hope you get a general idea.]

Answer 2

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

Answer 3

You can try uploading the file as Blob via XMLHttpRequest, and then create the URL of the object to set it as the webview 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 is a working example: chrome_app_webview_test .

Answer 4

Not quite sure what you are looking for, but I have successfully used the <webview> tag pointing to the local .html file (including graphic and video resources) in the directory structure of the Unpackaged Chrome application. As my URL, I just use window.location.origin + '/files/my.html'. I leave my application unpacked, so I can dynamically generate .html files. I think you can pack the application if the content is static, but I have not tried it.