GitHubを少し便利に使えるようなChrome拡張機能を作った

2020.02.24

日々使うGitHubで外部リンクをブラウザの別タブで開けたらいいなと日頃から思っていたので、それを解決するChrome拡張機能を作って動かしてみました。

前書き

最近は仕事・プライベートに限らず、PCやスマホでWebブラウザを開かない日はないと言っても過言ではないように思います。

その中でも GitHub は個人的に利用する頻度が高いサービスのひとつです。

自分の関わるプロジェクトでPull RequestやIssueを見るだけでなく、OSSのリポジトリでREADMEを読んで使い方を学んだり、ソースコードを直接読むこともあるでしょう。

そんななかでちょっとした不満というか、ここがこうだったらいいのになと思ったのがリンクを開く時の挙動でした。

やりたいこと

GitHubのWebページで外部リンクを新規タブで開けるようにする、シンプルですがこれがやりたいことです。

どうやって実現しようか考えて、この悩みを解決するChrome拡張機能を作ってみようという結論に至りました。

また、この機能に必要な処理は以下のようになると考えました。

GitHubのWebページを開く
Webページ中からaタグを探す
aタグの中から github.com 以外のドメイン（外部リンクとします）のURLをもつ要素を探す
外部リンクを持つ要素に target="_blank" を付与する

ということでこれをChrome拡張機能として実装してみます。

余談: `target="_blank"` は必要か？

リンクを新規タブで開いて欲しい時 target="_blank" を使う事自体は特に珍しいことではありません。

MDN web docsを見ると target について以下のように記載があります。

MDN web docs: <a>: アンカー要素

引用（一部省略）

リンク先の URL を表示する場所を指定します。これは、閲覧コンテキスト (タブ、ウィンドウ、<iframe>) の名前またはキーワードです。以下のキーワードは特別な意味を持ちます:
・_blank: 新しい閲覧コンテキストに URL を読み込みます。通常はタブですが、新しいウィンドウを使用するようにブラウザーを設定できます。

ただしこれに関しては議論もあるようで、とりあえず外部リンクには target="_blank" をつけたいという人もいれば、無闇に target="_blank" を使いたくないと考える人もいるようです。

自分も全ての外部リンクに必須であるとは思いませんが、実装自体は難しくないはずなのでGitHubはあえて target="_blank" 使わない方針をとっていると考えることができるでしょうか。

ちなみにGitLabでは外部リンクに target="_blank" が付与されているようでした、このあたりは作り手の意図が読み取れるようで面白いですね。

またドキュメント中では target="_blank" を使用する際の rel="noreferrer" や rel="noopener" の併用についても記載がありますので、セキュリティの観点も忘れないようにしましょう。

MDN web docs: セキュリティとプライバシーの考慮事項

やったこと

前置きが長くなりましたが、Chrome拡張機能を追加するのに必要なのは2つのファイルのみです。

manifest.json はChrome拡張機能として必要な情報や権限を記述するファイルです。

Manifest File Format

最低限だと以下のような内容で足りるかと思います。

{
  "manifest_version": 2,
  "name": "github-external-link",
  "version": "0.1.0",
  "description": "add `target=\"_blank\"` to external links on github",
  "content_scripts": [
    {
      "matches": ["https://github.com/*"],
      "js": ["contentScript.js"]
    }
  ]
}

manifest.json にも記述のある contentScript.js は前述の処理を実現するためのスクリプトで以下のようにしてみました。

Content Scripts

window.addEventListener(
  'load',
  () => {
    const links = document.getElementsByTagName('a')
    Array.prototype.forEach.call(links, link => {
      const isExternalLink =
        link.href.match(/^https?:\/\/.+/) && !link.href.includes('github.com')
      if (isExternalLink) {
        link.target = '_blank'
        link.rel = [link.rel, 'noopener', 'noreferrer'].join(' ')
      }
    })
  },
  false,
)

この2つのファイルを同一のディレクトリに置き、Chromeの拡張機能画面で「パッケージ化されていない拡張機能を読み込む」で選択すると使用可能になります。（※拡張機能の追加、使用は自己責任で行ってください）