BacklogのIssueのタイトルとURLをマークダウンのリンクにしてクリップボードに保存するブックマークレット

Backlogを仕事で使っていると、進捗のミーティングなどの資料作成のためにBacklogのページのリンクをコピー・アンド・ペーストするような作業があり非常にだるい。

このだるさを少しでも楽にするために、Backlogのページでブックマークレットを実行して手間を減らした。

結果

このようなhttps://アカウント名.backlog.com/view/プロジェクト名-IDBacklogのIssueのページを開いて、下記のjavascriptのブックマークレットを実行すると[チケットID チケットタイトル](https://対象のURL)というマークダウン形式のタイトルにリンクが付与されたものをクリップボードにコピーする

カンバンボード表示時にポップアップ表示させたIssueの表示にも対応している

javascript: var iframe,d;iframe=document.getElementById("issue-dialog-iframe-kanban"),d=null==iframe?document:iframe.contentWindow.document,(()=>{const e=d.querySelectorAll("span.title-group__title-text")[0].textContent,t=`[${d.querySelectorAll("span.ticket__key-number")[0].textContent} ${e}](${d.URL})`,n=d.createElement("span");n.textContent=t,d.body.appendChild(n),d.getSelection().selectAllChildren(n),d.execCommand("copy"),d.body.removeChild(n)})();

上記コードをコメントを添えながら

var iframe, d;

// iframeを取得
iframe = document.getElementById("issue-dialog-iframe-kanban");

//iframの有無でカンバンボード表示時か、対象のIssueのページを開いているか判断する
if(iframe == null) {
  d = document
} else {
  d = iframe.contentWindow.document
}


(() => {
  // backlogのページからタイトルなど必要な要素を集める
  const ticketName = d.querySelectorAll("span.title-group__title-text")[0].textContent;

  const ticketId = d.querySelectorAll("span.ticket__key-number")[0].textContent;
  const url = d.URL;

  // クリップボードに保存する文字列を構築
  const display = `[${ticketId} ${ticketName}](${url})`;

  // 文字列をコピーするために適当なdom要素を作成し、body要素の子要素に追加する
  const tmp = d.createElement('span');
  tmp.textContent = display;
  d.body.appendChild(tmp);

  // bodyにdom要素を追加していると、対象の要素を選択できる
  d.getSelection().selectAllChildren(tmp);
  // クリップボードに選択要素をコピー
  d.execCommand("copy");
  // 追加した要素を削除して後始末
  d.body.removeChild(tmp);
})();