The Services Team at Wix uses JIRA as our Scrum board, which is displayed on a big TV in our team’s room. We love JIRA because it’s robust and versatile, but we couldn’t find a simple feature that we needed: displaying the sum of the points of each column, as well as the total points on the board. Having that feature would make the Scrum much easier.
Before JIRA I worked with Trello, which had that exact feature, called Scrum for Trello. I decided to develop one for JIRA, and after a few hours’ work it was done.
In this post, I want to share with you how easy it is to build a Chrome extension. I’ll cover the basic steps you need to get started, as well as guide you through my code for creating this specific extension for JIRA. (If you need the JIRA extension I developed, install it here.)
Step 1: Installing Yeoman Generator for Chrome Extensions
Yeoman is a “scaffolding tool for modern web apps”, meaning that it provides various frameworks and helpers for all kinds of web projects. They have one for Chrome extensions as well.
First, make sure that you have Node.js and npm installed.
Install Yeoman using the following command: $ npm install -g yo
And then install the Chrome Extension generator:
$ npm install -g generator-chrome-extension
Use Yeoman to create a boilerplate for the extension:
$ yo chrome-extension
Now you have templates for all the files you need for the extension.
Step 2: Loading Your Extension to Chrome
These are the steps you need to follow:
Type chrome://extensions in the address bar.
Select the “Developer mode” checkbox.
Click the “Load unpacked extension…” button.
Choose your extension’s directory.
Now you’re ready to start coding.
Step 3: Coding
To get started, download our JIRA extension code from GitHub for reference.
First, configure the manifest.json file (located in the app folder). The two relevant nodes are in “content_scripts”:
“matches”: Specifies the pattern of URLs this extension will run on. We wanted to run our extension on JIRA only, so we chose [“*://*.jira/*”].
“js”: Indicates which files the extension will be using. In our case, it’s ["scripts/jquery.js","scripts/jira-scrum.js"].
Now for the code itself, take a look at scripts/jira-scrum.js.
Our starting point is the document.ready event, in which we call setInterval to run our main function, calc() every 3 seconds.
In calc() we scan the DOM to find all the relevant columns and get the sum of their points, which we update in createTotalDisplay().
Here is the code for calc with comments:
Step 4: Debugging
Debugging is easy: just open Chrome DevTools, press Ctrl+O, look for the file (in our case jira-scrum.js), and now debug it as you would for any web app.
When developing Chrome extensions, it’s important to know that both the Chrome code and the page code share the same DOM, but they are run in different sandboxes.
Step 5: Publishing
For just $5 you can open a Google Developer Account and publish your extension for the world to enjoy!