DEV Community

r_tanaka
r_tanaka

Posted on • Edited on

How to take a screenshot of Jira kanban

Our team is using Jira for the scrum process. We want to get a screenshot of Jira's kanban board daily. There are nice chrome extensions for taking a screenshot of the full page of a website, such as this.
However, Jira's kanban screen disables body scrolling. Moreover, there is a scroll bar on the element of the kanban board. Those avoid full-screen snapshot of the webpage.

Jira kanban

Craft own chrome extension

I succeed to adjust the Jira kanban page by editing CSS via chrome developer mode, removing the unused scroll bar and reshow page's scroll bar. But it's painful to adjust it daily before taking a screenshot. How to make it easier? I found a solution from this article, https://qiita.com/dhomma/items/bb49c9f6b66ee936ff5c. The article is about how to craft a chrome extension for the purpose of editing CSS of a specific site. This is it!

Make directory and files

$ mkdir your_directory
$ cd your_directory
$ touch manifest.json
$ touch style.css
Enter fullscreen mode Exit fullscreen mode

Finally your files same as below.

your_directory
├── manifest.json
└── style.css
Enter fullscreen mode Exit fullscreen mode

Edit manifest.json

manifest.json

{
  "name": "www.example.com css",
  "version": "1.0",
  "description": "CSS for www.example.com",
  "content_scripts": [
    {
      "matches": ["http://www.example.com/*"],
      "css": ["style.css"]
    }
  ],
  "manifest_version": 2
}
Enter fullscreen mode Exit fullscreen mode

Please modify www.example.com to your jira's one.

Edit style.css

style.css

body#jira {
    overflow: scroll!important;
    overflow-x: scroll!important;
    overflow-y: scroll!important;
}

#ghx-detail-contents, #ghx-pool {
    height: fit-content!important;
}
Enter fullscreen mode Exit fullscreen mode

Install your extension

  1. Open the chrome extension management screen.
  2. Enable Developer mode.
  3. Click Load unpacked.
  4. Select your_directory.

Finished

You have to refresh your Jira kanban page. Enjoy!

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more