☰

msn-show-source

Add the source article to MSN News

// ==UserScript==
// @name        msn-show-source
// @version     1.0.3
// @author      Elanora Manson
// @description Add the source article to MSN News
// @license     ISC
// @namespace   Violentmonkey Scripts
// @match       *://*.msn.com/*
// @match       *://msn.com/*
// @runs-at     document-start
// @grant       none
// @homepageURL https://github.com/elanora96/msn-show-source
// ==/UserScript==

'use strict';
class CanonicalLinkObj {
  constructor({ href }) {
    this.href = href;
    this.domainNameArr = /^(?:https?:\/\/)?(?:www\.)?([^/]+)/i.exec(href);
  }
}
function getCanonicalLink() {
  const canonicalLinkEl = document.head.querySelector('link[rel="canonical"]');
  return !canonicalLinkEl ? null : new CanonicalLinkObj(canonicalLinkEl);
}
function makeBanner(id) {
  const bannerHeight = '1.5rem';
  const root = document.body.querySelector('#root');
  if (root) root.style.marginTop = `calc(${bannerHeight} + 1rem)`;
  const banner = document.createElement('div');
  banner.setAttribute('id', id);
  Object.assign(banner.style, {
    position: 'absolute',
    top: '0',
    width: '100%',
    display: 'grid',
    gridTemplateColumns: '2fr 1fr',
    gridTemplateRows: '1fr',
    height: bannerHeight,
    backgroundColor: 'var(--fill-color)',
    color: 'var(--neutral-foreground-rest)',
    borderBottom: '.1rem solid var(--neutral-foreground-hint)',
    zIndex: '998',
    padding: '.5rem 0',
    textAlign: 'right',
  });
  banner.innerText = 'Searching for source link';
  document.body.appendChild(banner);
  return banner;
}
function updateBanner(id, link) {
  var _a;
  const banner =
    (_a = document.getElementById(id)) !== null && _a !== void 0
      ? _a
      : makeBanner(id);
  banner.innerText = '';
  const sourceContainer = document.createElement('span');
  sourceContainer.innerText = 'Source article: ';
  const anchor = document.createElement('a');
  anchor.href = link.href;
  anchor.style.color = 'var(--accent-foreground-rest)';
  anchor.innerText = link.domainNameArr[1];
  sourceContainer.appendChild(anchor);
  banner.appendChild(sourceContainer);
}
(() => {
  const id = 'msnBannerId';
  makeBanner(id);
  const observer = new MutationObserver(() => {
    const canonicalLink = getCanonicalLink();
    if (canonicalLink) {
      observer.disconnect();
      updateBanner(id, canonicalLink);
    }
  });
  observer.observe(document.head, { childList: true, subtree: true });
})();