Add your Boot.dev certificate to LinkedIn

README.md

How to use

Add the Violent Monkey extension to your browser.

$\color{#58A6FF}\textsf{\Largeⓘ\kern{0.2cm}\normalsize Note}$ When you go to the certificate page you need to refresh it so the script can be applied. If you know how to do it without the need to refresh contact me.

Option 1 - Create new user script

Create a new user script, copy and paste all the code from AddYourCertificateToLinkedIn.js on the new user script, save it, open https://www.boot.dev/u/<your_user_here>, click on any completed course, the button should now show if the script is active.

Option 2 - Add the script from GreasyFork

Open https://www.boot.dev/u/<your_user_here>, click on any completed course, go to GreasyFork (alternatively you can search for it by clicking on the extension and Find Scripts for this site, currently there is only mine, it's called Button to add boot.dev certificate to linkedin) then you click on the green Install button, install it, refresh the boot.dev page.

By following any of the 2 options you should have the script added and running. If you have any questions ask me here.

AddYourCertificateToLinkedIn.js

// ==UserScript==
// @name        Button to add boot.dev certificate to linkedin
// @namespace   https://github.com/luigiMinardi
// @match       https://www.boot.dev/certificate/*
// @grant       none
// @version     0.6.10
// @author      luigiMinardi
// @license     MIT
// @description Adds a button to add your boot.dev certificate to linkedin
// @homepageURL https://gist.github.com/luigiMinardi/62b0492d187e39e495272b10d40f6aee
// @supportURL  https://gist.github.com/luigiMinardi/62b0492d187e39e495272b10d40f6aee
// ==/UserScript==


var mybutt = document.createElement("button");
// Copying boot.dev button style
mybutt.className = "active-scale-103 group relative block origin-bottom overflow-hidden rounded px-4 py-2 text-white shadow-md focus:outline-none disabled:scale-100 disabled:cursor-not-allowed bg-gradient-gray min-h-41 mt-8";
mybutt.style.cursor = "pointer";

// Button text
mybutt.textContent = 'Add to LinkedIn';


mybutt.onclick = async function () {
  // Current boot.dev url info
  let currUrl = location.href;
  let currUrlArray = currUrl.split("/");
  let username = currUrlArray.at(-2);
  let course = currUrlArray.at(-1);

  // Getting data from the course you did
  let getCoursesData = await fetch(`https://api.boot.dev/v1/users/public/${username}/tracks_and_courses`, {
    method: "GET",
  }).then((value) => {
    return value;
  });

  let coursesJson = await getCoursesData.json();

  let currCourse;
  for (const c of coursesJson["Courses"]) {
    if (c["UUID"] == course) {
      currCourse = c;
    }
  }

  // Creating variables with your course data
  let completionDate = currCourse["CompletedAt"].split("-");
  let comp_yr = completionDate[0];
  let comp_mth = completionDate[1];
  let title = currCourse["Title"];
  let bootdev = "40661112";

  // Open linkedin with the data pre-written
  window.open(`https://www.linkedin.com/profile/add?startTask=CERTIFICATION_NAME&name=${title}&organizationId=${bootdev}&issueYear=${comp_yr}&issueMonth=${comp_mth}&certUrl=${currUrl}&certId=${course}`, '_blank');
};

// create a new instance of `MutationObserver` named `observer`,
// passing it a callback function
const observer = new MutationObserver(() => {
  // selecting where the download button is
  var el = document.getElementsByClassName("flex h-full flex-col items-center bg-gray-900")[0].children[0]
  // adding a little of css
  el.className = "flex flex-row gap-2"
  // adding by button to it
  el.appendChild(mybutt)
  // stoping the observer so I dont get a while true problem
  observer.disconnect();
});

// call `observe()`, passing it the element to observe, and the options object
observer.observe(document.getElementsByClassName("flex h-full flex-col items-center bg-gray-900")[0].children[0], {
  subtree: true,
  childList: true,
});