Save A File To Filesystem With Chrome Packaged App

I have a variable full of css attributes that I would like to use to create a CSS file and save it to the apps file directory. How would I go about this in a chrome packaged app?

Solution 1:

You're not going to like this answer. You can't do this, and if you figured out a way to do it, it would be considered a security hole that the Chrome team would close.

Part of the design goals of packaged apps is to make the entire application statically analyzable at the time it's uploaded to the web store. This means that when a user is making the decision whether to install the app from the store, that decision is based on what the code actually does (it contains these scripts, this CSS, and these images, and it asks for these permissions) rather than on whether you trust the developer or the website. www.example.com might look trustworthy today, but tomorrow it might be sold to a new owner, or compromised. So the decision "do I trust example.com?" is hard. Packaged apps make that decision easier; in most cases, the "thing" you're trusting is right there, right in front of you, in the CRX you just downloaded.

If you understand this design goal, then you understand why the design of packaged apps doesn't allow for self-modifying code (which is the generic term for what you want to do). If your code could generate code, then it becomes significantly harder for static analysis to determine what the app could do (either intentionally or through bugs). Along the same lines, Content Security Policy is fairly strict for packaged apps and can't be set to a less restrictive policy, which is why eval() won't work in script.

Is there a reason why your JavaScript can't set your DOM elements' style properties? That ought to give you the flexibility you want without running up against the boundaries of the platform's security model.

Edit: just saw your other question, which seems very similar to this one. Are you building a CSS editor? Or are you trying to modify your own app's CSS? My answer above assumed the second case. If I've misunderstood your question, then clarify and I'll attempt to improve the answer.

Solution 2:

While @sowbug's answer was technically correct in that you cannot modify your apps packaged content, the OP can still achieve what is essentially the same.

Save css:

var someCSSCode = 'a { color:#de0 }';
webkitRequestFileSystem(PERSISTENT, 1024*1024, function(fileSystem) {
    fileSystem.root.getFile('my.css', {create:true}, function(file) {
        file.createWriter(function(writer) {
            this.onwriteend = function() {
                this.onwriteend = null;
                this.truncate(this.position); //in case a longer file was already here
            };
            writer.write(newBlob([someCSSCode], {type:'text/plain'}));
        });
    });
});

Load css:

webkitRequestFileSystem(PERSISTENT, 0, function(fileSystem) {
    fileSystem.root.getFile('my.css', {}, function(file) {
        var elem = document.createElement('link');
        elem.rel  = 'stylesheet';
        elem.type = 'text/css';
        elem.href = file.toURL();
        document.head.appendChild(elem); //or document.body
    });
});

Note that this code doesn't include any error handling.