Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

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 asthis.
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 modeExit fullscreen mode

Finally your files same as below.

your_directory├── manifest.json└── style.css
Enter fullscreen modeExit 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 modeExit fullscreen mode

Please modifywww.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 modeExit fullscreen mode

Install your extension

  1. Open the chrome extension management screen.
  2. EnableDeveloper mode.
  3. ClickLoad unpacked.
  4. Selectyour_directory.

Finished

You have to refresh your Jira kanban page. Enjoy!

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

  • Location
    Tokyo/Japan
  • Joined

Trending onDEV CommunityHot

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp