読者です 読者をやめる 読者になる 読者になる

GitHub上のnpmパッケージ名をリンクに変えるChrome拡張GitHub Linkerで捗る

github npm chrome

GitHub上のソースコードrequire('morgan')とか書いてあって、このパッケージってなんだっけ?って "npm + morgan" でググってnpmのサイトかGitHubリポジトリを探すことってよくある。

ありすぎるので、自動リンク化するChrome拡張書こうかなと思って先行実装が無いかググったら、見事にあった。日本語でほとんど紹介されてなかったので紹介するのでNoderは今すぐインストールすべし。

これをインストールすると、GitHub上のファイル(.js, .jsx, .coffee, .md)内のパッケージ名部分が該当パッケージのGitHubリポジトリへのリンクになる*1

f:id:teppeis:20150215142630p:plain

対応しているパッケージシステムは以下。

対応しているリンク形式は github-linker/core に詳しく書いてあるけど、

  • require('mocha') のパッケージ名
  • package.json, bower.json 等の dependencies のパッケージ名

に加えて、

なんかも解決してくれてさらに捗る。

OSSなのでさらに良い

Chrome拡張のソースコードOSS化されてGitHubに公開されている。

実装はいくつかのnpmモジュールに分割 & browserifyビルドされていて、Chrome拡張にありがちなごった煮コードではないのが良い。また最近もアクティブに開発されているのでプルリクやissueを投げてみると反応はありそう。とりあえずGitHub Enterprise対応はする予定っぽい。Rubyの人たちもGem対応をプルリク投げたりすると捗るかも(すでにそういうのあるのかな?)。

あとGitHub本家にこの機能を取り込んでくれ!っていう場合はこのissueにvoteしときましょう

最後に簡単に各内部モジュールの説明。それぞれ個別にnpmで公開されてる。

  • github-linker/chrome-extension: browserifyでcoreをChrome拡張としてビルド
  • core: GitHub上の文字列をリンクに置き換えるメインロジック
  • resolver: user/repo@branch等の文字列をGitHub URLに変換するロジック
  • cache: npm, bower等のパッケージ名とGitHub URLのマップのキャッシュ
  • injection: GitHubでシングルページ的な画面遷移が発生したイベントでコードを注入するライブラリ

resolverやinjectionはこの拡張と独立してるので、GitHub関連でChrome拡張を書くときに使うと便利かも。

*1:個人的にはGitHub repoよりもnpmページにリンクして欲しいのだが