Published on

Automating LinkedIn Connections with Simple JavaScript

Authors
  • avatar
    Name
    Bojun Feng
    Twitter

Summary:

  1. Intro
  2. Intuition
  3. Code
  4. How To Use

Intro

LinkedIn has become pretty much indispensable in the job market. A glorious 500+ connections on one's profile is much more than just a number - it's a badge of networking prowess and professional potential. But in all honesty, more than 99% of our LinkedIn contacts are not truly influential in shaping our career.

Often, I find myself staying on LinkedIn for way longer I should be, aimlessly boosting my connection count by linking with strangers online. But is this manual process of endlessly clicking 'Connect' really as efficient as it can be?

It's time for a smarter approach: Let's automate this.

Intuition

On LinkedIn's 'My Network' page, we can inspect the HTML code and have a look at how the connect buttons are defined:

<button
  aria-label="Invite [UserName] to connect"
  id="[UserID]"
  class="artdeco-button artdeco-button--2 artdeco-button--secondary ember-view"
>
  {' '}
  <li-icon 
    aria-hidden="true" 
    type="connect" 
    class="artdeco-button__icon" 
    size="small"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 16 16"
      data-supported-dps="16x16"
      fill="currentColor"
      class="mercado-match"
      width="16"
      height="16"
      focusable="false"
    >
      <path d="[SVG data]"></path>
    </svg>
  </li-icon>
  <span class="artdeco-button__text">Connect</span>
</button>

The entire button is probably a bit too much. We just need enough information to distinguish the button from irrelevant elements. In this case, looking at the span containing the button text proves to be sufficient:

<span class="artdeco-button__text">Connect</span>

Since the span is contained in the button, clicking on the span is equivalent to clicking on the button. For our use case, we just need to find all such span elements and click them.

Additionally, for us to not be identified as a bot, we can scroll the button into view before clicking and add a random time interval between two clicks.

Now that we have some background, it is clear what the script needs to do:

  1. Identify Potential Buttons:

    • Use querySelectorAll to find all elements with desired properties.
      • Element should be of type span.
      • Element should have class "artdeco-button__text".
  2. Verify Button Text:

    • Use textContent.trim to get the text content of the element.
      • Element should have text content Connect.
  3. Execute Click:

    • Once an element passes the tests, it's the target button to interact with.
    • Scroll the target element into view using window.scrollTo.
    • Wait for a randomized interval using Math.random and setTimeout.
    • Execute the click() method to click the button.

Code

// Function to scroll an element to the middle of the screen
function scrollToMiddle(element, delay) {
    return new Promise(resolve => {
        // Get the bounding rectangle of the element
        const bounding = element.getBoundingClientRect();

        // Calculate the position to scroll to (element's position - half of the viewport height)
        const scrollY = window.scrollY + bounding.top - (window.innerHeight / 2) + (bounding.height / 2);

        // Scroll to the calculated position
        window.scrollTo({ top: scrollY, behavior: 'smooth' });

        // Wait for the specified delay, then click the element
        setTimeout(() => {
            element.click();
            resolve();
        }, delay);
    });
}

// Function to process all elements
async function processElements() {
    // Select all span elements with the specified class
    const spanElements = document.querySelectorAll('span.artdeco-button__text');

    // Iterate over the NodeList
    for (let span of spanElements) {
        // Check if the content of the span is 'Connect'
        if (span.textContent.trim() === 'Connect') {
            // Generate a random delay from 1000 ms to 1500 ms (or from 1 second to 1.5 seconds)
            // Feel free to tailor the numbers to your own needs
            const delay = Math.floor(Math.random() * (500)) + 1000;

            // Scroll the element to the middle of the screen and click it with the delay
            await scrollToMiddle(span, delay);
        }
    }
}

// Call the function to start the process
processElements();

How to Use

  1. Launch Your Browser:

    • Open either Chrome or Firefox on your computer.
  2. Access LinkedIn:

    • Navigate to the "My Network" page on LinkedIn.
  3. Open Developer Console:

    • In Chrome:
      • On Windows, press Ctrl + Shift + J or F12.
      • On Mac, press Cmd + Option + J.
    • In Firefox:
      • On Windows, press Ctrl + Shift + I or F12.
      • On Mac, press Cmd + Option + I.
  4. Enter the Console Tab:

    • Once the developer console is open, locate and click on the 'Console' tab.
  5. Run the Script:

    • Paste the provided script into the console.
    • Press Enter to execute it.
  6. Observe the Automation:

    • Sit back and watch as the script does its job!