The current package.json is resolved by this string:

  const pkgUrl = `https://github.com/${user}/${repo}/blob/master/package.json`;

That fails for:

• modules that are developed on branches other than master, e.g. stable or develop (#18)
• Lerna-shaped monorepos, which store Node modules in packages/${ moduleName }/.

You're already querying for .files [title="package.json"]. You can reuse that query to get the path to package.json:

const packageLink = document.querySelector('.files [title="package.json"]');

if (packageLink) {
  const pkgUrl = packageLink.href;

The package.json is no longer in the page npmhub requests. I'm working on it.

Inspecting the content of the actual npm package would be pretty useful. Often it doesn't match what's on the repo. Example:

• https://github.com/fregante/webext-storage-cache (TypeScript source)
• https://www.unpkg.com/browse/webext-storage-cache@latest/ (ESM module)

broken image if no deps.

Suggestions:

• use icons instead of lengthy text
• add bundlephobia and packagephobia links
• show http://npm.broofa.com/ even for packages without dependencies since it now shows devDependencies

npmhub currently uses npmhub’s own logo, unchanged. I think it makes sense to at least slightly modify it, perhaps using GitHub’s gray on one side.

I just needed to recreate the icons in higher quality, so I thought about not using npmhub’s unchanged logo.

<svg height="512" viewBox="0 0 16 16" width="512" xmlns="http://www.w3.org/2000/svg">
	<path fill="#c12127" d="M0 16V0h16v16zM3 3v10h5V5h3v8h2V3z"/>
	<path fill="#333" d="M0 16L16 16 16 0z"/>
	<path fill="#fff" d="M3 3h10v10h-2V5H8v8H3z"/>
</svg>

Thoughts or alternative designs (in SVG) before I change this everywhere?

Opening a repo, switching to issues, then navigating back will show npmhub in a "loading" state because its loading has been halted.

Related to #63

Example: https://github.com/hypermodules/sitedown

Notice how <mark> tag plugin for markdown-it markdown parser ends up injecting a <mark> element into the page!

Some packages depend on non-NPM packages.

• Github: npmhub/npmhub#commitish
• Gitlab: gitlab:foo/bar#commitish
• local: file:./path/to/package (see here)
• alias: npm:foo@^1.0.0 (see here)
• urls (see here)

You may want to use the semver package to detect valid versions, but maybe you can get away without it.

Probably the key has expired or is invalid

The elements need to be appended to .experiment-repo-nav if the page has it.

Otherwise this is what it looks like:

Would it be in scope enough for you to consider linking individual pages (at least .html/.htm ones) to https://raw.githack.com/ ?

It would be nice if there was an ability to add custom URLs for GitHub Enterprise instances.

Example: https://github.com/leebyron/async-to-gen/blob/master/package.json

This wouldn't even require the initial fetch. Just parse the page and run.

Couldn't be a useful improvement?

Better if configurable from the settings.

If GitHub decides to load the file list asynchronously, npmhub won't see the file and won't appear.

This happens on:

• any repo, sometimes, e.g. https://github.com/fregante/object-fit-images
• when seeing non-default branches, e.g. https://github.com/npmhub/npmhub/tree/svelte

Similar problem: #106

Solution: use select + MutationObserver to detect a deferred load and wait for it
https://github.com/sindresorhus/refined-github/blob/master/source/github-events/on-file-list-update.ts

Did you plan to support GitLab ?

It could be nice to support both GitHub and GitLab as octotree does.

Currently the deployment steps are:

0. Update the version in extension/manifest.json
1. Create a commit for it
2. Create a tag with the same version

If you're ok with it, I can skip the first two steps by dynamically update the version during deployment (without committing it)

You can see it in action on my GitHub Clean Feed:

• .travis.yml
• package.json
• manifest.json

Github had major UI changes. The extension doesn't work anymore.
It needs an upgrade.

This is currently being applied to all websites, generating console errors and appending crossrider_data_store_temp attributes on body everywhere. It should be limited to the github.com domain only.

@zeke Do you mind if I publish it to AMO?

https://developer.mozilla.org/en-US/Add-ons/Distribution

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

https://github.com/sindresorhus/refined-github/blame/761615dfb514d8fbe8883a1b872849af97f0de20/package.json

It doesn't have to work on this page, so it should probably just be filtered out

This extension would be much smaller, faster, and easier to maintain without jquery imo.

Link: https://github.com/npmhub/npmhub/network/dependencies

Should npmhub just fetch that view? Maybe not, npmhub's implementation might still be preferable because:

• works on non-root package.json
• UI highlights dev and peer deps
• shows descriptions
• works with non-github packages, like buble here

I think we should at least add a shortcut/button/link to the page, since it's 2 page-loads away from a repo's root (Insights > Dependency graph)

It'd be great to publish this for Safari now that it supports same API.

Related threads:

• refined-github/refined-github#14
• fregante/browser-extension-template#31

@zeke do you have an Apple developer account?

Using https://github.com/tmpvar/jsdom it's pretty easy to write some tests for web extensions.

404s might be private or not published.

https://github.com/octolinker/browser-extension/

Crossrider is being a biotch. Please help!

It'd be easier to test the extension (since we'll have modules that can be unit tested) and easier use modules from npm if the project used browserify. This would also make #37 easier to do.

#17 (comment)

Perhaps:

const branchSelector = document.querySelector('[data-hotkey="w"][title]');
const branch = branchSelector ? branchSelector.title : 'master';

First, congrats on the nice idea. The extension is a must-have.

My issue is that I can see the versions of the dependencies only if I use the extension as unpacked extension.
If I use the version from Chrome Web Store, then I cannot see the versions.

I tested it on two browsers: Chromium 53 and Chrome 55 under Ubuntu 16
For both browsers, the result is the same.

On a side-note, Chrome cries a warning:

Unrecognized manifest key 'applications'

when I upload the files.

The data to store would be something like:

Examples:

• optional: https://github.com/babel/babel/tree/7.0/packages/babel-cli
• peer: https://github.com/babel/babel-loader

CORS CORB are blocking request to NPM registry. Not sure what we can do about it. Any idea?

Did all the command on command line from installing the npm globally npm install -g create-react-app along with following codes:

npx create-react-app and also cleared the npm cache but it always get stuck on the line in the image showing the following error. Along with the error:

┌──────────────────────────────────────────────────────────────────┐
│ npm update check failed │
│ Try running with sudo or get access │
│ to the local update config store via │
│ sudo chown -R $USER:$(id -gn $USER) C:\Users\Smart Sites.config │
└──────────────────────────────────────────────────────────────────
along with 65 packages are looking for funding [1]: https://i.stack.imgur.com/KJVVp.png

bundledDependencies is actually just an array, not an object:

https://docs.npmjs.com/files/package.json#bundleddependencies

Example in the wild:

https://github.com/juliangruber/ghub.io

While testing #100 I noticed that if you load https://github.com/npmhub/npmhub, then navigate to https://github.com/npmhub/npmhub/blob/master/package.json, then use the back button to return to the main page the list of dependencies shows twice. Do it again and it'll show three times etc. I'm not seeing this behavior on the package.json page, only on the main repo page with the readme.

This is happening in both Chrome and FireFox on Windows 10.

Loving this extension, thanks for bringing it up on NodeUp.

I found some places where it doesn't work. I haven't had time to look into why:

Does not work:
https://github.com/facebook/flux
https://github.com/facebook/flux/tree/master/examples/flux-chat

Interesting, this one works:
https://github.com/facebook/react/tree/master/examples/todomvc-flux

I just noticed this today. Something is up with the JSON response. Doesn't look like npmhub has changed recently. Any ideas, @bfred-it?

It doesn't seem to work anymore, probably because the file list is loaded later: https://gitlab.com/Rich-Harris/buble

I'd like the option of specifying an alternate NPM registry to do the lookups from if possible. I'm in an enterprise environment. Authorizing my enterprise github works well, however we also have an enterprise NPM registry :) So would like to support that as well.

E.g. https://github.com/pablopunk/whoami-api

When adding the box below the readme, the JavaScript is expecting the readme to be in the DOM. It should work around missing readme.

content.js:349
Uncaught (in promise) TypeError: Cannot read property 'tagName' of null
    at createBox (content.js:349)
    at init (content.js:295)
    at gitHubInjection (content.js:95)
    at content.js:377
    at content.js:379

It would be nice if there was some CONTRIBUTING.md to explain guidelines and provide help for contributing.

With https://github.com/OctoLinker/injection

It might be a good reason to do #43

Example: https://github.com/shinnn/fettuccine

• Wrong endpoint is being fetched: https://registry.npmjs.org/@shinnn/eslint-config-node
• Also ghub.io doesn't support them: juliangruber/ghub.io#24

Publish condition not met: To publish your item, you must provide mandatory privacy information. This can be done in the new Developer Dashboard: https://chrome.google.com/webstore/devconsole.

Related Refined GitHub issue, probably parts of it can be copied: refined-github/refined-github#2685

@zeke can you look into it?

cc @bfred-it

• Add personal GitHub token field in options
• Make GitHub requests to GitHub's API (which is at https://api.github.com or /api on GHE, I think)