Has anyone successfully implemented drag and drop with files from desktop to the app?
I've tried just putting this drag 'n' drop example into the index file but I just get this error:
Can't open same-window link to "file:///C:/Users....whatever"; try target="_blank".
Please share your stories, what you've tried and if you have succeed :)
Some resources to help you:
New Chrome Packaged Apps codelab that we've been working on covers drag-and-drop in both AngularJS and pure JavaScript.
AngularJS drag-and-drop: https://github.com/GoogleChrome/chrome-app-codelab/tree/master/lab5_data/angularjs/2_drop_files
JavaScript drag-and-drop: https://github.com/GoogleChrome/chrome-app-codelab/tree/master/lab5_data/javascript/2_drop_files
There's an early version of docs too for AngularJS drag-and-drop for Chrome at developer.chrome.com/trunk/apps/app_codelab5_data.html#handle_drag_and_dropped_files_and_urls
We're working on the docs to cover both samples though.
I have done this a while ago and it worked.
The problem you've got is that you are creating a file url, then trying to navigate to the url. The navigation is failing, not the read. It's failing due to CSP, and you probably won't be able to override that with a different CSP due to security restrictions we've placed on allowable CSPs.
But, you should be able to just read the file and use the content. You need to change that sample code to use ReadAsText or ReadAsArrayBuffer instead of readAsDataURL. Look here for more details.
Please let us know how you get on!
Just listening for drop won't work. You will have to prevent the default functionality of dragover.
document.body.addEventListener('dragover', function(e) {
e.preventDefault();
}
document.body.addEventListener('drop', function(e) {
alert('it works!')
}
Related
I hope I'm saying this correctly. What I'm trying to do is write to a json file using fs.writeFile.
I can get it to work using the command line but what I want to do is call a function maybe a button click to update the json file.
I figure I would need some type of call to the node server which is local port 8080. I was researching and seen somebody mention using .post but still can't wrap my head around how to write the logic.
$(".button").on("click", function(event) {
fs.writeFile("./updateme.json", "{test: 1}", function(err) {
if(err) {
return console.log(err);
}
console.log("The file was saved!");
});
});
Using jQuery along with fs? Wow that could be great! Unfortunately that is not as simple as that!
Let me introduce you to server-side VS client-side JavaScript. Well actually there are a lot of resources on the net about that - just google it, or check the answers to this other StackOverflow question. Basically JavaScript can run either on a browser (Chrome, Mozilla...) or as a program (usually a server written in NodeJS), and while the language is (almost) the same, both platforms don't have the same features.
The script that you're showing should run in a browser, because it's using jQuery and interacting with buttons and stuff (aka the DOM). Can you imagine what a mess it would be if that script could interact with the file system? Any page you'll visit will be able to crawl around in your holiday pictures and other personal stuff you keep on your computer. Bad idea! That is why some libraries like fs are not available in the browser.
Similarly, some libraries like jQuery are not available (or simply useless) in the server, because there is no HTML and user interaction, only headless programs running.
So, what can I do to write a JSON file after a user clicks on a button?
You can set up:
A NodeJS server that will write a JSON file
Make jQuery call this server with the data to be written after the user clicks on a button
If you want further guidelines on this, tell me in the comments! I'll be ready to edit my question so as to include instructions on setting up such an environment.
I tried to inject jQuery to content page to make easy access to DOM elements.
The code was something like below
chrome.tabs.executeScript(tabId, { file: "jquery.min.js"} ,function(){
chrome.tabs.executeScript(tabId, { file: myOwnScript.js});}
);
It was all fine on Windows, but on Ubuntu, in content page window, I always get console error message saying
"Not allowed to load local resource: file:///****/jquery.min.map"
I noted it was talking about *.map but not *.js
There are some more mysteies:
1. There is no error message on myOwnScript.js
2. My extension works well even though this message keeps showing at each page load.
I made plenty searches on Google but didn't find similar case.
My questions is,
1. What is the reason of such error?
2. Should I take it as a serious error?
My enviroment is as below
OS : Ubuntu 14.04, with LXDE desktop
Chrome : 34.0.1847.132
(Didn't try other configurations because I am not that good at customizing Linux :)
Previous versions of Jquery have a comment pointing to the map file (so that a bug in jquery.min.js can be translated to a bug in the readable jquery.js). You can safely delete this comment, or upgrade to a more recent version of Jquery, which has removed this comment (for exactly this reason). See also this answer.
I wrote a webgl program which works well with a local server, and now, I would like to run it locally.
But I had errors and after some researches, I found that it's a cross domain issue in loading textures.
function loadTexture( path ) {
var texture = new THREE.Texture( texture_placeholder );
var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: true} );
var image = new Image();
image.onload = function () {
texture.needsUpdate = true;
material.map.image = this;
render();
};
texture.deallocate();
renderer3D.deallocateTexture( texture );
return material;
}
I tried several solutions :
github.com/mrdoob/three.js/issues/1305
github.com/mrdoob/three.js/issues/944
gist.github.com/ekeneijeoma/1186920
github.com/mrdoob/three.js/wiki/How-to-run-things-locally (the 1.Change security for local files in a browser (access page as file:///example))
I precise that I have no problem on Firefox, it works without changing anything.
The only solution which works on Chrome is to launch it with --allow-file-access-from-files.
And on IE, I don't know how to solve it, I enabled in the browser security options "Access data sources across domains" and "Navigate sub-frames across different domains" (http://msdn.microsoft.com/fr-fr/library/ee797612(v=cs.20).aspx) but nothing. I use IEWebGL and I have noticed that on http://iewebgl.com/, "IEWebGL v1.0 Released" section, it's written "- Secure (no local content loading, no cross-domain textures)". So maybe it can't be solved on IE due to IEWebGL !?
So what would be the solution for IE, if there is one? And is there a way to solve the problem by changing the code, without lauching a local server or Chrome with special option?
Thanks!
this question has been asked and answered at least 6 other times and is even answered in the three.js wiki.
The short of it is you need to run a local server. Open a terminal/shell/command prompt and type
cd <path/to/files>
python -m SimpleHTTPServer
Then in your browser go to
http://localhost:8000
Why is that not an option? It's simple and it solves the problem. It also doesn't leave your browser open to getting owned.
Here's several simple servers you could use
thanks for your answer.
Indeed, it has already been asked and solved, I saw the solutions and it works well with a local server, and I totally agree with about security.
I was asking that because, firstly, it works without any server on Firefox and Safari, and on Google with --allow..., so if it was possible on IE, it would have been good. And secondly, because I wanted a very simple program which works quickly without having to install python or something else for a server,...
In fact, it's for an offline application (I know it's weird for a web based application but it's not my choice :) ). Anyway, it works for Firefox, Chrome and Safari so, too bad for IE.
Thanks!
I'm looking for a way to output Node variables directly into the google chrome browser console. The same way a console.log() works on the client side. Something like this for php. This would greatly speed up development.
NOTE:
Since the old answer (written in september 2014) refers to an older version of node-inspector, my instructions are not relevant anymore in 2017. Also, the documentation has gotten a lot better, so I have updated my original answer:
node-inspector is what you need.
It opens up an instance of Chrome with its developer tools for debugging.
It's also easy to use:
1. Install
$ npm install -g node-inspector
2. Start
$ node-debug app.js
Source: https://github.com/node-inspector/node-inspector
You might want to try NodeMonkey - https://github.com/jwarkentin/node-monkey
I know it's an old question but came on top of my Google search so maybe somebody will find my answer useful.
So you can use node --inspect-brk index.js
Now, all you have to do is basically just type chrome://inspect in your Chrome address bar and click Open dedicated DevTools for Node
In DevTools, now connected to Node, you’ll have all the Chrome DevTools features you’re used to:
Complete breakpoint debugging, stepping w/ blackboxing
Source maps for transpiled code
LiveEdit: JavaScript hot-swap evaluation w/ V8
Console evaluation with ES6 feature/object support and custom object formatting
Sampling JavaScript profiler w/ flamechart
Heap snapshot inspection, heap allocation timeline, allocation profiling
Asynchronous stacks for native promises
Hope that helped.
The closest thing to this I've seen is Node JS console object debug inspector
See this post for usage and potential issues: http://thomashunter.name/blog/nodejs-console-object-debug-inspector/
For users with nodejs on linux via ssh-shell (putty):
Problem with nodejs on linux-ssh-shell is, that you have no browser connected.
I tried all this solutions, but didnt get it to work.
So i worked out a solution with firebase (https://firebase.google.com), because my project uses firebase.
If you are familiar with firebase, than this is a great way. If not, firebase is worth using in combination with nodejs - and its free!
In the server-side-script (started with node) use a own function log():
// server-side:
// using new firebase v3 !
var fbRootRef = firebase.database();
var fbConsoleRef = fbRootRef.ref("/console");
var log = function(args) {
fbConsoleRef.set({'obj': args});
}
// inside your server-code:
log({'key':'value'});
On client-side you create a firebase-reference on this console-object:
// client side:
fbRootRef.child('/console').on('value', function(d) {
var v = d.val();
console.log(v);
});
Now everything logged on server-side with the log() - function is transferred in realtime to the firebase-database and from there triggering the client-console-reference and logged into the browsers console.
If anyone needs help, i will explain in more detail and could give a more extended version of this logging with types (console./log/warn/info), grouping with title-info (i.e. server says: (filename + line).
Setting up firebase for your project is done in max 30 minutes, inserting the console-function in 30 minutes. I think its worth the time!
You can use bonsole, a simple way to log something in browser. Even in Linux, you can go to the LAN's ip to check it.
The most simple way with least dependencies is using a WebSocket connection to send the messages to the browser. Any WebSocket example you can find on the internet will suffice to accomplish this. Everything else requires to be heavily integrated into the host system and wouldn't work if you want to actually run this on a remote server. You can also send commands to the server directly from the browser console this way.
Links:
https://www.npmjs.com/package/websocket
https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications
In my Chrome Extension, I am using webkitNotifications.createNotification to alert users. It's a great tool!! In the sample code given, the first parameter is optional and specifies an an icon and the Google instructions claim that it can be a local reference. When I use a local file, I get a broken image link. This even occurs when I use the sample for Notification Demo located here - http://code.google.com/chrome/extensions/samples.html#f799e26ceef2367cf836f24bcb47df4398b0df58
Does anyone else have this issue?
The icon is listed in my manifest file.
I can get around this by using a complete web reference, but I like to use this tool for error notifications and sometimes the error is caused by an interruption of internet access.
I am using chrome version 18.0.1025.151 m.
Thanks!
The problem with their sample is they have included "manifest_version": 2 in their manifest but not added a "web_accessible_resources" listing what resources should be available to pages.
You can read more about manifest_version 2 and what changes it introduces here....
http://code.google.com/chrome/extensions/manifestVersion.html
...and about web_accessible_resources here....
http://code.google.com/chrome/extensions/manifest.html#web_accessible_resources
To fix the problem in the sample, you can either remove the manifest version 2 bit (even the docs say this wont be required for a while yet). Or you can add the following to the manifest....
"web_accessible_resources": [
"48.png"
]
"Web Accessible" means the resources is being accessed from your server so you must make sure to include the path to the resources in your javascript and in the manifest,json.