send predefined data to browser local storage with .crx - javascript

I am building my first chrome extension, for that I want to have some predefined data at client browser.
I want that data be able to be edited by user by means of extension and save back the changes.
I first thought of using HTML5 local database or Indexed Database APIfor this.(Am I doing right?)
But I don't know how can I send this local database to client place in .crx..because the database will be with browser rather than extension.
How can I send data to client side browser by .crx and save the data on browser?
(I know its not right to save data on browser, but I can't save data back if I save data along with extension)
What other way I can use to implement the requirement?
can I use the same method if I want to use Indexed Database API instead?
My data is not simple key value pair but table kind of data.
I don't have any code for data access part, because I want to be sure before I can proceed

No, You can't send database file with ctx file. Simply You can't replace it on client side.
Actually you have two options:
1) save predefined data into your extension (in any extension file. save whole query or data as JSON) and after first run exec those query to local Database.
2) create web service from where you will get predefined data and save it to local DB.
For example (data.json):
[{"name":"name", "desc":"desc","some_column":"some value"},{"name":"name", "desc":"desc","some_column":"some value"}, ...]
In background.html:
var xhr = new XMLHttpRequest();
xhr.open('GET', chrome.extension.getURL('data.json'), false);
var dataStr = xhr.send(); //don't do this way. use asynch api :)
var data = JSON.parse(dataStr);
//connect to local database
for(var _item in data){
//create query to insert data into DB
//and exequte query
}

Related

Encrypting Url and deleting data in MongoDb

Is there anyway to like encrypt the url, I have a copy of a file that is stored somewhere else (var linkoffile = url where that file is saved) , and when a user requested for that file, I will make a copy of that url in another collection in mongodb and it has an expiration time , a time duration where that file will be available for that user, after that time , the copy of that url will be removed for that user (here I used TTL Indexes of mongodb). But Im thinking that since the url of that file is exposed in the frontend or in the client side, even if you removed the url copy in the mongodb , any user that already copied the url before it expired can still access the document, so im thinking of like encrypting the url so that user will not now where that file is coming.
Is there any way to achieve this? or is there any other solution that can also achieve what im planning to do?

JavaScript: Set PHP session inside a JavaScript and the variable of session is JavaScript

Is there a way to set a PHP session inside a JavaScript and the variable of the session is from a JavaScript variable.
Here's my code:
<script type="text/javascript">
function save_chart(chart, filename) {
var data = canvas.toDataURL("image/png")
download(data, filename + '.png');
}
<?php
session_start();
$_SESSION['image'] = "<script>document.write(data)</script>"?>,
window.open("/cert/forms/contents/reports/incidents/chart-img.php", "", "width=800,height=800")
</script>
I want that the var data will be set as a PHP SESSION. Is there any way to do this?
Or any other way but only to get variable to another page by using $_POST['image'] or $_SESSION['image'] in PHP.
PHP session data is saved on the server-side. Hence it's impossible to access them directly from JavaScript. However, if you can either:
Create a server-side API that will receive the data through an AJAX request sent via JavaScript and save it to a session variable. Or
If you just want to save persistent data on the client-side, You can use any of the available client-side storage API in JavaScript.
Client-side storage API
The Cache API: That's not the normal HTTP caching. The Cache API is a JavaScript interface that allows developers to programmatically store files on the client-side with more advanced functionalities than what the HTTP cache headers can provide.
The localStorage and sessionStorage APIs which provides an easy way to save data in the form of key-value pairs. (However, it should not be used to store large files. Read the documentation to see more about its limitations)
The indexedDB API Which is currently the most advanced way to store and handle huge amounts of data on the client-side and allows you to perform high-performance index-based queries on that data.

How to re-pull from file if data changes in NodeJS?

My javascript is currently pulling JSON data from a server I made in NodeJS. The data is coming from a google spreadsheet, so whenever I make changes to the spreadsheet the JSON data changes too.
I do not want to have to refresh my site to apply the updated spreadsheet data. How can I pull from the JSON file every time there is a change made? Someone mentioned using timestamps on the file and if the time stamp changes, then pull from the file. But I could not find an example.
Right now I am pulling data from the /latest route in my node server to my javascript. Code below:
app.get('/latest', function(req,res) {
var fs = require('fs');
var obj;
fs.readFile('public/announcementCurrent.json', function (err, data) {
if (err) throw err;
obj = JSON.parse(data);
res.json(obj)
});
})
This is how I call the route in my javascript:
$http.get('http://localhost:3000/latest')
How can I call the route again when the announcementCurrent.json file changes without having to refresh?
Any help would be great thanks!
The way to get updated data in real time in javascript without having to refresh the page is the whole idea of XMl Http requests, aka AJAX.
Basically you will need, at some time interval or user action of your choice, query the Google API to get the latest data and update your page accordingly.
You should try to get more informations about how to make an ajax call, and how to query the google spreadsheet API. Basically, using jQuery for instance (hum), it would look like:
$.get('http://google-spreadsheet-api-url', function( data ) {
// Dynamically refresh the content of the page using data
})

Actual changing of XML file in Javascript / AJAX

since days I have been searching for answers but couldn't get what I am searching for.
I program a realtime webapp using Javascript and HTML5. For saving game stats I wanted to use a XML-file, that holds all the levelpoints and the achievements and lies locally within the same folder as the html.
So I found out, how to read out the values stored in the XML-file with an XMLHttpRequest. The problem is, that I can only change the node values client-sided, so if I empty the cache or simply reload the page, the XML does hold the original values.
To save the XML server-side is what I want. I hope, you can help me :)
Thanks in advanced!
You can use XMLHttpRequest (an AJAX request) to send the updated XML to the server and then have a server side script (using a server side language such as PHP for example) which will replace the contents of the XML file on the server.
Here's for example how you could send the XML to the server:
var xhr = new XMLHttpRequest();
xhr.open('POST', '/some_script', true);
xhr.onload = function(e) {
if (this.status == 200) {
console.log(this.responseText);
}
};
var xml = '<foo>Bar</foo>';
xhr.send(xml);
The apps that save game stats, store the data locally on the client. They don't post on to the server. If they are, then they would need internet connectivity and post data to the game server. where again there would be a PHP page or a servlet to handle data.
For client side storage, HTML5 has options. Please check the below link
http://diveintohtml5.info/storage.html

caching images & data with phonegap locally

I have a phonegap app using slim with ajax front. When I listing a certain page, I would like to cache the data and then just use that till user refreshes or sends a trigger for new data.
so far I have this for caching json data:
//caches the JSON data into localstorage
try {
localStorage.setItem('cachedProducts', JSON.stringify(data));
JSON.parse(localStorage.getItem('cachedProducts'));
var bar = localStorage.getItem('cachedProducts');
clog(bar);
} catch (e) {
clog("didn't work");
}
it works. but i have no idea how to save images or how to trigger the server for new data. thank you.
If your need is to save small number of image then you can convert it in to base64 string and store it in to local storage. You can covert images in to base64 string using canvas. If user tries to refresh the content then you connect to the server and cache the latest content.

Categories