ノンカフェインであなたにやさしい

Ruby,Rails,HTML,CSS,Reactなど

GitHubとJiraのチケット名とURLをコピーするChromeExtensionを作った

TL;DR

GitHubとJiraのチケット(issue,PR)番号とタイトルとURLをMarkdownか平文で1クリックでコピーできるChromeExtensionを公開しました。

chrome.google.com

背景

誰かにタスクを振る時や、自分のタスクを共有する時にいちいちチケット名と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.jsonpermissions: ['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で簡単に実装できます。
お試しあれ。