こんにちは、minako-ph です🦆

✏️ 概要

普段Webアプリケーションを使っていて「これがあったら便利だなー」を自分専用の拡張機能に実装することが多いのですが、そんな自作Chrome拡張機能をミニマムな形でさくっと作る方法を紹介します。

今回はTrelloのレイアウトをカレンダー化して今日の日付があればハイライトする拡張機能を作成します！

📁 準備をする

今回の自作拡張機能に必要なファイルはとてもシンプルです🍃
任意の場所にフォルダを作成して以下のファイルを用意しましょう。

manifest.json
- 拡張機能の説明や使用するファイルを設定します。自作拡張機能にMUSTなファイルです
style.css
- カレンダーなレイアウトにカスタマイズする為のスタイル
script.js
- 今日の日付を取得してリストから探し出すスクリプト

🛠 実装してみる

manifest.json

{
  "name": "Chrome extension sample",
  "author": "minako-ph",
  "description": "Chrome extension sample",
  "version": "1.0.0",
  "manifest_version": 3,
  "content_scripts": [
    {
      "matches": ["https://trello.com/b/*/calendar-*"],
      "css": ["style.css"],
      "js": ["script.js"]
    }
  ]
}

manifest.jsonは拡張機能の説明や使用するファイルなどを指定している、自作拡張機能にMUSTな設定ファイルです。

content_scripts:でブラウザ上で実行させたいファイルを指定するのですが、今回はcalendar-から始まるボードのみをカレンダーにしたいのでmatches:でURLにcalendar-が含まれる場合のみ指定したファイルが実行されるように指定しています。

検索して調べて出てくる記事や現在ストアで公開されている拡張機能のmanifest_versionはまだ2が多いですが、2022年より非推奨になった為3を指定しましょう。（参考）

manifest.jsonには他にも非常にたくさんの設定があります🔍
参考：https://qiita.com/shiro1212/items/12f0a767494a7b2ab0b3

style.css

/* 全体のレイアウト */
#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;
}

.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 {
    background-color: hsla(0,0%,100%,.4)!important;
    height: 400px!important;
    border: 1px solid white !important;
    border-radius: 30px 0 30px 0 !important;
}

/* 今日の日付 */
.list.is-today {
    /* 赤背景 */
    background-color: rgba(255, 209, 209, 0.3) !important;

    /* ボーダー */
    border-color: #ee8080 !important;
    border-width: 3px!important;
}

style.cssではリストをカレンダーレイアウトにカスタマイズしています。

既存のTrelloのレイアウトをカスタマイズする為に !important が多発しています、普段はこんな使い方しませんのでお許しください（笑）

指定しているidやclassは全てTrelloのものですが、一番最後に指定している.is-todayは後述のscript.jsで付与してあげているクラスです。

script.js

window.onload = function () {

    // 今日の日付
    const dt = new Date();
    const { month, date } = {
        month: ("0" + (dt.getMonth() + 1)).slice(-2),
        date: ("0" + dt.getDate()).slice(-2)
    };

    // ヘッダーの取得
    const 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(month + '/' + date)) {
            header_of_header[i].closest('.list').classList.add('is-today');
        }
    }
}

script.jsでは各リストの日付を取得して今日と一致するリストに.is-todayを付与する処理を記述しています。

こんな感じでDOM操作が出来るので結構自由度高くブラウザ上のアプリケーションをカスタマイズすることができます。

📢 実際に動かしてみる

それでは実際にブラウザで拡張機能を動かしてみます。あとほんの一瞬で完了です！

拡張機能の管理画面に移動します
chrome://extensions/
自作拡張機能をアップロード出来る様にする為ディベロッパーをONにします
前ステップで作成したファイルを含むフォルダを丸々ドラッグ&ドロップします
自作拡張機能が反映されていることが確認できれば完了です🎉

あとはcalendar-から始まるボードにアクセスしてスーパーリロードしてみましょう。
自作拡張機能が動作していることを確認できるはずです！

ステップ4の画像にも記載しましたが、ファイルに変更を加えた際は再度アップロードしなくても管理画面に用意されたリロードボタンを押すだけで変更が反映されます（便利🥺）

🍃 あとがき

今回作成したサンプルリポジトリは以下になります
https://github.com/minako-ph/simple-chrome-extension-sample

またもう少しだけ機能を追加した上で実際にストアへ公開もしています！
https://chrome.google.com/webstore/detail/calendar-layout-for-trell/odmddgcdemhigfbfahdfemnfeconcfej?hl=ja&authuser=0

Notionのカードに色を付けたり強調する装飾をしたりよく使うアクションをボタンにしてブラウザ上に実装したり（こんな感じ）と、「これがあったら便利だなー」をさくっと実装して動かせるので自作拡張機能は私生活でも重宝しています。みなさんも是非試してみてください🌸

今回の記事に関連して、

Trelloボード上にカレンダーリストを自動生成
TypescriptでChrome拡張機能開発

も今月中に記事にして公開予定なのでよければ引き続きチェックしてください🚀

Trelloをカレンダーレイアウトにしてしまおう【さくっと自作Chrome拡張機能】