How to load HTML into iframe in a Chrome packaged app

Question

I am trying to make a chrome packaged app to allow a file to save itself back to disk. I am planning to open the file using chrome.fileSystem.chooseEntry(). Then I have to load it into an iframe with the sandbox attribute set. It will use document event listenders (document.createEvent) to wait for the client file to send its updated file content, and then save it back to the file system.

So there are two things I need to do, and the first one I have been able to find very little information on inside a Chrome packaged app, where you can't use document.write. I can't use body.innerHTML because it is a full HTML document with a head element.

I want to load the file into the iframe to run it. The file may be several MBs. Can a data url handle something this big? Do I put in in the src? Or do I put that somewhere else and set the src to javascript:void(0);?
I want to inject an element into the iframe DOM and listen for events on that element. This actually looks like I might be able to copy it over from the implementation for Firefox that we already have.

Here's the code I have to open it, copied from the chrome.fileSystem page.

chrome.fileSystem.chooseEntry(
    {
        type: 'openFile', 
        accepts:[{
            extensions: ['html']
        }] 
    }, 
    function(fileEntry) {
        if (!fileEntry) {
            return;
        }
        console.log(fileEntry);
        fileEntry.file(function(file) {
            console.log(file);
            var reader = new FileReader();
            reader.onload = function(e) {
                console.log(e); 
                //set iframe contentDocument
            };
            reader.readAsText(file);
        });
    }
);

This is the iframe.

<iframe id="test" sandbox="allow-scripts allow-popups allow-forms allow-same-origin" seamless="seamless"></iframe>

Have you complied this: developer.chrome.com/extensions/manifest/sandbox — Dayton Wang
@gui47, I saw that, but the trouble is that the user selects the file, and then I open it with URL.createObjectURL(fileEntry). So I could sandbox it, but I don't know which file they will open. It could be any file on disk. — Arlen Beiler

Arlen Beiler Arlen Beiler · Accepted Answer · 2015-07-08T22:36:43

I ended up using a webview. And I really like it, because it acts like a totally normal browser window, except for the context menu. But all the behind the scenes stuff seems normal, except for alert, prompt, and confirm, which you have to implement yourself in the parent window, and the fact that you have to use events to allow it to access almost anything external, except maybe ajax requests.

How to load HTML into iframe in a Chrome packaged app

1 Answers