0

Good morning / evening everyone.

Context

Few days ago, I started developing a chrome extension. The idea was to facilite forms completion with predefined informations such as, the url of the image and the description of the product.

My first idea was to first of all download the image and use some script to upload from to the correct input field. However, as you my wonder, for security reasons, a browser script cannot look up in your computer and select what it want.

I did some research and found out that:

In javascript, inputs of type=file are read only. (https://www.sitepoint.com/community/t/add-value-to-input-type-file/3324)

I hate to say that anything is impossible, but the browsers have deemed this a security risk and specifically deny such behavior. (https://www.tek-tips.com/viewthread.cfm?qid=857522)

This is not possible (for good reasons), and is in fact considered a security issue ... (Filling in input type=file)

However, after a search I found a chrome extension which does it super well: Upload image from URL. According to what I understood after using it and reading its description, the extension:

  • find of all the input[accept="image/"]* or similar with a .querySelectorAll. Continue if at least one exist.
  • then, downloads the image and stores/caches the content (base64 maybe ?) the local storage of the browser (chrome.storage.local);
  • then, fill (for a lack of appropriate word) the input field

The question then, it is how its done. The easiest thing, I contacted the developer, but sadly he/he didn't want to help.

After some other search I found out that Puppeteer can help to do that. However the execution need a nodejs process and I am only on the browser. Some hacky, non-official technique exist, however it doesn't seem the way to go. After looking a second time at the code of the extension (containing bundled files, hence unreadable) I saw that the manifest.json contains this line: "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'".

So I am wondering, is it possible to include those lines in the extension I develop ? If so, how to mimic the behavior of uploading a file ?

Or at least, could someone redirect me to some useful resources ? reverse-engineer Upload image from URL ?

Thank you in advance for your help, and for reading this long post.

Rizialdi
  • 1
  • Build a `Blob` from file data stored in storage (or you can load the file from disk by using the new Native File System API), then manually make a request to the form's action URL using `fetch` + `FormData` API that allows uploading Blob as a file. – wOxxOm Feb 14 '21 at 20:06
  • Thank you for your answer @wOxxOm. As suggested, I started to look for
    tag. However, the website for which this extension is intended to, doesn't use
    tag as parent of . And I think what you suggested directly send to the server ? What I want is mimic [Upload image from URL](https://chrome.google.com/webstore/detail/upload-image-from-url/eiglgndkjiabiepkliiemoabepkkhacb). So bad.
     – Rizialdi Feb 14 '21 at 21:32
  • It constructs `new DataTransfer` and `new File`, see and debug its source in devtools or find some example of using DataTransfer. – wOxxOm Feb 14 '21 at 21:38
  • https://stackoverflow.com/questions/13333378/how-can-javascript-upload-a-blob#answer-33882536 – Rizialdi Feb 14 '21 at 21:40
  • Good morning. I learned a ton using this approach. I realize how far from the answer I was. As you suggested, I implemented the creation of a **blob file** and used **fetch** + **FormData** to manually make a request. However in the end I still get a 404 error. Use this [link](https://gist.github.com/Rizialdi/86462792f34e2b5032908a4cd992a0cc) to a gist I created and an [image](https://imgur.com/uhpqyQG) of the result. Do you have other ideas ? Thank you in advance. – Rizialdi Feb 16 '21 at 00:04
  • The previous gist was private. Sorry @wOxxOm. Please use this [one](https://gist.github.com/Rizialdi/da7d4fb6ba0883874aac8380756e75d5) – Rizialdi Feb 16 '21 at 13:06

0 Answers0