☰

Unpkg link button for npm package

Add unpkg link button for npm package

  1. // ==UserScript==
  2. // @name         Unpkg link button for npm package
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Add unpkg link button for npm package
  6. // @author       @heineiuo
  7. // @license      MIT
  8. // @match        https://www.npmjs.com/package/*
  9. // @icon         https://www.google.com/s2/favicons?sz=64&domain=npmjs.com
  10. // @grant        none
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     // Your code here...
  17.  
  18.     function getName(){
  19.         return document.querySelector('meta[property="og:title"]').content
  20.     }
  21.  
  22.     function getLink(name){
  23.         return `https://unpkg.com/${name}/`
  24.     }
  25.  
  26.     function createElement(){
  27.       const el = document.createElement('div')
  28.       el.innerHTML= `<div data-nosnippet="true">
  29.       <a href="${encodeURI(getLink(getName()))}" target="_blank">
  30.       <img
  31.       src="https://unpkg.com/favicon.ico"
  32.       height="20px"
  33.       title="This package can be explored on unpkg.com"
  34.       alt="Unpkg icon, This package can be explored on unpkg.com"
  35.       class="aa30d277 pl3"
  36.       data-nosnippet="true"
  37.       />
  38.       </a>
  39.       </div>`
  40.       return el
  41.     }
  42.  
  43.     function addButton(){
  44.         const h2 = document.querySelector('#top h2')
  45.         h2.appendChild(createElement())
  46.     }
  47.  
  48.     window.addEventListener('load', addButton)
  49.  
  50. })();