It will add extra actions to CoinMarketCap.com website and it helps to view the coin information in same window.

CoinMarketCap Extra Actions.md

CoinMarketCap Extra Actions

It will add extra actions to CoinMarketCap.com website and it helps to view the coin information in same window.

const EXTRA_ACTIONS_CLASSNAME = "coin-extra-actions";
const POPUP_CONTAINER_CLASSNAME = "coin-extra-popup-container";
const renderChanges = () => {
  const coinElems = document.querySelectorAll(".sc-16r8icm-0.escjiH");
  [...coinElems].forEach((coinElem) => {
    if (!coinElem.querySelector(`.${EXTRA_ACTIONS_CLASSNAME}`)) {
      const infoElem = document.createElement("div");
      Object.assign(infoElem.style, {
        "margin-left": "3px",
    	"vertical-align": "middle",
    	"line-height": "0",
    	"display": "block",
    	"cursor": "pointer"
      });
      infoElem.setAttribute("class", EXTRA_ACTIONS_CLASSNAME);
      infoElem.innerHTML = `<span class="icon-Info"></span>`;
      const coinSymbol = coinElem.querySelector(".coin-item-symbol").textContent;
      const coinName = coinElem.querySelector("p.sc-1eb5slv-0.iworPT").textContent;
      const link = coinElem.querySelector("a.cmc-link").href;
      infoElem.addEventListener("click", () => popupInfoDialog(link, coinSymbol, coinName));
      coinElem.appendChild(infoElem);
    }
  });
};

const popupInfoDialog = (link, coinSymbol, coinName) => {
  let dialogElem = document.querySelector(`.${POPUP_CONTAINER_CLASSNAME}`);
  if (!dialogElem) {
    dialogElem = document.createElement("div");
    dialogElem.setAttribute("class", POPUP_CONTAINER_CLASSNAME);
    Object.assign(dialogElem.style, {
      "width": "80%",
      "height": "70%",
      "position": "fixed",
      "left": "50%",
      "top": "50%",
      "transform": "translate(-50%, -50%)",
      "z-index": "9999",
      "background": "white",
      "box-shadow": "rgb(0 0 0 / 30%) 0px 5px 15px 0px",
      "border-radius": "10px",
      "overflow": "hidden"
  	});
    document.body.appendChild(dialogElem);
  }
  
  dialogElem.innerHTML = `
      <div class="window-close-btn" style="text-align: right; margin: 10px; cursor: pointer;">
		<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="24px" width="24px" viewBox="0 0 24 24" class="sc-16r8icm-0 jZwKai"><path d="M18 6L6 18M18 18L6 6" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
	    </svg>
      </div>
      <iframe
          id="extra-coin-iframe"
          title="${coinName}"
          width="100%"
          height="100%"
          src="${link}"
          style="border: none;"
      </iframe>
  `;
  dialogElem
    .querySelector(".window-close-btn")
    .addEventListener("click", () => {
    	dialogElem.parentElement.removeChild(dialogElem);;
    });
  dialogElem
  	.querySelector("#extra-coin-iframe")
  	.contentWindow
    .addEventListener("DOMContentLoaded", () => {
    	const iframeElem = dialogElem.querySelector("#extra-coin-iframe");
        iframeElem.contentWindow.eval(`Object.assign(document.querySelector(".sc-19zk94m-2.cEhSvA").style, { height: "0px", visibility: "hidden", width: "0px" })`);
    	iframeElem.contentWindow.eval(`document.querySelector(".sc-101ku0o-3.rAwXd").click()`);
  	});
};

const throttle = (func, delay) => {
  let lastTimestamp = null;
  let timer = null;
  return () => {
    clearTimeout(timer);
    const nowTimestamp = performance.now();
    
    if (!lastTimestamp || (nowTimestamp - lastTimestamp) >= delay) {
      func();
      lastTimestamp = nowTimestamp;
    } else {
      timer = setTimeout(() => {
        func();
        lastTimestamp = nowTimestamp;
      }, delay);
    }
  };
};

const main = () => {
  document.addEventListener("scroll", throttle(renderChanges, 500));
  renderChanges();
};

main();