Warn on Master branch on Contentful

contentful-master-branch-warn.js

// ==UserScript==
// @name         Contentful Master Branch Alert
// @namespace    http://tampermonkey.net/
// @version      1.4
// @description  Show an alert when on the master branch of Contentful
// @author       Prashant Palikhe
// @match        https://app.contentful.com/spaces/*
// @grant        none
// ==/UserScript==

(function () {
  "use strict";

  let alertDiv = null;
  let styleElem = null;

  function displayAlert() {
    if (alertDiv) {
      removeAlert();
    }

    alertDiv = document.createElement("div");
    alertDiv.innerHTML = "Warning: You are on the master branch!";
    alertDiv.style.position = "fixed";
    alertDiv.style.bottom = "10px";
    alertDiv.style.right = "10px";
    alertDiv.style.zIndex = "9999";
    alertDiv.style.padding = "10px";
    alertDiv.style.backgroundColor = "#ffcc00";
    alertDiv.style.color = "#000000";
    alertDiv.style.border = "2px solid #000000";
    alertDiv.style.borderRadius = "5px";
    document.body.appendChild(alertDiv);
  }

  function removeAlert() {
    if (alertDiv && alertDiv.parentElement) {
      alertDiv.parentElement.removeChild(alertDiv);
      alertDiv = null;
    }
  }

  function addAttentionGrabbingStyle() {
    if (styleElem) {
      removeAttentionGrabbingStyle();
    }

    styleElem = document.createElement("style");
    styleElem.textContent = `#app-top-bar > * { background-color: #c0392b !important; }`;
    styleElem.id = "master-branch-alert-style";
    document.head.append(styleElem);
  }

  function removeAttentionGrabbingStyle() {
    if (styleElem && styleElem.parentElement) {
      styleElem.parentElement.removeChild(styleElem);
      styleElem = null;
    }
  }

  function checkMasterBranch() {
    const branchElement = document.querySelector(
      '[data-test-id="cf-ui-space-nav-env-trigger"]'
    );

    if (branchElement && branchElement.textContent === "master") {
      displayAlert();
      addAttentionGrabbingStyle();
    } else {
      removeAlert();
      removeAttentionGrabbingStyle();
    }
  }

  function initObserver() {
    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.type === "childList") {
          checkMasterBranch();
        }
      });
    });

    const targetElement = document.querySelector('[data-test-id="loaded-app"]');

    const observerConfig = {
      childList: true,
    };

    observer.observe(targetElement, observerConfig);
  }

  setTimeout(() => {
    initObserver();
    checkMasterBranch();
  }, 3000);
})();