Backlogの親課題名を挿入する拡張機能を作った

すー

2021年4月12日 22:14

Backlog の子課題作成時にそのタイトルへ、紐づく親課題のタイトルを挿入するChrome拡張機能を自作しました。

背景

子課題作成時に親課題のタイトルを引き継ぐような機能がなかったから作った。

具体的な背景

弊チームのBacklog運用方法のひとつで既存の親課題「リーダーTさんの第一子を名付ける」という案件があったとき、レビューやテストの実施時に子課題を作成します。

その子課題タイトルの名付けルールが次のようなものです。
「【設計レビュー】リーダーTさんの第一子を名付ける」
「【テスト依頼書】リーダーTさんの第一子を名付ける」

この親課題のタイトルをコピペで貼り付けるのが本当にうざったい作業でどうにかしたかったのです。

こんな機能普通にあるんじゃね。今画面上に出ていないだけで実は管理者設定で追加できるんじゃね、と思いBacklogさんに聞いてみたところ。

バックログ @backlogapp のテンプレート機能で、タイトルに親課題のタイトルを挿入する機能ってないんですかね。
— Suzuki@agex (@szk_agex) March 19, 2021

#Backlogさんへ問い合わせた意思はなくって、ぼくのTLにいるえらい人が教えてくれないかなと思ってのpostでした。

恐れ入りますが、ご質問いただいたようなタイトルに親課題のタイトルを挿入する機能がございません。
よろしければ、ご利用シーンなどの詳細と併せてこちらのフォームにご要望をお寄せいただけますと幸いです。https://t.co/QPjPUAQMi5
— Backlog | プロジェクト管理ツール (@backlogapp) March 19, 2021

#ご丁寧な返信が！機能は無くって残念。

作った

BacklogInsertParentTaskName
├ images
│ └ kirby.png
├ background.js
├ insertParentTaskName.js
└ manifest.json

manifest.json

{
	"manifest_version": 2,
	"author": "ワイくん",
   "name": "Backlog Insert ParentTask Name",
	"description": "親課題のタイトルを挿入するで。",
	"version": "0.1",
	"icons": {
		"32": "images/kirby.png",
		"48": "images/kirby.png",
		"128": "images/kirby.png"
	},
	"content_scripts": [{
		"matches": ["https://おきかえてね/view/*"],
		"js": ["insertParentTaskName.js"]
	}],
	"background": {
		"scripts": ["background.js"]
	},
	"browser_action": {
		"default_icon": "images/kirby.png",
		"default_title": "課題タイトルを挿入や！"
	},
	"permissions": [
		"activeTab"
	]
}

insertParentTaskName.js

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
	if (request == "Action") {
		insertParentTaskName();
	}
});
function insertParentTaskName() {
	if(document.getElementById('addIssueDialog').classList.contains('is_visible')) {
		var target = document.getElementById('addIssueDialog');
		var subtaskingSummary = document.getElementsByClassName("subtasking-summary")[0].innerHTML;
		var title = subtaskingSummary.split(" ")[1];
		var form = document.getElementById('summaryInput')
		form.value = "【】" + title;
		form.focus();
		form.setSelectionRange(1, 1);
	}
}

# Chrome拡張機能にjQueryは使えないと思って使わず書いたけど、使えるらしい。

background.js

chrome.browserAction.onClicked.addListener(function(tab) {
	chrome.tabs.sendMessage(tab.id, "Action");
});

カービー

#コピーするからカービー

使い方

誰でもかんたん！chrome拡張の作り方！【好きなサイトのcssを書き換えちゃおう】 | すずきライフ

https://belltree.life/chrome-extension-tutorial/

「chromeに読み込ませる」あたりから

Chromeに読み込ませたら、右上の拡張機能アイコンをクリック→カービーをクリックしてタスクバーにピン留め(常駐)させる。

バックログを開いて「子課題を追加する」→「新しい課題を作成」で子課題を作成モーダルを表示させて、カービーをクリックすると最&高です。

あなたにサポートができるのか・・・！