Automating Your Job Application with ChatGPT

It was my usual day. I was swiping new interesting vacancies to see what is required for my and higher positions. Then I started using ChatGPT to generate a cover letter for me, so my applications will be more personalized, and my chances to have feedback will be higher, but I had to copy-paste more than three times, so I decided to automate this process.

Project's tech stack: React, TypeScript, JavaScript, CSS, HTML

Step 1: Obtain OpenAI API Key

The first thing you need is to obtain the OpenAI API key, so you'll be able to make requests to the ChatGPT model. To do so, you need:

• Generate OpenAI API key here https://platform.openai.com/account/api-keys
• Optional Set up a paid account here: https://platform.openai.com/account/billing/overview. It might be required if your trial is expired.

And don't forget to save the API key in a safe place, as it will be required in the next steps and during usage.

Step 2: Use the WebExtension template

I've developed a small WebExtension, which contains the most needed code to automate job applications. The source code can be found here: https://github.com/mainarthur/open-djinni-ai.git. I used https://djinni.co as a target job board platform. If you're using djinni.co you can just go ahead and use the template extension as an app.

I'll show you how to adapt this template to other job boards. I'll use https://jobs.dou.ua/ as a target in this tutorial.

Template's structure

In the contentScript folder, you can find contentScript.ts file, which will be injected into the target webpage where you can add DOM manipulations and other logic

In the popup folder, you can find files that will be used to render the extension's popup.

In the static folder, you can update the extension's logo and manifest.json. Using manifest.json, you specify basic metadata about your extension, such as the name and version, and can also specify aspects of your extension's functionality (such as background scripts, content scripts, and browser actions). #1 #2

Step 3: Template modification and usage

Dependencies: git, node.js, yarn

So let's start with cloning the template repo:

git clone https://github.com/mainarthur/open-djinni-ai.git open-dou-ai
cd open-dou-ai

Enter fullscreen mode. Exit fullscreen mode

You can change open-dou-ai to whatever name of the folder you want, or don't include it at all #

Update remote URLYou can change the remote URL in case you want to push your changes to own git account and here is an easy command for it:

git remote set-url origin [email protected]:yourUserName/YourRepoName.git

Then we should install all dependencies:

yarn install

Enter fullscreen mode. Exit fullscreen mode

and let's start analyzing the web page

Let's take a look at vacancy URL

It will help you find a pattern for the URL because you will need it for the manifest file:src/static/manifest.json

"content_scripts": [
    {
      "matches": [
        "https://jobs.dou.ua/companies/*/vacancies/*"
      ],
      "js": [
        "contentScript.js"
      ]
    }
  ],

Enter fullscreen mode. Exit fullscreen mode

Now our contentScript will be executed only on dou.ua vacancy page

Next, we will need an apply button. Locate it on the website. Then you should find the ID or class CSS selector for the element. The easiest way to do so is to use DevTools.

and now we can update the content script with our new selector

const allApplyButtons = document.querySelectorAll(
  "a#reply-btn-id"
);

Enter fullscreen mode. Exit fullscreen mode

When we click "apply," the text area for the cover letter shows up, then we repeat the same procedure as we did with apply button.

Then we update contentScript again with this selector:

  setTimeout(async () => {
    const textarea = document.querySelector(
      "textarea#reply_descr"
    ) as HTMLTextAreaElement;

Enter fullscreen mode. Exit fullscreen mode

The extension also requires vacancy text for ChatGPT prompt generation. So you need to find a selector for vacancy text:

    const data = {
      model: "gpt-3.5-turbo",
      messages: [
        {
          role: "user",
          content:
            "Hello, my skills are " +
            (await get(SKILLS_LIST_KEY)) +
            ", my experience:" +
            (await get(EXPERIENCE_KEY)) +
            " generate me a personalized apply message for a vacancy: " +
            (
              document.querySelector(
                "div.vacancy-section"
              ) as HTMLDivElement
            ).innerText,
        },
      ],
    };

Enter fullscreen mode. Exit fullscreen mode

And let's also don't forget to update the name of our new extension in popup.tsx

  return (
    <React.Fragment>
      <Nav>
        <Heading>OpenAI dou.ua Apply</Heading>
      </Nav>
      <Main>

Enter fullscreen mode. Exit fullscreen mode

and in manifest.json file:

{
  "manifest_version": 3,
  "name": "Dou AI",
  "description": "Chrome extension for applying dou.ua jobs using OpenAI's ChatGPT",
  "version": "1.0.0",
  "action": {

Enter fullscreen mode. Exit fullscreen mode

And now we're ready to build and run the extension. To build your code, you can run this command:

yarn build

Enter fullscreen mode. Exit fullscreen mode

and load the build in your browser

• Go to chrome://extensions/
• Turn on developer mode
• Load the unpacked extension, and here you have it.

Now we can move back to the vacancy page and refresh it. Open the popup and fill all data:

We're ready to use it with any vacancy because now we have the 'Apply with ChatGPT' button.

Let's click on it and wait for the result

And we're finally done. The resulting code you can find here: https://github.com/mainarthur/open-dou-ai. This project still has a lot of room for improvement: we can add animations, adapt it for multiple platforms at once, and include the ability to dynamically select CSS selectors.

---

Also published here.