Make localstorage dataset created with a local webapp in Firefox accessible to the same webapp when run in Chrome or other browsers - cross-browser

I wrote a webapp that I use to store various information locally using Local Storage in Firefox. I want to run the webapp in Chrome or another brower using the same local storage data. Is that possible? If not, is it possible to copy the local storage data created by the webapp in Firefox to a file that can be used by the same webapp in Chrome?

localStorage is a storage on client side(web browser), you can't share localStorage of one browser with other.
Although you can copy localStorage content by running given javascript in browser console
copy(JSON.stringify(localStorage));
it'll copy all localStorage content to clipboard.
Now, you can import it into another browser by running given javascript in console
var data = '/*paste stringified JSON from clipboard*/';
Object.keys(data).forEach(function (k) {
localStorage.setItem(k, data[k]);
});

Related

Chrome Extension and IndexDB Integration

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.

Download files/videos from url and write them to disk without prompting save location dialoge using chrome app

I am writing a chrome app which needs to download videos from urls in background after specific time intervals.
Unlike chrome extension ( which has chrome.downloads api to deal with downloads ) chrome.downloads in not available for chrome apps.
If I use filesystem api, it shows the save location dialogue which I do not want. As, I need downloads to be dealt in the backgorund.
Is there any work around for this requirement ?

Is it possible to access localStorage for my Angular app through Gulp?

I'd like to run a gulp task that populates my app with sample data from localStorage. It looks like I can't access localStorage from gulp, is this possible/is there another way of doing what I want to do?
It's not easy, but it can be done with a mix of gulp and javascript. You will have to create an javascript page to populate the localstorage. Just keep in mind the localstorage is domain specific (protocol, domain, port).
Here's what you'll have to do:
create a gulp task to open a browser tab (make sure it's the same domain as your app)
point browser tab to the html page (containing the script) to populate the localstorage
localStorage is a browser feature. The API itself is only implemented there, and the data is stored in the browser profile alongside cookies, in a browser-specific format, handled by an entirely different Javascript VM.
So no, there's no way to change data specific to a browser session from node.
You could have gulp generate a bit of code to setup localStorage and inject that into your page, so it populates the storage as soon as you load the page, but it's hard to provide a generic response here.

How to write a blob to a file in Chrome apps?

I am developing a chrome app which can download videos from server, save it locally and display it when user wants to. I am able to get the blob using xhr from server, but I do not know how to write it to a file, I am using Chrome.file system api. No luck. Any links to tutorials on using file write api ?
Take a look fileSystem API
Chrome Dev Editor uses it.

Access webpage's localStorage from a Chrome extension

i'm developing a chrome extension which requires to get the values(to plugin) from local storage where values are stored by some other webpages that were created by me
In short: Access a webpage's localStorage from a Chrome extension script
I just tested it, and if you access localStorage from the context of a content script, you get the webpage's localStorage. So, nothing special is required besides injecting a content script into the webpage you need.
To communicate the value from the content script you can use Messaging API, and you can use chrome.storage.local API to save data in a way that's accessible from both the content script and the background page.