Bookmarklet to reveal package.json dependencies on github.

Dependencies.js

javascript:void function(){
  (async function(){
    let j = document,
      k = (...a) => j.querySelectorAll(...a),
      l = ((...a) => j.querySelector(...a))(
        'tr.react-directory-row a[title="package.json"]',
      )?.href?.replace("blob", "raw"),
      { dependencies: h, devDependencies: a } = await window
        .fetch(l)
        .then((a) => a.json()),
      b = h ? Object.entries(h) : [],
      c = a ? Object.entries(a) : [],
      d = (b) => [...k(`.${b}`)],
      e = d("pkgDeps");
    
    0 < e?.length && e.forEach((a) => a.remove());
    
    let f = ([a, b]) =>
        `
          <div style="display:flex;justify-content: space-between;gap:1rem;">
            <a href="https://npmjs.com/package/${a}" target="_blank" rel="noreferrer">
              ${a}
            </a>
            <span>${b}</span>
          </div>
        `,
      g = j.body.insertAdjacentHTML(
        "afterend",
        `
          <div class="pkgDeps" style="font-size:6vh;color:hotpink;position:absolute;z-index:1000;top:130px;right:2rem;">
            Dep: ${b.length} / Dev: ${c.length}
          </div>
          <div class="pkgDeps" style="font-size:1.15rem;background:#000a;color:hotpink;position:fixed;z-index:1000;bottom:0;right:0;height:25%;width:36%;overflow-y:auto;overflow-wrap:anywhere;padding:1rem;display:flex;flex-direction:column;">
            <h5>DEP</h5>
            ${b.map(f).join("")}
            <h5>DEV</h5>
            ${c.map(f).join("")}
          </div>
        `,
      );

    (console.log("fetch package.json", b, c, g),
      d("pkgDeps").forEach((b) =>
        b.addEventListener(
          "click",
          ({ target: c }) =>
            !["A"].includes(c.nodeName) &&
            console.warn("REMOVE", b?.remove() || b, c),
        ),
      )
    );
  })()
}();

Dependencies.min.js

javascript:void function(){(async function(){let j=document,k=(...a)=>j.querySelectorAll(...a),l=((...a)=>j.querySelector(...a))("tr.react-directory-row a[title=\"package.json\"]")%3F.href%3F.replace("blob","raw"),{dependencies:h,devDependencies:a}=await window.fetch(l).then(a=>a.json()),b=h%3FObject.entries(h):[],c=a%3FObject.entries(a):[],d=b=>[...k(`.${b}`)],e=d("pkgDeps");0<e%3F.length%26%26e.forEach(a=>a.remove());let f=([a,b])=>`<div style="display:flex;justify-content: space-between;gap:1rem;"> <a href="https://npmjs.com/package/${a}" target="_blank" rel="noreferrer">${a}</a> <span>${b}</span> </div>`,g=j.body.insertAdjacentHTML("afterend",`<div class="pkgDeps" style="font-size:6vh;color:hotpink;position:absolute;z-index:1000;top:130px;right:2rem;"> Dep: ${b.length} / Dev: ${c.length} </div> <div class="pkgDeps" style="font-size:1.15rem;background:%23000a;color:hotpink;position:fixed;z-index:1000;bottom:0;right:0;height:25%25;width:36%25;overflow-y:auto;overflow-wrap:anywhere;padding:1rem;display:flex;flex-direction:column;"> <h5>DEP</h5> ${b.map(f).join("")} <h5>DEV</h5> ${c.map(f).join("")} </div>`);console.log("fetch package.json",b,c,g),d("pkgDeps").forEach(b=>b.addEventListener("click",({target:c})=>!["A"].includes(c.nodeName)%26%26console.warn("REMOVE",b%3F.remove()||b,c)))})()}();