npmx Link Router

Opens npmjs.com package and search links through npmx.dev before navigation when possible.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey, Greasemonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Userscripts.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een gebruikersscriptbeheerder nodig.

(Ik heb al een user script manager, laat me het downloaden!)

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

(Ik heb al een beheerder - laat me doorgaan met de installatie!)

// ==UserScript==
// @name             npmx Link Router
// @name:en          npmx Link Router
// @name:ru          npmx Link Router — открывать npm-ссылки через npmx.dev
// @name:es          npmx Link Router — abrir enlaces npm mediante npmx.dev
// @name:zh-CN       npmx Link Router — 通过 npmx.dev 打开 npm 链接
// @name:pt-BR       npmx Link Router — abrir links npm pelo npmx.dev
// @namespace        https://github.com/wolfcreative/npmx-link-router
// @version          1.1.0
// @description      Opens npmjs.com package and search links through npmx.dev before navigation when possible.
// @description:en   Opens npmjs.com package and search links through npmx.dev before navigation when possible.
// @description:ru   Открывает ссылки npmjs.com на пакеты и поиск через npmx.dev до перехода, когда это возможно.
// @description:es   Abre enlaces de paquetes y búsqueda de npmjs.com mediante npmx.dev antes de navegar cuando es posible.
// @description:zh-CN 尽可能在跳转前通过 npmx.dev 打开 npmjs.com 的包和搜索链接。
// @description:pt-BR Abre links de pacotes e busca do npmjs.com pelo npmx.dev antes da navegação quando possível.
// @author           wolfcreative
// @license          MIT
// @homepageURL      https://github.com/wolfcreative/npmx-link-router
// @source           https://github.com/wolfcreative/npmx-link-router.git
// @supportURL       https://github.com/wolfcreative/npmx-link-router/issues
// @match            *://*/*
// @run-at           document-start
// @grant            none
// ==/UserScript==

(() => {
  'use strict';

  const NPM_HOSTS = new Set(['npmjs.com', 'www.npmjs.com']);
  const NPMX_HOST = 'npmx.dev';

  function toNpmxUrl(inputUrl) {
    let url;

    try {
      url = new URL(inputUrl, window.location.href);
    } catch {
      return null;
    }

    if (!NPM_HOSTS.has(url.hostname)) {
      return null;
    }

    url.protocol = 'https:';
    url.hostname = NPMX_HOST;

    return url.toString();
  }

  function redirectCurrentPage() {
    const nextUrl = toNpmxUrl(window.location.href);

    if (nextUrl && nextUrl !== window.location.href) {
      window.stop();
      window.location.replace(nextUrl);
    }
  }

  function rewriteAnchor(anchor) {
    if (!anchor) {
      return null;
    }

    const href = anchor.getAttribute('href');

    if (
      !href ||
      href.startsWith('#') ||
      href.startsWith('javascript:') ||
      href.startsWith('mailto:')
    ) {
      return null;
    }

    const nextUrl = toNpmxUrl(href);

    if (!nextUrl) {
      return null;
    }

    anchor.href = nextUrl;
    anchor.dataset.npmxLinkRouter = 'true';

    return nextUrl;
  }

  function findAnchor(event) {
    return event.target?.closest?.('a[href]') || null;
  }

  function rewriteEventLink(event) {
    rewriteAnchor(findAnchor(event));
  }

  function navigateEvent(event) {
    const anchor = findAnchor(event);
    const nextUrl = rewriteAnchor(anchor);

    if (!nextUrl) {
      return;
    }

    event.preventDefault();
    event.stopPropagation();

    const openInNewTab =
      event.type === 'auxclick' ||
      event.button === 1 ||
      event.metaKey ||
      event.ctrlKey ||
      anchor.target === '_blank';

    if (openInNewTab) {
      window.open(nextUrl, '_blank', 'noopener,noreferrer');
      return;
    }

    window.location.assign(nextUrl);
  }

  function rewriteLinks(root = document) {
    if (root.nodeType === Node.ELEMENT_NODE && root.matches?.('a[href]')) {
      rewriteAnchor(root);
    }

    root.querySelectorAll?.('a[href]').forEach(rewriteAnchor);
  }

  redirectCurrentPage();

  const earlyRewriteEvents = [
    'pointerover',
    'mouseover',
    'mousedown',
    'touchstart',
    'focus',
    'contextmenu',
  ];

  for (const eventName of earlyRewriteEvents) {
    document.addEventListener(eventName, rewriteEventLink, true);
  }

  document.addEventListener('click', navigateEvent, true);
  document.addEventListener('auxclick', navigateEvent, true);

  function startObserver() {
    rewriteLinks(document);

    const observer = new MutationObserver((mutations) => {
      for (const mutation of mutations) {
        if (
          mutation.type === 'attributes' &&
          mutation.target.matches?.('a[href]')
        ) {
          rewriteAnchor(mutation.target);
        }

        for (const node of mutation.addedNodes) {
          rewriteLinks(node);
        }
      }
    });

    observer.observe(document.documentElement, {
      childList: true,
      subtree: true,
      attributes: true,
      attributeFilter: ['href'],
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', startObserver, { once: true });
  } else {
    startObserver();
  }
})();