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.
Related
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
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.
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.
This is an example that shows what's my problem.
I'm writing a chrome extension that should replace google's logo in google main page (google.com). So I create a content-script that uses this javascript+jQuery code to do it (Please forgo google doodles!):
$("#hplogo").attr("src","the_address");
This content-script matches with https://*.google.com/ which contains google's main page.
Okay. If I put in the_address an image address which is uploaded on the internet, the extension works properly and gives me ideal result.
But since I don't want my extension to make loading time long for slow connections, I'm going to set the image's src to a file from hard disk.
So I put the image file to extension's folder then I tried the file name (eg : image1.gif) as the_address, but this time, the chrome doesn't load the image.
What have I to do? Thanks, gúys.
For obvious reasons the image won't load, I assume it is still using the webpage's domain. You may need to use chrome.extension.getURL, which allows you to link resources from an extension directory.
I am currently creating a Chrome extension (which uses javascripts mainly) that allows users to scrape the images on a webpage and download them. I have finished the link scraping part, and the code will return an array like:
["http://example.com/image1.jpg","http://example.com/image2.jpg"]
But how do I download all of the links in ONE CLICK? I tried listing all photos on a new tab and let the users to Ctrl+S save the page. But this greatly affects the UI and I do not like it. I do not host webpage so server side script may not be working.. Any other solutions?
As far as I know, Chrome extensions technically can't save files to disk like Firefox.
The only way to do this is using NPAPI
Unfortunately, extensions using npapi will most likely not be accepted by the Web Store due to security problems. Of course it'll be okay if you use it for yourself or host the extension on your website.
You can install and examize the code of the following extensions, maybe you can even use the provided npapi too:
Screen Capture (by Google) https://chrome.google.com/webstore/detail/cpngackimfmofbokmjmljamhdncknpmg
Chrome Toolbox (by Google) https://chrome.google.com/webstore/detail/fjccknnhdnkbanjilpjddjhmkghmachn
Awesome Screenshot: Capture & Annotate https://chrome.google.com/webstore/detail/alelhddbbhepgpmgidjdcjakblofbmce
Download Asisstant (by Google) - got killed I guess.