Use Javascript to write to file within Chrome and/or Firefox

Question

I'm creating a development tool that will be creating CSS based upon an SVG sprite sheet graphic file. This script needs to write out the CSS back to /public/css/main.css. So, no, I'm not interested in a sandboxed file structure (though that is cool stuff).

Keep in mind that this is NOT for production. It is simply a development tool to streamline our workflow (and hopefully benefit the web design/developer community). I have investigated the --allow-file-access chromium switch but still am not sure if it allows write privilege.

So, my question is: How can I write a string to a file using javascript that is running within the browser? Keeping in mind that this is not for production.

Already answered: How to read and write into file using Javascript or Use Javascript to write to text file — LasagnaAndroid
– LasagnaAndroid, Commented Oct 18, 2013 at 18:11

user2033671 · Accepted Answer · 2013-10-18 18:15:39Z

0

I don't think it's posible in chrome/firefox but I have seen webkit desktop application SDK's. These types of SDK's should have file I/O api's

tide SDK looks interesting.

answered Oct 18, 2013 at 18:15

user2033671

Sign up to request clarification or add additional context in comments.

3 Comments

Christian Kuetbach Over a year ago

phonegap or corodva has also ports for desktop applications.

risingtiger Over a year ago

It looks like this would be the most logical direction to take: to create some sort of chrome extension or app. It all seems a little overblown for what I'm trying to do, but doable.

risingtiger Over a year ago

Any pointers to good online documentation for file i/o in chrome for app/extension developing?

Christian Kuetbach · Accepted Answer · 2013-10-18 18:17:07Z

Simple answer:

not possible due to security constraints of the browser.

You can add flags like:

--allow-file-access

On ChromeOS, file:// access is disabled except for certain whitelisted directories. This switch re-enables file:// for testing.

--allow-file-access-from-files

By default, file:// URIs cannot read other file:// URIs. This is an override for developers who need the old behavior for testing.

But all these are for reading. I doubt you will succeed with this approach. MMaybe you should switch to node.js. There you can read / write files (I think)

update

For chrome you may create a NaCL-extension. There is a flag to disable the snadbox for NaCL extenations: --allow-nacl-file-handle-api

PS: I think a browser would be the hardest runtime environment to write files because:

There is (or a least was) no file-API
The file API has no access to the host filesystem
The browser develop do their best to create a sandbox.

LasagnaAndroid · Accepted Answer · 2013-10-18 19:08:08Z

0

If you're not making a Chrome/Firefox extension or desktop app (which, by what you said I'm sure you're not), there's no way you can do this with Javascript on the browser. You should use a server-side language for something like this and maybe send the changes directly to the server, and then back to the client, but I don't think that fits your needs.

answered Oct 18, 2013 at 19:08

LasagnaAndroid

2,9651 gold badge18 silver badges20 bronze badges

3 Comments

risingtiger Over a year ago

Currently I am using a server side script to receive the css string and save it back to the file. This complicates the deployment of this workflow across projects and team members so was hoping for a more succinct self contained method.

LasagnaAndroid Over a year ago

@risingtiger AFAIK the only way to achieve this (and maybe the easier) is to make a browser extension. Other thing you could do is allow them to download (and upload if needed) this new created css as a file, but that might complicate things too.

risingtiger Over a year ago

I went down the path of creating an extension in Chrome but, alas, ran into road blocks. Chrome provides an option in an extension manifest file to allow file access permission (which has to be verified by the user). Its syntax is as follows: "permissions" : [ "file://*",...]. I haven't found any solid documentation on this but so far I'm concluding that it only allows read privilege of any file but no write privilege.

Arthur Weborg · Accepted Answer · 2013-10-18 19:32:05Z

0

It might be worth your time to explore the File-System API.

The files generated are stored in Chrome app-data. You cannot write to files elsewhere on the file-system. However, perhaps a script to grab the files in app-data and pull to another directory ran after generation might suffice?

This is currently only available in a handful of browsers, Chrome is definitely included.

answered Oct 18, 2013 at 19:32

Arthur Weborg

8,6705 gold badges32 silver badges68 bronze badges

Collectives™ on Stack Overflow

Use Javascript to write to file within Chrome and/or Firefox

4 Answers 4

3 Comments

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related