top-20-npm-versions.js

top-20-npm-versions.js

// ==UserScript==
// @name         npm-top-version-list
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       wungcq
// @match        https://www.npmjs.com/package/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=npmjs.com
// @grant        none
// @require      https://code.jquery.com/jquery-3.7.0.slim.min.js
// ==/UserScript==

(function() {
    'use strict';
    findTopAndRender();
})();

function findTopAndRender() {
    const versions = Array.from(document.querySelectorAll('[aria-labelledby="package-tab-versions"]>div>ul:last-child>li'));
    if(versions.length == 0) {
        setTimeout(findTopAndRender,500);
        return;
    }
    const versionData = versions.slice(1).map(x=>x.innerText.split('\n')).map(([version,times,releaseTime])=>({version,times:parseInt(times.replaceAll(',','')),timesText:times,releaseTime}));
    window.versionData = versionData;
    console.log(versionData);
    const sortedByInstallTimes = versionData.sort((a,b)=>b.times-a.times);
    console.log("sorted",sortedByInstallTimes);
    // Your code here...
    const top20 = sortedByInstallTimes.slice(0,20);
    const packageName = document.title.split(' - ')[0];
    console.log(top20);
    const html = top20.map((x,i)=>`
    <tr style="padding:3px 5px;background-color:${['#fff','#f5f5f5'][i%2]}">
       <td><a style="padding:0 5px;" href="https://www.npmjs.com/package/${packageName}/v/${x.version}?activeTab=code">${x.version}</a></td>
       <td><span style="padding:0 15px;color: #59D077"><code>${x.timesText}</code></span></td>
       <td><span style="padding:0 15px;color: #4CADF9"><code>${x.releaseTime}</code></span></td>
    </tr>`).join('');

    $('[aria-labelledby="package-tab-versions"]').prepend(`
    <h2>top 20 versions</h2>
    <table>
    <tbody>${html}</tbody>
    </table>`)

}