How to upload files from a chrome extension? - javascript

The difficulty comes from the fact that chrome extensions can only make external http requests through the background.js file which is separate from the extension and all communication between the two are serialized, which removes files.
I've found some solutions from 1++ years ago, but all seem to be very hacky and not working anymore anyway (as tends to happen to hacky solutions).
So I am left wondering if it is possible at all to upload files from a chrome extension that opens on any website.

If memory serves, I am fairly sure I am making external web requests from a content script in a Chrome extension.
However, if we just consider how to get a file into the background thread, the following options jump to mind, depending on your needs.
chrome.storage can be used to access local storage
chrome.fileSystem can be used to access the host file system
File content could be suitably encoded (say base64) and sent across with chrome.runtime.sendMessage in the JSON message. (I am not sure if there is a message size constraint. I suppose it could be sent in pieces if there were.)

Related

Tool to help automatize web tasks?

I would like to automatize web tasks which normally should be achieved by a web browser, for example video upload to a certain video sharing website. I would like to make a pure command line program, which apply simple cURL command calls, because those calls are accessible for example in FireBug and Chrome / Chromium dev console / Network pane. So I woudn't like to use libcurl, or similar libraries. I would prefer programming in Ruby.
Task is straightforward: I upload a video while watching the dev tool network pane, and tracking the communication between the browser and the server. Copying POST and GET requests by "copy as cURL" menu. Applying some modification on the copied cURL command, eg. removing some header lines, which sends cookies, and substitute them with the cookies in a "cookie jar" text file (-c option in cURL). And later sending the needed cookies by applying that text file again (-b option in cURL). In the past I managed to make such Ruby scripts and they are simply working I can use those websites services by pure command line, so I can upload files from my VPS which is very fast unlike uploading from home machine.
Unfortunately the website I want to automatize apply a lot of redirections even at the login stage (for example 4 consecutive redirects), which aren't tracked by Chrome dev tool, so I can't see what really happen and when the needed cookies are stored, and which request is responsible for getting those cookies. Sometimes tricky javascript calls are applied by the website to store a cookie which is needed for the video upload and even exporting the video.
So my question is that besides Chrome dev tools and FireBug is there any automated and handy tool which can help achiving similar tasks?
Maybe BrowserAutomationStudio will help:
https://bablosoft.com/shop/BrowserAutomationStudio
This program can record your browser actions and replay them as a standalone bot.

What is the best way to serve large javascript file libraries from a server with a slow upstream?

I want to put a webserver on my raspberry pi, but its upload speed is slow and I have a webpage with a big script (angular.js).
I could use a CDN for angular.js, but my ISP is not perfect, and I want to be able to serve the file even when the outside Internet is unavailable.
What is the best way to make the browser use one script when my network is connected to the rest of the Internet, but use another when the outside Internet is unavailable?
Save the contents of the file in Local Storage then use Javascript to insert the code for the file on to the web page.
Either that or use cache-control headers.

How to make a user-accessible file on the user's filesystem with a chrome extension

I'm making an extension that among other things edit a javascript file in an external editor (one on the user's computer). The extension has the javascript file saved in chrome.storage but it will ofcourse be a lot easier for the user to write code in their own editor.
This is why I decided to find something that creates a file on the user's filesystem which the user can find and edit it themselves, and if any changes are made, sync that back up to the extension (either by periodically checking or by using some listener).
I have looked around but nothing really seems to fit what I'm trying to do. Chrome's fileSystem API only works for chrome apps, not chrome extensions and the HTML5 fileSystem API does not allow for a simple filesystem URL to be requested and opened, instead it obfuscates the stored file and makes it practically impossible to edit that file easily.
Something else I looked at which might be more promising is letting the user edit one of the files in the directory where the extension is stored and somehow retrieving that content. This is however going to be a bit tough to implement with chrome's all the hash checking going on in chrome extensions not to mention the general modifying of those files' contents by the extension (possibly by hacking around by specifying your own update URL and "updating" a dummy javascript file that is going to be written to).
Is there any way to simply ask for a location to store a file and then allow the user to edit that file and sync it back up?
No, extensions are sandboxed from the real filesystem.
As you said, it's possible to read extension's own files; however, this is read-only for the extension and modifying those files on a deployed extension will result in Chrome detecting extension "tampering" and immediate disabling as a precaution.
The only way for a Chrome extension to escape the sandbox is, as wOxxOm suggested, a Native Host module. Note that this cannot be distributed in Chrome Web Store with the extension; it needs a separate installer.
Alternatively, you could use some sort of cloud storage with API to access it; e.g. a user could store something in a Dropbox subfolder, and your extension can authorize access to it via Dropbox API. Unfortunately, there is no "native" solution like syncFileSystem for Apps.

How to read all folder names from particular folder in JavaScript [duplicate]

I am creating a HTML page where I need to display the names of the files present in the specific local folder, example - C:\Users\User1\Documents\folder1 . I tried to write the code in java script but have not succeeded yet. Most of the question threads mention about "ActiveXObject" to be used but that itself does not work for me.
Reference: JavaScript: Read files in folder
Can anyone help me in achieving this?
In general, you can't do that. Web pages do not have access to the local filesystem.
Chrome can access the contents of a directory that is selected using a file input field. However, other browsers, such as Internet Explorer and Firefox, have not implemented this feature at this time, nor is there currently any way to access a directory that was not selected by the user.
In theory, it is possible to read arbitrary files using a signed Java (not Javascript) applet. However, this requires the user to approve a series of extremely scary warning dialogs — and requires Java! — so it's really not a viable solution.
I'm afraid I may be the bearer of bad news for your design: The action you are requesting expressly violates the security model as specified in the File API spec. The client implementation of FileReader() must make sure that "all files that are being read by FileReader objects have first been selected by the user." (W3C File API , 13. Security Considerations: http://www.w3.org/TR/FileAPI/#security-discussion).
It would be a huge security risk of browser scripts could just arbitrarily open and read any file from a path without any user interaction. No browser manufacturer would allow unfettered access to the entire file system like that.
Thinking about it however, if it is all being run locally, you could use ajax to query a server side script that could return the directory you request.

Read file names in a local folder in an HTML page

I am creating a HTML page where I need to display the names of the files present in the specific local folder, example - C:\Users\User1\Documents\folder1 . I tried to write the code in java script but have not succeeded yet. Most of the question threads mention about "ActiveXObject" to be used but that itself does not work for me.
Reference: JavaScript: Read files in folder
Can anyone help me in achieving this?
In general, you can't do that. Web pages do not have access to the local filesystem.
Chrome can access the contents of a directory that is selected using a file input field. However, other browsers, such as Internet Explorer and Firefox, have not implemented this feature at this time, nor is there currently any way to access a directory that was not selected by the user.
In theory, it is possible to read arbitrary files using a signed Java (not Javascript) applet. However, this requires the user to approve a series of extremely scary warning dialogs — and requires Java! — so it's really not a viable solution.
I'm afraid I may be the bearer of bad news for your design: The action you are requesting expressly violates the security model as specified in the File API spec. The client implementation of FileReader() must make sure that "all files that are being read by FileReader objects have first been selected by the user." (W3C File API , 13. Security Considerations: http://www.w3.org/TR/FileAPI/#security-discussion).
It would be a huge security risk of browser scripts could just arbitrarily open and read any file from a path without any user interaction. No browser manufacturer would allow unfettered access to the entire file system like that.
Thinking about it however, if it is all being run locally, you could use ajax to query a server side script that could return the directory you request.

Categories