I want to create a Chrome Application. If I put a JSON file in the same folder how do I access the file? I want to find the correct way of getting the text into a variable, something like the example I found:
var json = $.getJSON("data.json");
I could not find in this example where the $ object is defined. It must be some class. How can I use this in a Chrome Application?
I found out that it works the exact same way as if it was cross-origin:
var xhr = new XMLHttpRequest();
xhr.onload = function() {
console.log(JSON.parse(this.response));
};
xhr.open('GET', '/data.json', true);
xhr.send();
Read more at https://developer.chrome.com/apps/app_external
For those who are developing a Chrome Extension, you need to do it a little different according to this site: https://developer.chrome.com/extensions/xhr (I haven't tested this.);
var xhr = new XMLHttpRequest();
xhr.onload = function() {
console.log(JSON.parse(this.response));
};
xhr.open('GET', chrome.extension.getURL('/data.json'), true);
xhr.send();
Edit
If you want to use jQuery (as in the example that you found.):
$.getJSON('data.json', function(data) {
console.log(data);
});
Related
I’m trying to read a simple sqlite database. as described here I need to read a local database file, convert it to Uint8Array and read as readAsArrayBuffer format.
suggested method is XMLHttpRequest as described here. it perfectly worked but it dosent work in chrome browser.
var xhr = new XMLHttpRequest();
xhr.open('GET', 'DataBaseBackup.db', true);//DataBaseBackup.db is a local file
xhr.responseType = 'arraybuffer';
xhr.onload = function (e) {
var uInt8Array = new Uint8Array(this.response);
var db = new SQL.Database(uInt8Array);
var contents = db.exec("SELECT * FROM contacts");
console.log(contents);
// contents is now [{columns:['col1','col2',...], values:[[first row], [second row], ...]}]
};
xhr.send();
how can i read this database file locally?
thanks
I am developing a chrome extension, in which I need to determine the original type of the file, and stop the downloading if I encounter certain type of file.
To determine the file type I have the following code.How to put this code to select the downloading file before it actually downloads.
const xhr = new XMLHttpRequest();
xhr.open('GET', 'unicorn.png');
xhr.responseType = 'arraybuffer';
xhr.onload = () => {
fileType(new Uint8Array(this.response));
//=> {ext: 'png', mime: 'image/png'}
};
xhr.send();
File type should be determined using "magic numbers" not string matching.
Set .responseType to "blob", check .type of Blob
xhr.responseType = "blob";
xhr.onload = () => {
console.log(xhr.response.type)
};
Try using this node module file-type . This should serve your purpose
https://www.npmjs.com/package/file-type
I have a webworker that is producing a CSV for downloading, and to conserve memory I only have it return the URL it produces from teh blob..
My worker code looks something like::
var blob = new Blob([ResultOfSomeWork()],{type:'text/csv'});
URL.createObjectURL(blob);
self.postMessage({url:blob.url});
My goal is to just be able to download it in firefox and chrome this is very easy as I can just set up an invisible <a> and have it be clicked to download it.
For IE10 I want to use msSaveBlob but I need a blob which I don't want to transfer.
How can I download a object dataurl in IE10?
So I found a solution that works. Apparently, I can XHR and read the content back in my main thread.
worker.onmessage = function(event){
var url = event.data.url;
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType='blob';
xhr.onload = function(){
msSaveBlob(xhr.response, fileName +'.csv');
};
xhr.send();
}
While this feels extremely complicated it works well in practice and is really fast.
I'm trying to upload a blob URL generated by getUserMedia to the server.
Someone else wanted to do the same thing, and that question has been answered.
I am using the same code for the XHR request as the person who answered that question, but I'm getting a 404. I made a fiddle, and the same thing happens when you look at the console. I have a live example on my site as well, and the same thing happens.
Here is the piece of code that needs some TLC:
function XHR(){
var xhr = new XMLHttpRequest();
xhr.open('GET',record.src); //404 ???
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200){
//do some stuff
result.innerText = this.response;
}
};
xhr.send();
}
Everybody else seems to be able to do this, because this has been discussed before.
Exhibit A
Exhibit B
I'm using ChromeOS, 41.0.2252.2 dev. What exactly is going on, and why can't I get the blob?
I'm almost certain the media in a MediaStream isn't saved anywhere, just thrown away after use.
There is a API in the works to record streams, MediaRecorder .
Only Firefox has the most basic implementation of this so it isn't usable as yet.
If you're implementing this on a mobile device you can use a file input with the capture attribute.
<input type="file" accept="video/*" capture>
function XHR(){
var xhr = new XMLHttpRequest();
xhr.open("GET","record.src",true); // adding true will make it work asynchronously
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200){
//do some stuff
result.innerText = this.response;
}
};
xhr.send();
}
Try now! it should work.
look at this post:
Html5 video recording and upload?
What you are missing is the declaration of what "blob" is. First thing this person does inside the .onload function() is
var blob = new Blob([this.response], {type: 'video/webm'});
I would like to make a google chrome extension, however I have been rubbing my head on a problem all night. I have the following code giving me a problem:
var xhr = new XMLHttpRequest();
var resp;
xhr.open("GET", "http://www.roblox.com/catalog/json?Subcategory=16&SortType=3&ResultsPerPage=10", true);
xhr.onload = function () {
resp = JSON.parse(xhr.responseText);
}
xhr.send();
I'm attempting to obtain some JSON data. If I replace this section of code with var resp = //(The actual JSON data itself), then the extension works just fine.
How can I fetch this JSON data correctly, and still have it compactable with anyone who downloads my extension?
Sorry if there's an obvious answer, I'm still new to Javascript.
Thanks!
Try setting the content type. Not all browsers use the same default.
xhr.setRequestHeader("Content-Type", "*/*");