☰

Add-Link-To-NPM-Devtool-Tech

add an link to npm devtool tech in npm package page

As of 2022-05-18. See the latest version.

  1. // ==UserScript==
  2. // @name                Add-Link-To-NPM-Devtool-Tech
  3. // @name:zh-CN          给npm包添加一个到NPM-Devtool-Tech的链接
  4. // @namespace           http://tampermonkey.net/
  5. // @version             0.0.2
  6. // @description         add an link to npm devtool tech in npm package page
  7. // @description:zh-CN   在npm包页面添加一个到NPM-Devtool-Tech的链接
  8. // @author              kkopite
  9. // @match               https://www.npmjs.com/package/*
  10. // @icon                https://www.google.com/s2/favicons?sz=64&domain=www.npmjs.com
  11. // @grant               none
  12. // ==/UserScript==
  13.  
  14. (function () {
  15.   'use strict'
  16.  
  17.   const h3s = document.querySelectorAll('h3')
  18.   let h3 = [...h3s].find(h => h.innerText === 'Install')
  19.  
  20.   const link = document.createElement('div')
  21.   const url = `https://npm.devtool.tech/${window.location.pathname.split('/')[2]}`
  22.   link.innerHTML = `
  23.   <div class="dib w-50 bb b--black-10 pr2 w-100">
  24.     <h3 id="devtoolTech" class="f5 mt2 pt2 mb0">DevTool Tech</h3>
  25.     <p class="_40aff104 fw6 mb3 mt2 truncate black-80 f5">
  26.       <a aria-labelledby="DevTool Tech" class="b2812e30 f2874b88 fw6 mb3 mt2 truncate black-80 f4 link" href="${url}" target="_blank" rel="noopener noreferrer nofollow">
  27.       <span>${url}</span>
  28.       </a>
  29.     </p>
  30.   </div>
  31.   `
  32.  
  33.   h3.parentNode.insertBefore(link, h3.nextSibling.nextSibling)
  34.  
  35. })()