BLOG【自作Chrome拡張機能】Trelloをカレンダー化する拡張機能を作ってみた

{
  "name": "Calendar layout for trello",
  "author": "minako",
  "description": "Trelloのレイアウトをカレンダーにします",
  "version": "1.0.0",
  "manifest_version": 2,
  "web_accessible_resources": ["*"],
  "content_scripts": [
    {
      "matches": ["https://trello.com/b/*/calendar-*"],
      "css": ["style.css"],
      "js" : ["script.js"]
    }
  ]
}

/* 全体のレイアウト */
#board
{
    display: block!important;
    text-align: left!important;
    position: relative!important;
    white-space: initial!important;
    padding-bottom: 24px!important;
    min-width: 1414px !important;
}

.board-canvas
{
    height: auto!important;
}

.body-board-view
{
    overflow-y: visible!important;
}

.js-list,
.js-add-list
{
    display: inline-block!important;
    vertical-align: top!important;
    margin: 0 0 10px 10px!important;
}

.list {
    background-color: hsla(0,0%,100%,.4)!important;
    height: 300px!important;
    border: 1px solid white!important;
    border-radius: 30px 0 30px 0!important;
}

.u-gutter
{
    margin-left: 0!important;
}

/* 文字の色 */
textarea.list-header-name {
    color: #fff!important;
}

textarea.list-header-name.is-editing {
    color: #172b4d!important;
}

.body-light-board-background textarea.list-header-name {
    color: #172b4d!important;
}

/* 今日の日付 */
.list.is-today {
    /* 赤背景 */
    background-color: rgb(244, 115, 115, 0.3)!important;
}

window.onload = function () {

    // 今日の日付
    let date = new Date();
    let this_month = ("0"+(date.getMonth() + 1)).slice(-2);
    let today = ("0"+date.getDate()).slice(-2);

    // ヘッダーの取得
    let header_of_header = document.getElementsByClassName('list-header-name');

    for(let i = 0; i < header_of_header.length; i++) {
        if(header_of_header[i].innerHTML.match(this_month + '/' + today)) {
            header_of_header[i].closest('.list').classList.add('is-today');
        }
    }
}