Chrome Extension save temporary file - javascript

I have a Chrome Extension that needs to temporarily save a few (two or three) PNG images.
What I am currently doing is getting the image data URI, and saving this in localstorage. But I know that this is not a very good way of doing it, especially as some of the images are bigger than 5mb, and I therefore have difficulty storing them.
I've seen a few extensions (Single File Extension, and a few others) that have the ability of "saving" a temporary file in the extension folder, but I am not sure how I can achieve this.
Can anyone help me out?

You can use HTML5 FileSystem APIs to save your images to a target directory.
If your option is not limited to chrome extensions, you can write an chrome app, and then chrome.fileSystem is available to you.

Related

Control a PPTX file with Javascript offline

This is an odd use-case and I've tried to steer the users away from this, but I have a request to load locally stored PPT files in an HTML environment.
The idea is to view the PPT in an iframe so that I can "decorate" all around it. Users will be creating playlists, of sorts, so I need to add "next" and "previous" presnetation buttons, etc.
I have an online version of this working using the Office webapp link that many other posts have shared, but there is a concern for poor connectivity so they want it to be available offline.
My instinct was to shape this up as a PWA. I can make them use Chrome, so I have the FileSystem API "caching" the PPT files from the online source. However, I have no way to render the saved files!
Because it's offline, I can't use googledocs or continue to MS web office.
I don't know the AppCache feature well enough, but wondered if I can preload all of the docs in an iframe, will it cache those. My thought is that it won't, because the content is on microsoft (or Google's) site.
All users will have a legal copy of PPT on the computer, if that helps at all.
So far I have tried storing the files using the filesystem API in combination with the Chrome offline viewer extension and alternatively the Native Docs extension. The Chrome one will allow me to open a doc, but directly in edit mode. I need to simulate the behavior of a ppsx file, but neither extension works with ppsx files and I don't see documentation for an API that will allow me to "auto-play" the presentations.
Thanks for any ideas!
Wayne

Download image, then save locally and access: Chrome extension

I am working on a chrome extension which acts as the new tab page for a user. A number of users have asked for the ability to use their own, locally saved pictures as a background image. However, I have not been able to find a way to do this.
I am aware that there are many questions on StackOverflow with the same title as mine, but none address my specific needs:
I need to download an image from a URL (i.e. a temporary Dropbox or Google Drive URL), or use an image from an HTML5 filepicker, as in this demo.
The image then needs to be saved locally, preferably to the extension directory, and be accessed by the extension every time it loads
I do not have access to PHP or to a server on which I could call a script or host images
The other answers suggest I use the Chrome FileSystem API. However, I understand that this API is only available to Chrome apps or on Chrome OS, not to extensions.
I also found an answer that mentions the file permission in the extension's manifest file.
"permissions": [
"file://*/*"
]
I would not be against using such a permission, even though "The user has to manually approve this permission by visiting chrome://extensions/ and put a tick at the "Allow access to file URLs" checkbox," as stated on this StackOverflow answer.
However, I would not know where to start with implementing this. Your help is very much appreciated!
** I am using jQuery in my extension, so that is an option, although I would prefer to use pure JS.
*** The extension is CleanStart for Chrome, in case that is important.
Just an idea:
Maybe I could use chrome.storage to save a hex string representing the image, and then retrieve that string and convert it back to an image, as in this StackOverflow answer.

A Chrome extension that displays a random picture from the chosen local folder for every new tab

I am new to building Chrome extensions. I want it to be able to allow the user to choose a local folder and one random picture from there should be displayed for every new tab.
As of now, I have the images in the extension folder and have hardcoded the image names for access.
I read the following SO questions around this:
Open (Import) file in a chrome extension
Access Local Files using a Google Chrome Extension
But I am not sure which one to implement and if they are the way to go.
It's not possible* with an extension to maintain a persistent access to a folder in a filesystem. Chrome Apps can do it, extensions cannot.
Your best bet is to allow upload of files into a virtual filesystem. But it will not allow modifying the pictures without interacting with your extension again.
Alternatively, you could integrate with some cloud provider, i.e. monitor a folder in Dropbox.
* P.S. Regarding NPAPI, yes, it's being deprecated, but there is an alternative: you can have a Native Host program that your extension talks to. However, it makes it very awkward to distribute the extension - Native Host can't be submitted to Chrome Web Store. But in principle that can give you the full power of a native app.

How to make a user-accessible file on the user's filesystem with a chrome extension

I'm making an extension that among other things edit a javascript file in an external editor (one on the user's computer). The extension has the javascript file saved in chrome.storage but it will ofcourse be a lot easier for the user to write code in their own editor.
This is why I decided to find something that creates a file on the user's filesystem which the user can find and edit it themselves, and if any changes are made, sync that back up to the extension (either by periodically checking or by using some listener).
I have looked around but nothing really seems to fit what I'm trying to do. Chrome's fileSystem API only works for chrome apps, not chrome extensions and the HTML5 fileSystem API does not allow for a simple filesystem URL to be requested and opened, instead it obfuscates the stored file and makes it practically impossible to edit that file easily.
Something else I looked at which might be more promising is letting the user edit one of the files in the directory where the extension is stored and somehow retrieving that content. This is however going to be a bit tough to implement with chrome's all the hash checking going on in chrome extensions not to mention the general modifying of those files' contents by the extension (possibly by hacking around by specifying your own update URL and "updating" a dummy javascript file that is going to be written to).
Is there any way to simply ask for a location to store a file and then allow the user to edit that file and sync it back up?
No, extensions are sandboxed from the real filesystem.
As you said, it's possible to read extension's own files; however, this is read-only for the extension and modifying those files on a deployed extension will result in Chrome detecting extension "tampering" and immediate disabling as a precaution.
The only way for a Chrome extension to escape the sandbox is, as wOxxOm suggested, a Native Host module. Note that this cannot be distributed in Chrome Web Store with the extension; it needs a separate installer.
Alternatively, you could use some sort of cloud storage with API to access it; e.g. a user could store something in a Dropbox subfolder, and your extension can authorize access to it via Dropbox API. Unfortunately, there is no "native" solution like syncFileSystem for Apps.

Javascript local file saving or onSave event to get saved filename

I'm developing a web app that needs some sort of filesystem access. Ideally I'd want to be able to "Open..." a file into the app and then "Save" the file back to local filesystem at the location that the user opened it from.
Currently, we use a java applet to achieve this functionality, but since java is going out of style, we're needing to do this with javascript and html5.
Obviously, this can't be done because of security reasons built into browsers, so I'm trying to somewhat emulate it.
I'm using the html5 file api to successfully import/open the files, so that's half the battle. The hard part is getting the saving feature. I'm getting close using an iframe and content-disposition, but problems arise when browsers are set to automatically download the files to a downloads folder... users may get confused and be unable to locate the file they just downloaded.
So, my question is this: is there some sort of onSave event or some kind of way for the browser's "Save As..." window to return at least the filename that the user saved the file under?
Also, I've looked into the filesystem/fileWriter html5 apis, but from my understanding they're limited to only a sandboxed area of the local filesystem and only available in chrome dev releases.
Any help would be appreciated!
No, there is no way to do that with pure JavaScript. You can manage to trigger a download with data URIs or an iframe with some headers but you can't circumvent the browsers' download managers.
You can either use a Flash or Java applet to handle the saving for you, or ask the user to right click on the link and do save as, then he might be able to choose the destination.
One popular option using Flash is Downloadify.

Categories