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. React, TypeScript, JavaScript, CSS, HTML Project's tech stack: 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 Set up a paid account here: . Optional 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: . I used 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. https://github.com/mainarthur/open-djinni-ai.git https://djinni.co I'll show you how to adapt this template to other job boards. I'll use as a target in this tutorial. https://jobs.dou.ua/ Template's structure In the contentScript folder, you can find file, which will be injected into the target webpage where you can add DOM manipulations and other logic contentScript.ts 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 git@github.com: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 file: manifest.json { "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: . 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. https://github.com/mainarthur/open-dou-ai Also published . here
