So, I am working on a project(building a chrome extension) that requires data to be stored on the local machine of the user. The size of data is quite large hence I thought of using IndexDB for this purpose.
My Question is whether is it possible to connect a chrome extension with IndexDB and query the database at the same time??
If Yes, Then how can I integrate them. In which file(popup.js or background.js or any other file) should I include the source code for creating the database.
I want the code for creating the database to run only once. After that I only want to update or delete data only.
If No, then is there any other way to achieve this?? The data is large hence I cannot store data in local storage.
Any paper, online material, advice or method from chrome developers or any other valid site would be helpful. Any example would help me alot.
Thankyou.
You can store tons of data in any HTML5 storage (including IndexedDB or localStorage) and chrome.storage.local with "unlimitedStorage" permission.
HTML5 data is stored per URL origin and each extension has its own one that looks like chrome-extension://id where id is a 32-character string that is the extension's id. In Firefox the origin looks like moz-extension://id.
Extension's own HTML5 storage:
can be accessed in any extension page (popup, options, background) just like you would do it in a web page, there are no differences.
cannot be accessed in a content script as it runs in a web page and thus can only access HTML5 storage of the web page's URL origin.
chrome.storage.local can be accessed in any extension page and in a content script.
No need for special event to create/upgrade your IndexedDB storage - it'll happen automatically if needed - simply open it as shown in the documentation whenever you need to access it and your onupgradeneeded callback will be invoked in case there was no DB or it was outdated.
Use a wrapper library for IndexedDB that provides a simplified syntax. Some are listed in the documentation, but you can probably find better ones yourself.
Related
I am looking through the code for a chrome extension i use to see what data is reported back to devleoper/mother-ship. I see that the extension's code saves some info using 'chrome.storage.sync.set' which of course makes sense as the variables that are stored there are available to me not matter what computer I load the extension on.
My question is... does the developer have access to this data? I would guess not but wanted to make sure. I have been looking for other code that posts data or does something that could send data back to developer but this was the only thing that looked suspicious so far.
No, developer cannot access chrome.storage.sync data and no one can read this except you.
This location is access controlled by
User
Extension
Infact any other extension can not read other extension's data. You can think about this storage similar to localstorage.
Now, If I ask you a question
Does the website developer has access to different values stored in user's local storage ?
The answer is No. Developer can control what to save in this storage and the values are user specific and they remain on user's machine.
However, this comes with a catch. You have to look out for code like this in the extension:
chrome.storage.sync.get('key', function(obj) {
// Make ajax to upload the key value pair
});
But by default, developer do not have access.
My chrome app needs to save a file with human-readable or standard format such as SQLite (It should be readable outside Chrome).
Is there any API suitable for this purpose?
Some files with .localstorage extension (SQLite format) are in Chrome\User Data\Default\Local Storage folder. Is it possible to create such files by the app?
Edited: The app should not ask user for extra permission.
Thanks for your consideration.
chrome.fileSystem API is what you need.
You will need to ask the user at least once where to save the file, but then you can retain the entry to write again to the same file/folder.
There is no way around asking the user to "escape the sandbox".
You'll want to use the Quota Management API. This is per-origin storage, and you request specific amounts of quota.
It sounds like you also want your users to open the files directly? There's an HTML5 filesystem explorer Chrome app that you can use. It'll show you the files, and you can figure things out from their URLs (e.g. I'm currently using filesystem:http://localhost:8000/temporary/bar for a local experiment).
Or are you looking for something more user friendly? I think you have to use file save in that case, the same way Google Drive does.
I want to develop an offline chrome application.
As in offline app SQL is not available , so what API can serve the following purpose.
=>Large Storage
=>Efficient method to set and get values
=>Fast
=>Secured (user cannot temper the data)
Confused between IndexDB and File System API
I have knowledge of web languages and how online apps can store data on server. But don't know much about how to save data offline.
It all depends on your needs.
The Chrome apps have couple of limitations. Because they must to be very fast some web API's are disabled. You can't use localStorage and webSql for example.
However in apps you have different set of storage options:
chrome.storage.local - equivalent for localStorage but asynchronous. you can also save/read many objects at once
chrome.storage.sync - same as above but data are shared between different app instances (on other browser's profiles or machines)
web filesystem API - well known web filesystem API that can keep any kind of file in protected, browser storage. User's do not have direct access to this files, only the app have
extension to the above: chrome.syncFileSystem - it works similar to the above but files saved using this API are synced between app's instances (e.g. different machines) using Google Drive as a back-end. However user's can't see synced files in Drive UI because they are hidden.
chrome.fileSystem API - another extension to the web filesystem API and it gives you access to the user's sandboxed local filesystem. You can read from and write to selected by the user locations.
IndexedDB - quoting the docs: IndexedDB is an API for client-side storage of significant amounts of structured data, which also enables high performance searches of this data using indexes.
other custom solutions saving data on some server and syncing changes in all instances
You can choose one of above. As I can see you'll probably want to use IndexedDB API. It is not SQL and it is different approach to saving data. If you never use it before try some sample app first. However it's fast, efficient and combining with unlimitedStorage permission also can set large amount of data.
I also suggesting you to read Offline First page in Chrome Apps documentation where are examples of solutions for making an app offline.
I've developed an iPad web app that uses the appcache. It's not intended to be a fully offline app but I use the appcache to store large image files so that they're not sent over 3G. Problem is when the manifest is updated the appcache updates whether the iPad is on wifi or 3G, which could be expensive.
Is it possible to have the user decide if the appcache can be updated or not? From what I've seen, this isn't possible, it all happens automatically, you just get events. But perhaps there's some trickery like writing the manifest on the fly or similar.
Using PHP on the server side if that helps. Thanks.
Connection Type: Theory & Future
There is a draft spec of Network Information API on W3C that provides the information of the connection type (ethernet wifi 2g 3g 4g etc.), but it hasn't been implemented on any browser yet apart from:
the stock Android browser on Android 2.2+ (not the Google Chrome browser)
navigator.connection.type // Based on W3C draft, (Implemented on stock Android browser)
and PhoneGap which is not exactly a browser
navigator.network.connection.type // on PhoneGap
Having that information in the future you could detect if the user has cellular data, then temporarily remove the src of the images and ask the user through a confirmation dialog.
You will also probably have to cancel the app cache update using:
window.applicationCache.abort() (documentation)
Reality
Unfortunately, the Net Info API is not available (at least not widespread) at the moment, but certainly will help in the future.
Long shot
There is a database that includes network speed (DIAL = dial up, DSL = broadband/cable, COMP = company/T1), but I haven't used it and I doubt it will help.
Dynamic App Cache
While checking into this, I tried to generate the html tag along with the manifest declaration on the fly, in order to combine it with the Network Info API but the AppCache manifest is loaded before javascript execution and is not affected afterwards.
So altering the manifest file on the fly through Javascript is not possible and data URI is not an option.
Alternative solution
HTML5 application cache is an untamed beast at the moment and there are talks to improve it. Until it changes to support more complex configurations (bandwidth level flag would be awesome), you could change perspective on the solution, although App Cache may be the best you have at the moment.
Depending on how big your images are you could rely on the normal browser cache. You could combine localStorage and far-future expiration HTTP headers. LocalStorage in order to keep track of the loaded/cached images.
First add a far in the future date for expiration on your images HTTP headers
On page load, remove all src from imgs
Loop the images and check localStorage if each image was loaded in the past
If there are images that were not loaded in the past, display a dialog confirming for the downloading of those images
If the image was loaded in the past, then put back the src on the img
For every image that is downloaded, save its URL on localStorage
I don't know what the status of indexedDB is on the iPad, but this could be an alternative solution.
In short: Indexeddb is a clientside database. Data is stored in object stores which are key/value pairs. The maximum storage capacity is in theory the maximum of your disk space. For more information about indexeddb:
Specification
My blog
What you could do with the indexeddb:
When someone navigates to a page:
Check every image tag if it is present in the indexeddb
if present
Get the image from the indexeddb and put it in the image tag
if not present
Download it
store it in the indexeddb
put the image in the image tag.
As extra (in the future) you can do as discribed by Sev: check the connetion type and only download the image when working on a fast internet connection.
I have 'invented' a working solution developing a webapp on the iPad (iOS 6.0.x) that may answer your question.
The idea is first to check if a localstorage variable is set/defined or not yet (I use the title of the page, thus the webapp name.)
If this localstorage variable exists, then assume (in webapp sandbox context) that its the first time the app is being run. At this point I populate a UUID in conjunction with $PHP_SESSION($uuid) to avoid 'cross app contamination' in server-side PHP land.
In addition to this I have a dynamic manifest.appcache.php which includes in the CACHE section a list of files to add to the manifest. Thus;
<?
echo $manifest_file_list[0]."\n";
?>
Using the JS appcache manifest event listeners I then monitor the progress to something like $('#manifestappcache').html(result);
I'd like to try my hand at some Chrome Extension Development. The most I have done with extensions is writing some small Greasemonkey scripts in the past.
I would like to use localStorage to store some data and then reveal the data on a extension button click later on. (Its seems like this would be done with a popup page)
How do I run a script everytime a page from lets say http://www.facebook.com/* is loaded?
How do I get access to the page? I think based off my localStorage requirement I would have to go down the background_page route (correct?) Can the background page and popup page communicate across the localStorage?
UPDATE:
I'm actually looking to learn the "Chrome way". I'm not really looking to run an existing Greasemonkey script
Google actually has some pretty good documentation on creating extensions. I recommend thoroughly reading the following two articles if you haven't already done so:
http://code.google.com/chrome/extensions/getstarted.html
http://code.google.com/chrome/extensions/overview.html
If you want to give your extension access when the user browses to Facebook, you'll need to declare that in the extension's manifest.
Unless you're wanting to save data beyond the life of the browser process, you probably don't need to use local storage. In-memory data can just be stored as part of the background page.
Content scripts (which run when you load a page) and background pages (which exist for the duration of the browser process) can communicate via message passing, which is described here:
http://code.google.com/chrome/extensions/messaging.html
Overall, I'd suggest spending some time browsing the Developer's Guide and becoming familiar with the concepts and examples.
Chrome has a feature to automatically convert greasemonkey scripts to extensions!