coding-youtuber/index.html

## index.html
<!DOCTYPE html>
<html lang="jp">
<style>
  * {
    margin: 0;
    padding: 0;
  }

  body {
    background: #000;
  }

  .viewer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    width: 100vw;
    height: 100vh;

    color: #fff;
  }

  .countdown {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    align-items: center;
  }

  .dateWrapper {
    display: flex;
    font-size: 24px;
    font-weight: bold;
  }

  .dateWrapper p {
    margin-right: 4px;
  }
</style>

<head>
  <meta charset="UTF-8">
  <title>齋藤飛鳥さんの誕生日カウントダウン</title>
</head>

<body>
  <div class="viewer">
    <img src="saitou.jpeg" alt="">

    <div class="countdown">
      <h1>誕生日 8月10日</h1>

      <div class="dateWrapper">
        <p>
          <span id="days">-</span>日
        </p>
        <p>
          <span id="hours">-</span>時間
        </p>
        <p>
          <span id="minutes">-</span>分
        </p>
        <p>
          <span id="seconds">-</span>秒
        </p>
      </div>
    </div>
  </div>

  <script src="main.js"></script>

</body>

</html>

## main.js
// const now = new Date().getTime()

const birthday = {
  month: 8,
  day: 10
}

const birthdayYear = () => {
  const currentMonth = new Date().getMonth() + 1
  const currentYear = new Date().getFullYear()
  return currentMonth > birthday.month ? currentYear + 1 : currentYear
}


const birthdayDate = new Date(birthdayYear(), birthday.month - 1, birthday.day)

// console.log(birthdayDate);
function calc() {
  const now = new Date().getTime()
  const distance = birthdayDate - now
  // console.log(distance);

  const days = Math.floor(distance / (1000 * 60 * 60 * 24))
  const hours = Math.floor(distance % (1000 * 60 * 60 * 24) / (1000 * 60 * 60))
  const minutes = Math.floor(distance % (1000 * 60 * 60) / (1000 * 60))
  const seconds = Math.floor(distance % (1000 * 60) / 1000)

  // console.log(`days: ${days} hours: ${hours} minutes: ${minutes} seconds: ${seconds}`);

  document.getElementById('days').innerHTML = `00${days}`.slice(-3)
  document.getElementById('hours').innerHTML = `0${hours}`.slice(-2)
  document.getElementById('minutes').innerHTML = `0${minutes}`.slice(-2)
  document.getElementById('seconds').innerHTML = `0${seconds}`.slice(-2)
}

calc()
setInterval(calc, 1000)

## manifest.json
{
  "name": "齋藤飛鳥さんの誕生日カウントダウン",
  "description": "カウントダウン拡張",
  "version": "1.0",
  "chrome_url_overrides": {
    "newtab": "index.html"
  },
  "manifest_version": 3
}
	<!DOCTYPE html>
	<html lang="jp">
	<style>
	* {
	margin: 0;
	padding: 0;
	}

	body {
	background: #000;
	}

	.viewer {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

	width: 100vw;
	height: 100vh;

	color: #fff;
	}

	.countdown {
	display: flex;
	flex-direction: column;
	margin-top: 10px;
	align-items: center;
	}

	.dateWrapper {
	display: flex;
	font-size: 24px;
	font-weight: bold;
	}

	.dateWrapper p {
	margin-right: 4px;
	}
	</style>

	<head>
	<meta charset="UTF-8">
	<title>齋藤飛鳥さんの誕生日カウントダウン</title>
	</head>

	<body>
	<div class="viewer">
	<img src="saitou.jpeg" alt="">

	<div class="countdown">
	<h1>誕生日 8月10日</h1>

	<div class="dateWrapper">
	<p>
	<span id="days">-</span>日
	</p>
	<p>
	<span id="hours">-</span>時間
	</p>
	<p>
	<span id="minutes">-</span>分
	</p>
	<p>
	<span id="seconds">-</span>秒
	</p>
	</div>
	</div>
	</div>

	<script src="main.js"></script>

	</body>

	</html>
	// const now = new Date().getTime()

	const birthday = {
	month: 8,
	day: 10
	}

	const birthdayYear = () => {
	const currentMonth = new Date().getMonth() + 1
	const currentYear = new Date().getFullYear()
	return currentMonth > birthday.month ? currentYear + 1 : currentYear
	}


	const birthdayDate = new Date(birthdayYear(), birthday.month - 1, birthday.day)

	// console.log(birthdayDate);
	function calc() {
	const now = new Date().getTime()
	const distance = birthdayDate - now
	// console.log(distance);

	const days = Math.floor(distance / (1000 * 60 * 60 * 24))
	const hours = Math.floor(distance % (1000 * 60 * 60 * 24) / (1000 * 60 * 60))
	const minutes = Math.floor(distance % (1000 * 60 * 60) / (1000 * 60))
	const seconds = Math.floor(distance % (1000 * 60) / 1000)

	// console.log(`days: ${days} hours: ${hours} minutes: ${minutes} seconds: ${seconds}`);

	document.getElementById('days').innerHTML = `00${days}`.slice(-3)
	document.getElementById('hours').innerHTML = `0${hours}`.slice(-2)
	document.getElementById('minutes').innerHTML = `0${minutes}`.slice(-2)
	document.getElementById('seconds').innerHTML = `0${seconds}`.slice(-2)
	}

	calc()
	setInterval(calc, 1000)
	{
	"name": "齋藤飛鳥さんの誕生日カウントダウン",
	"description": "カウントダウン拡張",
	"version": "1.0",
	"chrome_url_overrides": {
	"newtab": "index.html"
	},
	"manifest_version": 3
	}