※This article is an English translation of issueへのリンクをMarkdownでいい感じにコピーできるChromeの拡張機能をつくった with Google translation.

TL;DR

I created a Chrome extension that can copy the link to the GitHub issue including the title and ID.

It becomes active only when viewing the issue page.
For example, if this issue, you can copy it with Markdown, HTML, or plain text like the below.
👇

#1｜Sample Issue

Please use it conveniently such as pasting into a Pull Request, daily report, or minutes etc.

Installation

Chrome Web Store

Why I made

In my company, everyone (includeing non-engineers) is planning and reporting tasks with GitHub's issue, so there are opportunities to write links to issues in various places, not only GitHub's issue or pull request but daily reports, minutes and so on.

Although it is okay to write only the URL, but it is inconvenient not to know the content of the issue unless it opens the URL, so I always write not only the URL of the issue but also the title and ID.

This work is so boring and I tried several Chrome extensions that I can copy with Markdown, but there isn't the one I like, so I made it anyway.

Usage

Please install from chrome web store.

Chrome Web Store

This extension is active only on the GitHub issue.
When you open the issue and click the extension button, you can copy the link to that issue by choosing from three types: Markdown, HTML, and plain text.

Sample

Markdown

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

=> #1｜Sample Issue

HTML

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

=> #1｜Sample Issue

Plain text

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

How to create

There are BrowserAction which functions at all times in Chrome's extension function and PageAction which functions on a specific page, and this time we implement it as a PageAction button because we want to make it function only on the issue page of GitHub.
I think that it is good to have a look at the following around the summary and the full comprehensive explanation of the official around here.

Chrome拡張の開発方法まとめ　その1：概念編 (Japanese articles)
Overview - Google Chrome

Those who are troublesome to read are officially released a lot of sample codes so I think that they are able to fully understand while touching them.

Summary

The code is here.

The overall structure is as follows.

A popup is displayed after selecting the format to be copied, so I prepare HTML for this screen.

background.js

Monitor the state of the page and activate the extension if it is an GitHub issue.

popup.js

When you press the button with the extension active, a popup will appear and let you choose the format to copy. Because DOM manipulation of the screen can only be done from script set as content_scripts in manifest.json, popup.js will only notify its event and close the window when format is chosen.

content.js

It receives copy event notification from popup.js in content.js, gets screen information, and executes the actual copy.

Bug reports and pull requests are welcome on GitHub at https://github.com/obiyuta/chrome-copy-link-to-issue