I Created a Chrome extension to remove the Jira cancel button

The idea

I am working in the UK as an apprentice software developer. Like many software development teams, we use Jira to manage and hand out work to the team.

Have you ever been in a situation where you have been writing out a ticket or adding some PR notes, and after all that work, you click the cancel button?

No?

Well, I had this problem one too many times, so as a proper software developer would, I decided to solve this with code...

Requirements

I first thought about the requirements for the project. I wrote down a list of functionality the extension would require. And they are:

1) Remove the Jira cancel button

Development

After the hard work was complete, I started looking at how a google chrome extension is built. The first place I looked for this information was google documentation.

Manifest

I then found some sample code which I pasted into a manifest.json file. The manifest JSON file holds all of the chrome extensions settings. It tells Chrome where to find the JavaScript files, the icon images and what pages the extension should run on.

{
  "manifest_version": 3,
  "name": "JIRA Remove Cancel Button",
  "version": "1.0",
  "description": "Removes the cancel button from JIRA tickets.",
  "icons": {
    "16": "/images/icon16.png",
    "32": "/images/icon32.png",
    "48": "/images/icon48.png",
    "128": "/images/icon128.png"
  },
  "content_scripts": [
    {
      "matches": ["https://*.atlassian.net/*"],
      "js": ["content.js"],
      "run_at": "document_end"
    }
  ]
}

JavaScript

I then wrote some JavaScript code, which runs every time a user clicks on the page. It then checks if a with the text 'cancel' exists on the page, and if it does, it is removed from the DOM.

const removeCancelButton = () => {
  let allSpans = document.getElementsByTagName("span");

  for (let i = 0; i < allSpans.length; i++) {
    let span = allSpans[i];
    if (span.innerText === "Cancel") {
      span.parentElement.remove();
    }
  }
};

document.addEventListener("click", (e) => {
  setTimeout(function () {
    removeCancelButton();
  }, 2200);
});

Icon design

I then set about creating some icons for my extension; the documentation clearly explains that I need multiple sizes (16, 32, 48, 128) pixels for google chrome to build my application.

I went into Figma and created a simple Jira icon. I then resized the hero to have one of the required sizes.

Deployment

Once I had all the required files, I packaged them into a .zip file and headed over to the Chrome Web Store Developer Dashboard.

On the 'Items' page, I clicked on 'Add Item'. I then clicked on 'Browse Files' and uploaded my .zip file containing my extension.

After filling out all the information about my extension, I clicked on 'Submit for review' and waited patiently for Google's approval.

And it's live!

Creating and sharing a Chrome Extension with the world is really simple. And mine can be found here.

If you liked this project, please check out my others at elliotlafave.com