~/.js/github.com.js

README.md

github.com.js

dotjs userscript for visualizing package.json files (if present) underneath the tree view. Now with links to NPM for dependencies!

Very useful for navigating Node.JS projects

github.com.js

$(function () {
  var match = $('.tree-browser a:contains(package.json)');

  if (match.length) {
    $.get(match.attr('href'), function (res) {
      var file = $(res).find('#files');

      // make it look good
      file.css({
        marginTop: -15,
        marginBottom: 15,
      });

      // append package.json title
      file.find('.info span.icon').append($('<b>package.json</b>').css({
        padding: '8px 4px',
        display: 'inline-block',
      }));

      $('.tree-browser-wrapper').after(file);

      // try to find the raw URL for package.json so we can get the actual content
      var raw = $(file).find('#raw-url');
      if (raw && raw.length) {
        var url = raw[0].href.toString();

        $.get(url, function(data) {
          try {
            data = JSON.parse(data);
          } catch (e) { return; }

          var html = file.html(),
              modified = false;

          var packages = [];

          ['dependencies', 'devDependencies'].forEach(function(k) {
            if (typeof data[k] !== 'object') { return; }

            for (var package in data[k]) {
              if (typeof package !== 'string') { continue; }

              packages.push(package);
            }
          });

          // no packages? no modify!
          if (packages.length) {
            html = html.replace(new RegExp('(' + packages.join('|') + ')', 'g'), '$1 <a href="http://search.npmjs.org/#/$1">[view on npm]</a>');
            modified = true;
          }

          // if we haven't modified the html, there's no need to re-render it
          if (modified) {
            file.html(html);
          }
        });
      }
    });
  }
});