JS to add Github buttons to Graphite (especially great with Arc Browser Boosts)

add-github-buttons-to-graphite

function isGraphitePr() {
  return (
    window.location.hostname === "app.graphite.dev" &&
    window.location.pathname.includes("/github/pr/")
  );
}

function makeGithubPrUrl() {
  const pieces = window.location.pathname.replace("/github/pr/", "").split("/");
  return `https://github.com/${pieces[0]}/${pieces[1]}/pull/${
    pieces[2].split("/")[0]
  }/`;
}

function createButton(text, onclick, container) {
  const existingElem = document.getElementById(`Boost-${text}`);

  if (existingElem) {
    return;
  }

  const button = document.createElement("button");
  (button.onclick = onclick), (button.textContent = text);
  applyStyles(button);
  button.id = `Boost-${text}`;
  container.parentNode.insertBefore(button, container);
}

// Trying to match the other elements inside the header
function applyStyles(element) {
  element.style.all = "unset";
  element.style.padding = "3px 6px";
  element.style.display = "flex";
  element.style.alignItems = "center";
  element.style.justifyContent = "center";
  element.style.border = "1px solid rgba(223,223,255,.13)";
  element.style.height = "fit-content";
  element.style.gap = "4px";
  element.style.letterSpacing = "-.1px";
  element.style.textAlign = "center";
  element.style.color = "#e8e8ed";
  element.style.borderRadius = "6px";
  element.style.whiteSpace = "nowrap";
  element.style.cursor = "pointer";
}

function createLink(text, href, container) {
  const existingElem = document.getElementById(`Boost-${text}`);

  if (existingElem) {
    return;
  }

  const link = document.createElement("a");
  link.textContent = text;
  link.href = href;
  link.target = "_blank";
  applyStyles(link);
  link.id = `Boost-${text}`;
  container.parentNode.insertBefore(link, container);
}

function renderUI() {
  if (!isGraphitePr()) {
    return;
  }

  const header = document.querySelector(
    "[class*=PullRequestTitleBar_container]"
  );

  if (!header) {
    setTimeout(renderUI, 500);
    return;
  }

  // Should be the overflow container within the header so we want to prepend our buttons there
  const overflowContainer = header.querySelector(
    "[class*=utilities_overflowHidden]"
  );

  const fallbackOverflowContainer = header.querySelector(
    "[class*=utilities_overflowClip]"
  );

  if (!overflowContainer || !fallbackOverflowContainer) {
    setTimeout(renderUI, 500);
    return;
  }

  createLink(
    "Open Github",
    makeGithubPrUrl(),
    overflowContainer ?? fallbackOverflowContainer
  );
  createButton(
    "Copy Github Link",
    () => navigator.clipboard.writeText(makeGithubPrUrl()),
    overflowContainer ?? fallbackOverflowContainer
  );

  setTimeout(renderUI, 10000); // Re-render every 10 seconds
}

renderUI();