Jira Power Bookmarklets

I wish Jira did a couple of more things for me, so I made bookmarklets to help out. Read about how three bookmarklets can help day to day Jira usage.

Jira Power Bookmarklets

Bookmarklets are great and I'd like to share with you some of mine that I use for Jira. All examples here are using my personal Jira instance and are designed to easily put in your own CSS selectors as your Jira instance may vary.

πŸ€”
Not sure what bookmarklets are? I've got you covered in my What are Bookmarklets? post.

This is my most used Jira bookmarklet. It takes the current ticket and copies the ticket number and title as a link to your clipboard. For example, the below ticket highlights what gets used:

Uses the ticket number and title from the full ticket view as highlighted.

The link that is copied on to your clipboard looks like:

SD-1 Add vectorisation to project

The code for this is:

javascript: (function () {
	const titleSelector = '[data-test-id$="summary.heading"]';
	const ticketNumberSelector = '[data-test-id$="breadcrumb-current-issue-container"] a';

	const titleElement = document.querySelectorAll(titleSelector)[0];
	const ticketNumberElement = document.querySelectorAll(ticketNumberSelector)[0];

	const getLinkText = `${ticketNumberElement.innerText} ${titleElement.innerText}`;

	const copyJiraTicketToClipboard = () => {
		const copiedLinkElement = ticketNumberElement.cloneNode(true);
		copiedLinkElement.textContent = getLinkText;

		const clipboardItem = new ClipboardItem({
			"text/plain": new Blob(
				[copiedLinkElement.innerText],
				{ type: "text/plain" }
			),
			"text/html": new Blob(
				[copiedLinkElement.outerHTML],
				{ type: "text/html" }
			),
		});

		navigator.clipboard.write([clipboardItem]);
	};

	copyJiraTicketToClipboard();
})();

If you want to look into how I wrote the above with the Clipboard API check out:

Why Isn’t Clipboard.write() Copying My RichText/HTML?
Having issue about copying HTML to the clipboard in JavaScript using Clipboard.write()? So did I, and this write up follows how I solved the issue.

Widen Jira issue

On older versions of Jira, long comments, tables, or images could be cut off the side of the main ticket body. Newer versions don't suffer as badly from this, but sometimes widening the main ticket is helpful. See the before and after below:

The code is:

javascript: (function () {
	const ticketBodySelector = "[data-test-id$='issue.views.issue-details.issue-layout.left-most-column']";
	const ticketBody = document.querySelectorAll(ticketBodySelector)[0].parentElement;

	ticketBody.style.width = '150%';
})();

Add up selected backlog tickets

Sometimes you're in your backlog view and need to add up a few tickets. Maybe to estimate your next sprint during planning maybe during refinement. This bookmarklet is a quick way to add up the selected values.

Adding up selected backlog point values.

The values are put into a simple alert() and non-number values are skipped in the calculation.

The code:

javascript: (function () {
	const selectedRowSelector = ".lfgNgI";
	const storyPointCircleSelector = "div[class^='ReadViewContentWrapper']";
	const fullSelctor = `${selectedRowSelector} ${storyPointCircleSelector}`;

	const storyPointArray = Array.from(document.querySelectorAll(fullSelctor))
		.map(x => Number(x.innerText));

	const totalStoryPoints = storyPointArray.reduce((previousValue, currentValue) => {
		if (!isNaN(currentValue)) {
			return previousValue + currentValue;
		}
		return previousValue;
	});

	alert(totalStoryPoints);
})();

To Conclude

I hope you found some of these useful in your day to day Jira-ing. To see more (or updated!) head to my bookmarklets repo in GitHub:

GitHub - nikouu/Bookmarklets: Little bookmarklets to fill in the smallest of gaps 🀏
Little bookmarklets to fill in the smallest of gaps 🀏 - GitHub - nikouu/Bookmarklets: Little bookmarklets to fill in the smallest of gaps 🀏