I made a first version of a chrome extension for crashers, i.e. job seekers that are using the crash.co job hunting tool. This tool will make it easier for these job hunters to use Crash to pitch jobs they find anywhere on the web.

So the purpose of this particular extension is to make it easy to pitch a job using job hunting platform Crash.

If you're unfamiliar, the idea behind Crash is that, if you want to win a job, making a tailored video pitch with proof of work and skills is superior to any cover letter and resume. Check it out if there is more to you than a list of bullet points can express.

Basic anatomy of the chrome extension :

Every chrome extension has a basic anatomy in order for it to work properly. Let's go over the different items real quick:

Manifest.json

First thing you need is manifest.json file. Similar to a package.json in NodeJS, this file describes your project and its contents.

Here's the manifest.json for this project:


{
  "manifest_version": 2,
  "name": "Crash pitch tool",
  "description": "Beta",
  "version": "0.1.0",
  "icons": { "128": "icon.png" },
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": ["activeTab"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

Next thing is a content script. A content script is javascript that will execute when the page loads. You can use it to manipulate that page. It will only load if the URL matches the ones provided in the manifest.

By default, the content script will only start running once the page is loaded, which is really convenient.

Background script

There is also the background script, which is always running, and starts running as soon as you launch chrome. The background script listens for all the events that are happening in and around the chrome browser, such as opening a new tab or typing in the address bar.

Keep in mind that, because the background script is running in chrome and not on the page, you cannot debug the background script using the same console.

In this first version of this extension, I actually don't need a background script yet.

A chrome extension does not require a popup, but you can have one pop up on clicking the icon, defined under browser_action: default_popup. This is just a simple HTML file for which you can set scripts and stylesheets separately. It is most commonly displayed as an overlay over the current tab.

It's important to note that this popup, with its HTML and (optional) scripts and stylesheets will load fresh every time you click the button.

How it works

So the purpose of this extension is to make it easy to save some essential information from the job listing page and use it in the Crash pitch editor, in a Pinterest-like fashion.

The data I'm looking for is:

Company name
Company domain
Job title
Hiring Manager
URL

In this first version, the user will still have to copy the first four items from the job listing itself, but the URL is automatically populated behind the scenes.

Now, seeing that the URL of the current job posting tab can only be accessed from the content script, and not from within my extension itself, I need to make sure I get that data from content.js to my popup.js script.

So from popup.js, the script in my extension, I send the request for the URL to the currently active tab, and wait for the response to update the URL using the following code:

  chrome.tabs.query(
      { active: true, currentWindow: true }, 
      function (tabs) {
        chrome.tabs.sendMessage(tabs[0].id, { txt: "req URL" }, 
        function (response) {
            //update the URL
        });
  });

In the content.js script, I make sure I receive the message and send back the URL of the current tab in response:

chrome.runtime.onMessage.addListener(gotMessage);

function gotMessage(message, sender, sendResponse) {
  const currentURL = window.location.href;
  sendResponse({ url: currentURL });
}

Then the only thing left to do is to make sure the link that the "pitch it" button leads to is updated on every input change. To do this, I add an event listener to every input with a forEach loop:

document.querySelectorAll(".input").forEach((item) => {
  item.addEventListener("change", updateButton);
});

And that is all there is to it (so far). Find the full project on GitHub at github.com/cornevanstraten/crash-extension