「@dependabot rebase」をするブックマークレット
#ブックマークレット
やりたいこと
Dependabotへのrebaseのコメントをよくする。いままで手動で打ってきたが、「dependabot」という文字列を間違えずに打つために神経を多少消耗するのでボタン一つでできるようにしたい。
デモ
https://gyazo.com/ec26ea868e185442ce136480c5b860f6
ブックマークレット
code:ブックマークレット
javascript:(()%20=%3E%20%7B%0A%20%20//%20(base:%20https://github.com/fregante/insert-text-textarea/blob/ccef9a7035f6a083864e26ff831ac5d68df95f51/index.ts#L1)%0A%20%20//%20Found%20on%20https://www.everythingfrontend.com/posts/insert-text-into-textarea-at-cursor-position.html%20%F0%9F%8E%88%0A%20%20const%20textarea%20=%20window.new_comment_field;%0A%20%20const%20text%20=%20%22@dependabot%20rebase%22;%0A%20%20//%20(base:%20https://stackoverflow.com/a/43299177/2885946)%0A%20%20textarea.dispatchEvent(new%20Event('focus'));%0A%20%20textarea.setRangeText(%0A%20%20%20%20text,%0A%20%20%20%20textarea.selectionStart%20%7C%7C%200,%0A%20%20%20%20textarea.selectionEnd%20%7C%7C%200,%0A%20%20%20%20'end'%20//%20Without%20this,%20the%20cursor%20is%20either%20at%20the%20beginning%20or%20%60text%60%20remains%20selected%0A%20%20);%0A%20%20textarea.dispatchEvent(new%20InputEvent('input',%20%7B%0A%20%20%20%20data:%20text,%0A%20%20%20%20inputType:%20'insertText',%0A%20%20%20%20isComposing:%20false%20//%20TODO:%20fix%20@types/jsdom,%20this%20shouldn't%20be%20required%0A%20%20%7D));%0A%20%20const%20commentBtn%20=%20document.querySelector('div.bg-gray-light:nth-child(2)%20%3E%20button:nth-child(1)');%0A%20%20commentBtn.click();%0A%7D)();%0A
以下が内容。
code:js
(() => {
// (base: https://github.com/fregante/insert-text-textarea/blob/ccef9a7035f6a083864e26ff831ac5d68df95f51/index.ts#L1)
// Found on https://www.everythingfrontend.com/posts/insert-text-into-textarea-at-cursor-position.html 🎈
const textarea = window.new_comment_field;
const text = "@dependabot rebase";
// (base: https://stackoverflow.com/a/43299177/2885946)
textarea.dispatchEvent(new Event('focus'));
textarea.setRangeText(
text,
textarea.selectionStart || 0,
textarea.selectionEnd || 0,
'end' // Without this, the cursor is either at the beginning or text remains selected
);
textarea.dispatchEvent(new InputEvent('input', {
data: text,
inputType: 'insertText',
isComposing: false // TODO: fix @types/jsdom, this shouldn't be required
}));
const commentBtn = document.querySelector('div.bg-gray-light:nth-child(2) > button:nth-child(1)');
commentBtn.click();
})();
技術的なこと
少しハマったのは、GitHubのコメントはtextareaにfocusしてから入力しないとコメントボタンが押せないところ。
JavaScriptで動的にコメント欄に描く方法はGitHub拡張ので使われていた
insert-text-textareaのコードを利用した。コメントに参照しているコードを書いている。