今年の残り日数を表示してくれるchorme拡張機能を実装 #Chrome拡張

初めに

この記事は commmune Advent Calendar 2023 の6日目として投稿されました。

背景

例年11月に差し掛かるあたりから「今年後何日あるんだっけ?」と考えることがあるため、1目でわかるようchorme拡張機能として実装いたしました。(拡張機能ウェブストアにはアップロードしていません、あくまで個人用になります。

実装

Chrome拡張機能の作り方については以下2点の記事を参考にさせていただきました

フォルダ構成は以下のとおりです

manifest.json

{
    "manifest_version": 3,
    "name": "Countdown Pro - Kotoshi mo Hayakattana -",
    "version": "1.0",
    "description": "今年の残りの日数を表示してくれるChrome拡張機能",
    "permissions": [
      "activeTab"
    ],
    "action": {
      "default_icon": "icon.png",
      "default_popup": "popup.html"
    },
    "icons": {
      "16": "icon.png", 
      "48": "icon.png",
      "128": "icon.png" 
    }
  }

popup.html / popup.css

popup.html

<!-- popup.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>今年の残り日数</title>
  <link rel="stylesheet" href="popup.css">
  <script src="popup.js" defer></script>
</head>
<body>
  <div id="remaining-days-container" class="popup-container"></div>
</body>
</html>

popup.css

/* popup.css */
body {
    margin: 0;
  }
  
  .popup-container {
    width: 180px; /* popupの全体の幅 */
    height: 150px; /* popupの全体の高さ */
    background-color: #0068b7; /* 背景色 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  
  .popup-content {
    text-align: center;
    padding: 20px;
  }
  
  .remaining-days-text {
    color: #ffffff; /* 文字色(上段) */
    font-size: 18px; /* 文字サイズ(上段) */
    font-weight: bold;
  }
  
  .remaining-days-number {
    color: #ffffff; /* 文字色(日数) */
    font-size: 48px; /* 文字サイズ(日数) */
    font-weight: bold;
  }

popup.js

document.addEventListener('DOMContentLoaded', function() {
    var remainingDaysContainer = document.getElementById('remaining-days-container');
  
    // 今年の年末の日付を取得
    var thisYear = new Date().getFullYear();
    var endOfYear = new Date(thisYear, 11, 31);
    
    // 今日の日付を取得
    var today = new Date();
    
    // 今年の残り日数を計算
    // 当日も換算するので最後に+1(換算しない場合は削除する)
    var remainingDays = Math.ceil((endOfYear - today) / (1000 * 60 * 60 * 24)) + 1;
    
    // メッセージを表示
    var message = `
      <div class="popup-content">
        <div class="remaining-days-text">今年の残り日数</div>
        <div class="remaining-days-number">${remainingDays}日</div>
      </div>
    `;
    remainingDaysContainer.innerHTML = message;
  });

実践

先ずはChrome拡張機能の設定画面を開きます。使用しているChromeのversionによって異なりますが大体[設定]→[拡張機能]から設定画面を開くことができます。

あとはデベロッパーモードにチェックを入れ、[パッケージ化されていない拡張機能を読み込む]から作成したフォルダを読み込ませます。今回で言うと"Kotoshi_Ato_Nannichi"が読み込み対象です

読み込ませた拡張機能をクリックすすと無事に今年の残り日数を表示することができました。これで毎年焦って検索しなくていいので便利ですね。

感想

Chrome拡張機能の実装に初めてチャレンジしてみましたがChatGPTの助けもあり割と短時間で作成できました。次は「毎日ブラウザを開いた時にそれっぽい偉人の格言を教えてくれる拡張機能」を作ってみます(笑)

ありがとうございます。

補足(ChatGPTとの会話)

ある程度外形ができたぐらいの時「今年の〜」と「xx日」の文字サイズをそれぞれ変更したいと考えました。この時、地道に作っても良かったのですがChatGPTに聞いた方が早そうだったのでCSSファイルとJSファイルを修正してもらいました。このようなちょっとした変更だと的確に返してくれるのですごく便利だなと痛感しました。