GitHubのissueへのリンクをMarkdown etcでいい感じにコピーできるChromeの拡張機能をつくった

## 2017.09.19 追記

プルリクもissueと同じようにコピーできるようになりました :tada: 
👇のような感じでコピーされます。

[#5｜Sample pull request (Pull request)](https://github.com/obiyuta/chrome-copy-link-to-issue/pull/5)

## TL;DR

GitHubのissueへのリンクをタイトル、IDも含めてコピーできるChromeの拡張機能をつくりました。
issueもしくはプルリクのページ閲覧時のみアクティブになり、たとえば[このissue](https://github.com/obiyuta/chrome-copy-link-to-issue/issues/1)であれば、

[#1｜Sample Issue](https://github.com/obiyuta/chrome-copy-link-to-issue/issues/1)

👆の形になるようMarkdown、HTML、プレーンテキストから選んでコピーできます。
チャットやissue、プルリクなどに貼り付ける際の手間が軽減され、パッと見もわかりやすいのでそれなりにいい感じです。

#### インストール

[Chrome Web Store](https://chrome.google.com/webstore/detail/copy-the-link-to-github-i/cnnomdadchddnfpalaaoniehedbffnpp)

![Kapture 2020-10-04 at 13.04.53.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1699/395fc048-4562-6403-f981-0f0a605c7f80.gif)

## コピーがめんどう…

自分の会社ではエンジニア以外も全員がGitHubのissueでタスク管理や施策の立案・レポーティングをしているので、プルリクなどGitHubの中だけではなく日報や議事録など、ありとあらゆるところにissueへのリンクを記載する機会があります。
ペロッとURLだけ記載すればいいっちゃいいんですが、いちいち遷移してページを覗かないとissueの内容がわからないというのがどうにもストレスで、いつもissueのURLだけでなくタイトル、IDを併記するようにしています。
この作業が本当に面倒で、いくつかMarkdownでコピーできるChromeの拡張機能を試してみたんですが、いつも自分が記載している形式でコピーしてくれるものがなかったので、どうせならとつくりました。

## つかいかた

### インストール

[Chrome Web Store](https://chrome.google.com/webstore/detail/copy-the-link-to-github-i/cnnomdadchddnfpalaaoniehedbffnpp)

👆から拡張機能を追加してください。

この拡張機能はGitHubのissueページでしかアクティブになりません。
issueを開いてポチッと押すと、そのissueへのリンクをMarkdown、HTML、プレーンテキストの3種類から選んでコピーすることができます。

![4686c1f7-e4e1-cef1-cc1c-fdb9927fb150.png](https://qiita-image-store.s3.amazonaws.com/0/1699/26062922-8ceb-97ee-e4ea-f36e62945060.png "4686c1f7-e4e1-cef1-cc1c-fdb9927fb150.png")

### たとえば


https://github.com/obiyuta/chrome-copy-link-to-issue/issues/1

👆のissueを開いて拡張機能を使ってMarkdown、HTML、プレーンテキストのそれぞれでコピーすると、下記のようになります。複数のissueが並んで記載されていても、IDだけ伝えれば誰でもパッと探せて便利なのでIDを頭にくっつけています。

#### Markdown

```
[#1｜Sample Issue](https://github.com/obiyuta/chrome-copy-link-to-issue/issues/1)
```

=> [#1｜Sample Issue](https://github.com/obiyuta/chrome-copy-link-to-issue/issues/1)

#### HTML

```
<a href="https://github.com/obiyuta/chrome-copy-link-to-issue/issues/1">#1｜Sample Issue</a>
```

=> <a href="https://github.com/obiyuta/chrome-copy-link-to-issue/issues/1">#1｜Sample Issue</a>

#### プレーンテキスト

```
#1｜Sample Issue
https://github.com/obiyuta/chrome-copy-link-to-issue/issues/1
```

## つくりかた

Chromeの拡張機能には常時機能するBrowserActionと特定のページで機能するPageActionがあり、今回はGitHubのissueページでのみ機能させたいのでPageActionボタンとして実装しています。
このあたりは下記のようなわかりやすいまとめや公式の充実した解説を見てもらうのがいいかと思います。

- [Chrome拡張の開発方法まとめ　その1：概念編](http://qiita.com/edit-mode/items/26d7a22233ecdf48fed8)
- [Overview - Google Chrome](https://developer.chrome.com/extensions/overview)


読むのが面倒という方は、公式にサンプルコードがたくさん公開されているので触りながらでも十分わかるようになっているかと。

[Sample Extensions / developer.chrome.com](https://developer.chrome.com/extensions/samples#search:pageaction)


### 概要

コードは[こちら](https://github.com/obiyuta/chrome-copy-link-to-issue)。
全体の構成としては下記の通りです。

![c27bb4dc-44f9-2def-dc60-8867552cee7e.png](https://qiita-image-store.s3.amazonaws.com/0/1699/cc89fb59-3c58-367a-7ba5-092e9a1c42ee.png "c27bb4dc-44f9-2def-dc60-8867552cee7e.png")

コピーする形式を選ぶためにポップアップを表示していますが、この画面のみHTMLを用意しています。

### background.js

ページの状態を監視してGitHubのissueであれば、拡張機能をアクティブにします。

### popup.js

拡張機能がアクティブになった状態でボタンを押すと、ポップアップが表示されコピーするフォーマットを選択させます。画面のDOM操作はmanifest.jsonにcontent_scriptsとして設定しているスクリプトからしかできないため、popup.jsではフォーマットが選ばれた際にそのイベントの通知のみを行い、ウィンドウを閉じます。

### content.js

content.jsでpopup.jsからのコピーイベント通知を受け取り、画面の情報を取得し実際のコピーを実行します。


### 国際化

[Chromeエクステンションを作ろう：国際化編](http://qiita.com/dhun/items/59707eeb2dc38d3a7a99)

上記を参考に、とりあえず日本語及び英語に対応してみました。

## これから

少し自分で使ってみて、

- [ ] 一覧で表示されたissueを一気にコピーできるようにする
- [x] 対応した：プルリクもコピーできるようにする
- [x] 対応した：[ZenHub](https://www.zenhub.com/)をサポートする（issueがモーダルで表示された際にうまくコピーできない）

あたりが既に気になっているので順次対応していこうと思っています。
その他にも色々突っ込みあるかと思いますので、コメントやissue、プルリクなどいただけるとです。

https://github.com/obiyuta/chrome-copy-link-to-issue