🌤️ Custom Chrome New Tab Extension

A minimalist new tab page inspired by Google’s Momentum style, featuring:

• ✅ a live digital clock,
• ✅ time-based greeting,
• ✅ weather information,
• ✅ and a native-looking Google search bar.

Designed and built by Halenur Gurel as a personal Chrome extension project.

---

✨ Features

🕒 Live Clock — updates every second.

🌞 Dynamic Greeting — changes based on the time of day:

• Morning (07:00–12:00)

• Afternoon (12:00–18:00)

• Evening (18:00–21:00)

• Night (21:00–07:00)

☁️ Weather Widget — detects your location and displays current temperature and city name.

🔍 Google Search Bar — looks and feels identical to Google’s official new tab search box.

🖼️ Custom Background — personalized full-screen image (editable in styles.css).

---

🖼️ Preview

Full View

---

🧩 File Structure

custom-momentum-tab/
│── manifest.json
│── index.html
│── styles.css
│── script.js
│── images/
│    ├── background.jpg
|    ├── new-tab.png
│    └── preview.png

---

⚙️ Installation Guide

Step 1 — Clone or Download

git clone https://github.com/halenur.gurel/custom-momentum-tab.git

Step 2 — Load into Chrome

1- Open chrome://extensions/

2- Toggle Developer mode (top-right)

3- Click Load unpacked

4- Select the project folder (custom-momentum-tab/)

5- Open a new tab → your custom page appears 🎉

---

☁️ Weather Setup

This project uses OpenWeatherMap to display weather data.

1- Sign up for a free account at https://openweathermap.org/api

2- Copy your API key.

3- Open script.js and paste your key:

const apiKey = "YOUR_API_KEY";

4- (Optional) Change your fallback city in case geolocation fails:

const FALLBACK_CITY = "Istanbul";

---

🖌️ Customization

Element	File	Description
Background image	styles.css	Replace images/background.jpg
Greeting name	script.js	Edit "Hale" inside setGreeting()
Font & layout	styles.css	Adjust font-size, color, and shadows
Search bar placeholder	index.html	Change text inside the input field

---

🧠 Tech Stack

• HTML5 — semantic structure

• CSS3 — responsive design, shadows, and typography

• JavaScript (ES6) — live clock, greeting, and weather logic

• OpenWeatherMap API — weather data

• Chrome Extensions API (Manifest V3) — new tab override

---

🚀 Future Enhancements

🖼️ Random daily Unsplash background

🌗 Auto dark/light theme toggle

📅 Date display below the clock

🌤️ Alternative weather API integration

---

📜 License

This project is open source and available under the MIT License.