GitHubとJiraのチケット名とURLをコピーするChromeExtensionを作った
TL;DR
GitHubとJiraのチケット(issue,PR)番号とタイトルとURLをMarkdownか平文で1クリックでコピーできるChromeExtensionを公開しました。
背景
誰かにタスクを振る時や、自分のタスクを共有する時にいちいちチケット名とURLをコピーするのが面倒…
GitHubのissueをコピーできるExtensionはあったのですが、Jiraが無かったので、GitHubとJira両方に対応した一括コピーのChromeExtensionを作って公開しました。
使った言語
Javascript,jQueryとほんの少しのHTML,CSS
実装
チケット番号、タイトルの取得
jQueryでDOMを辿りチケット番号やタイトルを取得
※ GitHub,JiraのDOM構成が変わると死にます
// GitHubからチケット番号、タイトルを取得 function getTitleForGithub() { const h1 = 'h1.gh-header-title'; const title = document.querySelectorAll(`${h1} .js-issue-title`)[0].innerText.trim(); const num = document.querySelectorAll(`${h1} .gh-header-number`)[0].innerText; return `${num}|${title}`; } // Jira(チケット詳細ページ)からチケット番号、タイトルを取得 function getTitleForJiraBrowse() { const title = document.querySelectorAll('h1.hYXQEK')[0].innerText.trim(); const num = document.querySelectorAll('a.ihyVSq')[0].innerText; return `${num}|${title}`; } // Jira(一覧ページ)からチケット番号、タイトルを取得 function getTitleForJiraBoard() { const selected = '.ghx-selected'; const title = document.querySelectorAll(`${selected} .ghx-summary`)[0].innerText.trim(); const num = document.querySelectorAll(`${selected} a.ghx-key`)[0].getAttribute('aria-label'); return `${num}|${title}`;
クリップボードへのコピー
見えない位置に textarea
を作りコピーさせる一般的な方法
※ クリップボードを使用するには manifest.jsonに permissions: ['clipboardWrite']
を指定する必要があります。
// textをクリップボードへコピー function execCopy(text) { const textarea = document.createElement('textarea'); textarea.style.position = 'fixed'; textarea.style.opacity = 0; textarea.value = text; document.body.appendChild(textarea); textarea.select(); document.execCommand('Copy'); document.body.removeChild(textarea); }
コードは全てGitHubで見られます。
github.com
コピーする形式
Markdownと平文でコピーできます
Markdown
[<チケット番号>|<チケット名>](<チケットURL>)
平文
<チケット番号>|<チケット名> <チケットURL>
おわりに
ブラウザ上での処理を自動化したり簡略化したりするのにChromeExtensionは便利です。
処理がフロントのJs(ChromeExtensionで言うContentJs)だけで済む場合は、ExtensionにしないでもTampermonkeyで簡単に実装できます。
お試しあれ。