Automate File Upload with Chrome Extension

So, I started working as a freelancer on Upwork and wanted to get contracts for backend web development, but as a broke international student applied to any and every JavaScript project I saw, and on my 2nd contract, I got a client who wanted to automate myworkdayjobs.com application forms.

For Context: myworkdayjobs.com is a job board where individuals can apply for jobs.

So with automating job applications came the challenge of uploading resumes to the file inputs.

If this were a puppeteer project, it would have been easy since Puppeteer has dedicated functions for automating these tasks and access to the OS APIs through the NodeJS runtime, but since the client is always right, here we are.

So how to automate file uploads with browser extensions?

A Small Catch

You cannot automatically upload local files to file input.

Reason: Files are part of the operating system, and standard browser extension APIs cannot access that API for security reasons.

The Solution

Uploading files to a cloud service, something like AWS S3, would be perfect because they provide a direct link to download.

We can fetch the file in our content script, so no background script headaches, convert the file into a blob and create a file in the memory using the new File constructor.

After that, we can select the input tag using standard query selectors, create a Data Transfer, pass the file to the input tag, and dispatch the change event with bubbles sounds simple dun it.

Here is the code snippet:

This is the function I made for the Upwork client, and I got 5/5 stars.

There were not many articles and documentation on this topic, so I hope this helped you with your web scraping project.