Logo

dev-resources.site

for different kinds of informations.

How to take a screenshot of Jira kanban

Published at
10/13/2020
Categories
jira
screenshot
clome
Author
callas1900
Categories
3 categories in total
jira
open
screenshot
open
clome
open
Author
10 person written this
callas1900
open
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!

screenshot Article's
30 articles in total
Favicon
From 80 to 8000/m: A Journey of SEO Optimization (Part 1)
Favicon
CodeSnap : prendre des captures d'Γ©cran de code dans VS Code
Favicon
rails system test, save failed screenshots
Favicon
πŸš€ πŸ“Έ Creating Accessible and Stunning code screenshots
Favicon
AVIF Studio - Web page screen capture Chrome extension Made with Svelte and WebAssembly.
Favicon
Edge: Screenshots einer Seite erstellen ohne Addons
Favicon
Web Scraping Using Image Processing
Favicon
Edge: Create screenshots of a page without addons
Favicon
How to Perform Screenshot Comparison in Playwright
Favicon
How to take screenshots effectively on windows 11
Favicon
How to screenshot webpages in Golang
Favicon
Screenshot all your pages
Favicon
CodeSnap: Take Code Screenshots In VS Code
Favicon
Rendering NativeScript Angular Templates and Components into images
Favicon
How to run a code in editor in Atom IDE
Favicon
Take a Full-Page Screenshot in Browser (without extension or add-on)
Favicon
Tomar capturas de pantalla facilmente en i3wm
Favicon
Building A Serverless Screenshot Service with Lambda
Favicon
Android - How to do Screenshot Testing in Jetpack Compose
Favicon
How to capture a screenshot of the single window you want (using command line).
Favicon
How to Scan QR Code from Desktop Screen in Python
Favicon
react-native detect when user takes a screenshot
Favicon
Set Flameshot as default screenshot app on Ubuntu :)
Favicon
How to capture Screenshot within the browser
Favicon
Capture Website Screenshots with Python
Favicon
Reducing a Screenshot Size in Mac
Favicon
Employee Monitoring Tool to improve employee productivity
Favicon
Configuring screenshots in Mac
Favicon
How to take a screenshot of Jira kanban
Favicon
How To Capture Screenshots In Selenium? Guide With Examples

Featured ones: