Chrome Extension Jira Ticket Creator: Automate Issue Tracking

Creating Jira tickets often requires switching contexts, navigating through multiple menus, and manually filling in repetitive fields. A Chrome extension that creates Jira tickets directly from your browser eliminates this friction, letting you capture issues while you work. This guide walks through building a functional Jira ticket creator extension, from API authentication to form handling and deployment.

Understanding the Architecture

A Chrome extension for Jira ticket creation consists of three main components: a popup interface for entering ticket details, a background script handling Jira API communication, and the manifest configuration tying everything together. The extension communicates with Jira Cloud via REST API, requiring OAuth 2.0 or API token authentication depending on your Jira setup.

The typical workflow involves the user clicking the extension icon, filling in a short form with summary, description, and issue type, then submitting to create the ticket in your configured Jira project. The extension then returns the newly created ticket key and a direct link to open it.

Setting Up Jira API Access

Before building the extension, you need API credentials. For Jira Cloud, generate an API token from your Atlassian account settings. Store your Jira domain, email, and token securely—you will need these for the extension configuration.

For Jira Server or Data Center, you may use basic authentication with your username and password instead. The API base URL follows this pattern:

https://your-domain.atlassian.net/rest/api/3/issue

Verify your credentials work by making a test request:

curl -u your-email@domain.com:YOUR_API_TOKEN \
  -X GET "https://your-domain.atlassian.net/rest/api/3/myself" \
  -H "Content-Type: application/json"

A successful response confirms your authentication is working.

Creating the Extension Structure

Create a new directory for your extension and add the following files:

jira-ticket-creator/
├── manifest.json
├── popup.html
├── popup.js
├── background.js
└── styles.css

The manifest.json defines the extension capabilities:

{
  "manifest_version": 3,
  "name": "Jira Ticket Creator",
  "version": "1.0",
  "description": "Create Jira tickets directly from your browser",
  "permissions": ["activeTab", "storage"],
  "host_permissions": ["https://*.atlassian.net/*"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "background": {
    "service_worker": "background.js"
  }
}

The host_permissions field grants the extension access to Jira domains, which is required for making API calls.

The popup provides the user interface for entering ticket details. Keep it focused on the essential fields most teams need:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <form id="ticket-form">
    <h2>Create Jira Ticket</h2>
    
    <label for="project-key">Project Key</label>
    <input type="text" id="project-key" placeholder="e.g., PROJ" required>
    
    <label for="summary">Summary</label>
    <input type="text" id="summary" placeholder="Brief description" required>
    
    <label for="description">Description</label>
    <textarea id="description" rows="4" placeholder="Detailed information..."></textarea>
    
    <label for="issue-type">Issue Type</label>
    <select id="issue-type">
      <option value="Bug">Bug</option>
      <option value="Task">Task</option>
      <option value="Story">Story</option>
      <option value="Epic">Epic</option>
    </select>
    
    <button type="submit" id="create-btn">Create Ticket</button>
    <div id="status"></div>
  </form>
  <script src="popup.js"></script>
</body>
</html>

The form captures the minimum information needed to create a useful ticket. You can extend this with custom fields, priority selection, and component assignment as needed.

Handling Form Submission and API Calls

The popup.js script handles form submission and communicates with the background script:

document.getElementById('ticket-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  
  const status = document.getElementById('status');
  const submitBtn = document.getElementById('create-btn');
  
  submitBtn.disabled = true;
  status.textContent = 'Creating ticket...';
  
  const ticketData = {
    project: { key: document.getElementById('project-key').value },
    summary: document.getElementById('summary').value,
    description: {
      type: 'doc',
      version: 1,
      content: [{
        type: 'paragraph',
        content: [{
          type: 'text',
          text: document.getElementById('description').value
        }]
      }]
    },
    issuetype: { name: document.getElementById('issue-type').value }
  };
  
  try {
    const response = await chrome.runtime.sendMessage({
      action: 'createJiraTicket',
      data: ticketData
    });
    
    if (response.success) {
      status.innerHTML = `Created: <a href="${response.url}" target="_blank">${response.key}</a>`;
    } else {
      status.textContent = 'Error: ' + response.error;
    }
  } catch (err) {
    status.textContent = 'Failed to create ticket';
  }
  
  submitBtn.disabled = false;
});

Managing Authentication in the Background

The background script holds your API credentials and makes the actual Jira API calls. For security, store credentials in Chrome’s storage API rather than hardcoding them:

// background.js
const JIRA_CONFIG = {
  domain: 'your-domain.atlassian.net',
  email: 'your-email@domain.com',
  apiToken: 'your-api-token'
};

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'createJiraTicket') {
    createTicket(message.data).then(sendResponse);
    return true;
  }
});

async function createTicket(ticketData) {
  const url = `https://${JIRA_CONFIG.domain}/rest/api/3/issue`;
  
  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'Authorization': `Basic ${btoa(JIRA_CONFIG.email + ':' + JIRA_CONFIG.apiToken)}`,
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    },
    body: JSON.stringify(ticketData)
  });
  
  if (!response.ok) {
    const error = await response.text();
    return { success: false, error };
  }
  
  const result = await response.json();
  return {
    success: true,
    key: result.key,
    url: `${JIRA_CONFIG.domain}/browse/${result.key}`
  };
}

For production use, consider adding a settings page where users configure their own Jira credentials rather than hardcoding yours.

Testing and Deployment

Load your extension in Chrome by navigating to chrome://extensions/, enabling Developer mode, and clicking “Load unpacked”. Select your extension directory and test the workflow:

Enter a valid project key from your Jira instance
Fill in summary and description
Select an issue type
Click Create Ticket

The extension should create the ticket and display a link to the newly created issue. Check your Jira project to confirm the ticket appears with correct details.

To distribute the extension, package it through the Chrome Web Store Developer Dashboard. Prepare a clear description, screenshots, and ensure you comply with Chrome’s policies around extension data handling.

Extending the Extension

Once the basic version works, consider adding features like quick templates for common ticket formats, keyboard shortcuts for faster creation, context-menu integration to create tickets from selected text, and project switching without re-entering the project key. You can also integrate with Claude or other AI tools to auto-generate descriptions from screenshots or error messages.

A well-built Jira ticket creator extension reduces context switching and standardizes how your team captures issues. The foundation established here scales with your workflow needs.

Built by theluckystrike — More at zovo.one