base on A Simple New Tab ( browsers's home page ) inspired with Google's 'Material You' design <!-- Initialized : Sun 20 Aug 2023 03:41:08 PM IST -->
<h1 align="center">
<a href="https://xengshi.github.io/materialYouNewTab/"><img src="https://i.ibb.co/x11pGSs/icon-128.png" width="50"></a>
<br>
Material You NewTab
</h1>
<div align="center">
Material You NewTab is a versatile browser extension that personalizes your New Tab page with customizable themes, a welcoming message, and various handy tools, all while integrating seamlessly with your preferred search engine.
</div>
<div align="center">





</div>
<p align="center">
<a href="#-features">Features</a> •
<a href="#-installation-guide">Installation Guide</a> •
<a href="#download">Download</a> •
<a href="#-currently-supported-languages-23">Currently Supported Languages</a> •
<a href="#-usage">Usage</a>
<br>
<a href="#-contributing">Contributing</a> •
<a href="#-star-history">Star History</a> •
<a href="#-issues-and-support">Issues and Support</a> •
<a href="#-privacy-policy">Privacy Policy</a> •
<a href="#-license">License</a>
</p>
<img src="https://i.postimg.cc/CF43Yzj1/material-you-new-Tab-poster.webp" alt="Screenshot 1" width="100%">
#### 🔴 🟡 🟢 Test live: [https://xengshi.github.io/materialYouNewTab/](https://xengshi.github.io/materialYouNewTab/)
## ✨ Features
- **Customizable Themes**: Choose from a selection of themes to match your style.
- **Personalized Greeting**: Add a custom message or your name, so you're greeted each time you open a new tab.
- **Integrated Search**: Search directly from the New Tab using your preferred search engine — Google, DuckDuckGo, Bing, Brave Search or YouTube.
- **Browser Compatibility**: Supports major browsers like Chrome, Edge, Firefox, Brave, and Opera.
## 📥 Installation Guide
### Download
1. **Development Version** (v3.1.*)
- **Clone the Repository**:
Use the following command to clone the repository:
```bash
git clone https://github.com/XengShi/materialYouNewTab.git
```
- Alternatively, download the latest version as a ZIP file by clicking below:
[](https://github.com/XengShi/materialYouNewTab/archive/refs/heads/main.zip)
- You can also download the ZIP file by clicking on the Code button. On the repository page, look for a green button labeled **Code**. Click on the **Code** button, and in the dropdown menu, select **Download ZIP**.
2. **Stable Release** (v3.1)
<p align="center">
<a href="https://github.com/XengShi/materialYouNewTab/archive/refs/tags/v3.1.zip"><img src="https://img.shields.io/badge/GitHub-blue?style=for-the-badge&logo=github&logoColor=white&labelColor=grey&color=blue" alt="Download from GitHub" height="47" /></a>
<a href="https://chromewebstore.google.com/detail/material-you-newtab/glloabhodjfmeoccmdngmhkpmdlakfbn"><img src="https://github.com/user-attachments/assets/20a6e44b-fd46-4e6c-8ea6-aad436035753" alt="Download from Chrome Web Store" height="48" /></a>
<a href="https://addons.mozilla.org/en-US/firefox/addon/material-you-newtab/"><img src="https://github.com/user-attachments/assets/c0e99e6b-97cf-4af2-9737-099db7d3538b" alt="Download from Mozilla Add-ons" height="48" /></a>
<!-- <a href="https://microsoftedge.microsoft.com/addons/detail/glloabhodjfmeoccmdngmhkpmdlakfbn"><img height="48" src="https://github.com/user-attachments/assets/204157eb-4cae-4c0e-b2cb-db514419fd9e" alt="Download from the Edge Add-ons" /></a> -->
</p>
---
### Installation
####  Chromium-Based Browsers
1. **Install from Chrome Web Store**:
- [Chrome Web Store link](https://chromewebstore.google.com/detail/material-you-newtab/glloabhodjfmeoccmdngmhkpmdlakfbn)
**Or** follow the manual steps below:
2. **Manual Installation**:
- **Prepare the Extension Folder**:
- Ensure you’ve cloned the repository or downloaded the ZIP file and extracted it.
- **Open Extensions Page**:
Open your preferred browser and enter the following text in the address bar:
-  Chrome: `chrome://extensions`
-  Edge: `edge://extensions`
-  Brave: `brave://extensions`
-  Opera: `opera://extensions`
- **Enable Developer Mode**:
- Turn on **Developer Mode** in the extensions page.
- **Load Unpacked Extension**:
- Click on **Load unpacked** and select your extracted extension folder.
3. **Additional Steps ONLY for  Opera (or  Opera GX)**:
- Go to the **Settings** of Opera or Opera GX.
- Scroll to the **On startup** section.
- Click on **Open a specific page or set of pages** and then click on **Add a new page**.
- Add the following to the **Site URL**:
```text
chrome-extension://glloabhodjfmeoccmdngmhkpmdlakfbn/index.html
```
Below are screenshots of the process to guide you through each step visually.
<img src="https://i.postimg.cc/w6JYypvc/chrome.png" alt="Screenshot 1" width="569">
<img src="https://i.postimg.cc/0ksR7BKg/edge.png" alt="Screenshot 2" width="569">
<img src="https://i.postimg.cc/MqPSg5NR/brave.png" alt="Screenshot 3" width="569">
---
####  Firefox
1. **Install from Mozilla Extensions Store**:
- [Mozilla Add-ons link](https://addons.mozilla.org/en-US/firefox/addon/material-you-newtab/)
<img src="https://i.postimg.cc/bPW2fHX7/FireFox.png" alt="Screenshot" width="569">
2. **Update the Homepage**:
- Open Firefox and **obtain the UUID**:
- Hover over the New Tab button (next to the tab close button). A tooltip will display the extension's unique ID, which looks like this: `0f31e1c1-d63c-4660-b950-8bfbda3bb20a`. Copy or note this ID.
- Alternatively, type `about:debugging#/runtime/this-firefox` in the address bar and find the extension's UUID there.
- Open **Settings** and navigate to **Home**, or type `about:preferences#home` in the address bar.
- Under the **Homepage and new windows** section, select **Custom URLs...**.
- Paste the following URL, replacing the ID with your actual UUID:
```text
moz-extension://e31d6701-f699-414f-bb4c-8fde495c432e/index.html
```
- This will update both your homepage and new tab to the extension.
3. **Manual Installation (Temporary)**:
- Clone the repository or download and extract the ZIP file.
- **Prepare the Manifest**:
- Delete the existing `manifest.json` file.
- Rename `manifest(firefox).json` to `manifest.json`.
- **Load Temporary Add-on**:
- Go to `about:debugging#/runtime/this-firefox`, select **"This Firefox"**, then click **Load Temporary Add-on**.
- Browse and select the updated `manifest.json`.
---
<!-- ####  Safari -->
### Installation Video
For a step-by-step walkthrough, watch this [installation guide video](https://youtu.be/P4ryQPixfw8).
[](https://youtu.be/P4ryQPixfw8)
## 🌐 Currently Supported Languages (23)
| Language | Code | Translator(s) |
| -------------------------------------------------------------------------------------------- | :---: | ------------------------------------------------------------------------------------- |
| <img src='https://flagcdn.com/us.svg' width=20> **English** | en | [XengShi](https://github.com/XengShi/), [Prem](https://github.com/prem-k-r/) |
| <img src='https://flagcdn.com/az.svg' width=20> **Azerbaijani** - Azərbaycanca | az | [Hasan Bakhtiar](https://github.com/hasanbakhtiar/) |
| <img src='https://flagcdn.com/bd.svg' width=20> **Bangla** - বাংলা | bn | [It'z RJ](https://github.com/itz-rj-here/), [Prem](https://github.com/prem-k-r/) |
| <img src='https://flagcdn.com/cn.svg' width=20> **Chinese** (Simplified) - 简体中文 | zh-CN | [Guy Berryman](https://github.com/Guy-Berryman), [Tianli](https://github.com/TIANLI0) |
| <img src='https://flagcdn.com/tw.svg' width=20> **Chinese** (Traditional) - 繁體中文 | zh-TW | [C. Y. Tseng](https://github.com/Eddie40802) |
| <img src='https://flagcdn.com/cz.svg' width=20> **Czech** - Čeština | cz | [Michal Šmahel](https://github.com/ceskyDJ/) |
| <img src='https://flagcdn.com/fr.svg' width=20> **French** - Français | fr | [422.io](https://github.com/iamwinner422) |
| <img src='https://flagcdn.com/in.svg' width=20> **Hindi** - हिंदी | hi | [XengShi](https://github.com/XengShi/), [Prem](https://github.com/prem-k-r/) |
| <img src='https://flagcdn.com/hu.svg' width=20> **Hungarian** - Magyar | hu | [Zan1456](https://github.com/Zan1456/) |
| <img src='https://flagcdn.com/id.svg' width=20> **Indonesian** - Bahasa Indonesia | idn | [Ayyas-RF](https://github.com/Ayyas-RF/) |
| <img src='https://flagcdn.com/it.svg' width=20> **Italian** - Italiano | it | [Claudio Di Maio](https://github.com/ZiClaud/) |
| <img src='https://flagcdn.com/jp.svg' width=20> **Japanese** - 日本語 | ja | [XengShi](https://github.com/XengShi/), [S-H-Y-A](https://github.com/S-H-Y-A/) |
| <img src='https://flagcdn.com/kr.svg' width=20> **Korean** - 한국어 | ko | [XengShi](https://github.com/XengShi/) |
| <img src='https://flagcdn.com/in.svg' width=20> **Marathi** - मराठी | mr | [Prem](https://github.com/prem-k-r/), [Pratik Lokhande](https://github.com/konprtk) |
| <img src='https://flagcdn.com/np.svg' width=20> **Nepali** - नेपाली | np | [Bikash Shresha](https://github.com/sthaB-kash/) |
| <img src='https://flagcdn.com/br.svg' width=20> **Portuguese** - Português | pt-BR | [Maycon Vitor Correa](https://github.com/MestreWalla/) |
| <img src='https://flagcdn.com/ru.svg' width=20> **Russian** - Русский | ru | [giwi](https://github.com/giwih/) |
| <img src='https://flagcdn.com/si.svg' width=20> **Slovenian** - Slovenščina | sl-SI | [Linux-Alex](https://github.com/Linux-Alex/) |
| <img src='https://flagcdn.com/es.svg' width=20> **Spanish** - Español | es-ES | [XengShi](https://github.com/XengShi/) |
| <img src='https://flagcdn.com/tr.svg' width=20> **Turkish** - Türkçe | tr | [Nobody](https://github.com/Nobody9512), [Kerim Ölçer](https://github.com/kerimlcr) |
| <img src='https://flagcdn.com/pk.svg' width=20> **Urdu** - اردو | ur | [Asfandiyar Khan](https://github.com/asfand-dev) |
| <img src='https://flagcdn.com/uz.svg' width=20> **Uzbek** - O'zbek | uz | [Firdavs](https://github.com/Firdavs9512/) |
| <img src='https://flagcdn.com/vn.svg' width=20> **Vietnamese** - Tiếng Việt | vn | [Diep](https://github.com/diepdo1810/), [Tuan](https://github.com/Tuan1-2-3) |
Check the [Translation Status Page](https://xengshi.github.io/materialYouNewTab/tools/languagesAnalysis.html) for an overview of completed languages and missing strings analysis.
<details>
<summary><h2>📖 Usage</h2></summary>
1. **Welcome Greeting**:
- The extension greets you with a personalized message, like "Hello! It’z RJ," and displays the current date. This feature can be customized in the settings to show your name or preferred text, making your browsing experience feel more personal.
2. **Clock Widget**:
- Two clock options are available: a modern **analog clock** (default) and a **digital clock**.
- Users can switch between these clock types in the **menu settings**, providing flexibility to choose their preferred style for displaying the current time.
3. **Weather Information**:
- Displays real-time weather information for your location, including temperature, weather condition (like "Sunny"), humidity, and "Feels like" temperature.
- Users can set their location (like "Dhaka") to get accurate weather data. A visual icon represents the weather, and temperature is displayed in degrees Celsius by default. However, it can be switched to Fahrenheit in the menu settings.
4. **Search Bar**:
- The search bar allows you to enter queries directly from the new tab page. This makes it quick and easy to start searching without switching to a different page or window.
- Below the search bar, there are search engine options that allow you to choose your preferred search engine: Google, DuckDuckGo, Bing, Brave, or YouTube.
- A **voice typing feature** is integrated, enabling hands-free searches for added convenience.
5. **Shortcuts**:
- At the bottom, there are quick-access icons for popular platforms, including YouTube, Email, Telegram, WhatsApp, Twitter, and more.
- Clicking on any of these icons will redirect you to the respective platform, allowing for easy access to your frequently used services.
- Users can also **add their own shortcuts** to the menu settings for more personalized quick access.
6. **AI Tools Button**:
- On the bottom left, an "AI Tools" button is available, providing access to AI-powered tools directly from the New Tab page. Tools like ChatGPT, Gemini, Copilot, Perplexity, Deepseek, and Meta AI are integrated for quick, AI-driven assistance or tasks.
7. **Wallpaper Management**:
- Users can upload their own wallpapers via the **new wallpaper management section** in the menu settings.
- The **Random Image feature** provides users with a new wallpaper every day, updating automatically at the start of each day. Images are sourced from [Lorem Picsum](https://picsum.photos).
8. **Backup System**:
- The menu settings include a backup system that allows users to save and restore their customized settings.
- This feature is detailed with screenshots, showing how users can manage backups effectively.
9. **Bookmarks**:
- The extension allows users to manage their bookmarks directly.
- Users can delete any bookmarks they no longer need, ensuring a clean and organized space.
- A **view as selector** lets users toggle between a **grid** and **list layout**, allowing them to display their bookmarks as they prefer.
10. **To-Do List**:
- The extension features a **to-do list** to help users track and remember important tasks.
- Users can pin specific tasks using the **pin button**, ensuring those tasks stay at the top for easy access.
- At the start of each new day, all completed tasks are automatically deleted. However, pinned tasks are not deleted—their status simply resets to **pending**, allowing users to continue tracking them.
11. **Reset Settings**:
- If users want to completely reset all data and settings, they can use the **Reset Settings** button available in the menu section.
- This feature clears all customizations and restores the extension to its default state.
12. **Themes and Personalization**:
- Offers a dynamic theme system inspired by Material You, allowing users to customize colors, and backgrounds.
- Includes a **pick color button** in the theme selector menu, enabling users to choose their preferred color using **RGB**, **HSL**, or **hex color codes**.
- Personalization options are accessible in the settings, enabling users to tailor the look and feel to their liking.
13. **Google Apps Integration**:
- The extension includes a dedicated section for quick access to Google apps such as Drive, Docs, Sheets, Gmail, and more.
- This ensures seamless productivity for users who rely on Google services.
14. **Language Selector**:
- A language selector is included in the menu settings, enabling users to choose their preferred language for the extension interface.
- This feature supports multilingual customization, enhancing accessibility for users worldwide.
</details>
## 🤝 Contributing
Contributions are welcome! If you’d like to contribute:
1. Follow the guidelines in the [CONTRIBUTING.md](./CONTRIBUTING.md) file.
2. Fork the repository.
3. Create a new branch: `git checkout -b feature/YourFeature`.
4. Commit your changes: `git commit -m 'Add Your Feature'`.
5. Push to the branch: `git push origin feature/YourFeature`.
6. Open a pull request.
## ⭐ Star History
Here is the star history chart for the **Material You NewTab** repository. It shows the growth of stars over time, reflecting the increasing interest and support for the project.
<a href="https://star-history.com/#XengShi/materialYouNewTab&Date">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=XengShi/materialYouNewTab&type=Date&theme=dark" />
<source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=XengShi/materialYouNewTab&type=Date" />
<img alt="Star History Chart" src="https://api.star-history.com/svg?repos=XengShi/materialYouNewTab&type=Date" />
</picture>
</a>
## ❓ Issues and Support
- If you encounter any issues or bugs, feel free to open an issue on [GitHub](https://github.com/XengShi/materialYouNewTab/issues).
- For general questions or support, you can contact the repository maintainers through the **Telegram group**: [Join here](https://t.me/+i-ekvlM7yoU1Yjc1).
## 🛡 Privacy Policy
Material You NewTab respects your privacy. For more details, read our [Privacy Policy](https://xengshi.github.io/materialYouNewTab/privacy-policy.html).
## 📜 License
Copyright (C) 2023-2025 XengShi
This project is licensed under the GNU General Public License v3.0 (GPL-3.0). See the [LICENSE](https://github.com/XengShi/materialYouNewTab/blob/main/LICENSE) file for details.
[GitHub](https://github.com/XengShi) [Telegram](https://t.me/xengshi) [Email](mailto:
[email protected])
", Assign "at most 3 tags" to the expected json: {"id":"11890","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"