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 and a welcoming message, all while integrating seamlessly with your preferred search engine.
</div>
<div align="center">
![License](https://img.shields.io/github/license/XengShi/materialYouNewTab)
![Last Commit](https://img.shields.io/github/last-commit/XengShi/materialYouNewTab)
![GitHub contributors](https://img.shields.io/github/contributors/XengShi/materialYouNewTab)
![GitHub stars](https://img.shields.io/github/stars/XengShi/materialYouNewTab)
![GitHub forks](https://img.shields.io/github/forks/XengShi/materialYouNewTab)
</div>
<p align="center">
<a href="#-features">Features</a> •
<a href="#%EF%B8%8F-additional-features">Additional Features</a> •
<a href="#-currently-supported-languages-16">Currently Supported Languages</a> •
<a href="#-installation-guide">Installation Guide</a>
<br>
<a href="#--usage">Usage</a> •
<a href="#-contributing">Contributing</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/M6V8cBZc/Screenshot-from-2024-10-10-20-18-36.png" alt="Screenshot 1" width="100%">
<table>
<tr>
<td><img src="https://i.ibb.co/f46wKwW/Material-You-New-Tab-windows-chrome.png" alt="Screenshot 2" width="100%" style="margin-right: 1%;"></td>
<td><img src="https://i.ibb.co/7nV658Q/mtynt-hindi.png" alt="Screenshot 3" width="100%"></td>
</tr>
</table>
<table>
<tr>
<td><img src="https://i.postimg.cc/PX0JZ829/material-you-newtab.webp" alt="Screenshot 4" width="100%" style="margin-right: 1%;"></td>
<td><img src="https://i.ibb.co/41dyDSM/material-You-New-Tab-settings-preview.png" alt="Screenshot 6" width="100%" style="margin-right: 1%;"></td>
</tr>
</table>
<table>
<tr>
<td><img src="https://i.ibb.co/M7wtK9g/2024-11-08-10-31-22.png" alt="Screenshot 5" width="100%"></td>
<td><img src="https://i.ibb.co/98wBjLt/material-You-New-Tab-settings-look.png" alt="Screenshot 7" width="100%"></td>
</tr>
</table>
<table>
<tr>
<td><img src="https://i.ibb.co/PC5Td8Q/Screenshot-from-2024-11-10-20-45-51.png" alt="Screenshot 5" width="100%"></td>
<td><img src="https://i.ibb.co/Y82qCMB/Screenshot-from-2024-11-10-20-58-20.png" alt="Screenshot 7" width="100%"></td>
</tr>
</table>
#### 🔴 🟡 🟢 Test live : 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, or YouTube.
- **Browser Compatibility**: Supports major browsers like Chrome, Edge, Firefox, Brave, and Safari.
## 🛠️ Additional Features
- **Responsive and Modern Design**:
- The extension is built with a clean, modern interface inspired by Material You, offering a consistent aesthetic that’s pleasing to the eye.
- Elements are intuitively placed, ensuring ease of use and accessibility for users of all ages.
- **Seamless Integration with Browsers**:
- The extension integrates smoothly with all major browsers, including Chrome, Edge, Brave, Firefox, and Safari, providing a cohesive experience across platforms.
## 🌐 Currently Supported Languages (16)
| 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/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/cz.svg' width=20> **Czech** - Čeština | cz | [Michal Šmahel](https://github.com/ceskyDJ/) |
| <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/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/) |
| <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/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/) |
| <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/) |
## 📥 Installation Guide
### Download
1. **Clone the Repository**:
```bash
git clone https://github.com/XengShi/materialYouNewTab.git
```
- Alternatively, download the latest version as a ZIP file by clicking the **Download ZIP** button below:
[![Download ZIP](https://img.shields.io/badge/Download-ZIP-blue.svg)](https://github.com/XengShi/materialYouNewTab/releases)
2. **Direct Download**:
- On the repository page, click the **Code** button, then select **Download ZIP** from the dropdown.
---
### Installation
#### ![Chromium](https://img.icons8.com/?size=20&id=104996&format=png&color=000000) 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](https://img.icons8.com/color/20/000000/chrome--v1.png) Chrome: `chrome://extensions`
- ![Edge](https://img.icons8.com/?size=20&id=dGm9KIZPpukc&format=png&color=000000) Edge: `edge://extensions`
- ![Brave](https://img.icons8.com/color/20/000000/brave-web-browser.png) Brave: `brave://extensions`
- ![Opera](https://img.icons8.com/color/20/000000/opera--v1.png) 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.
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](https://img.icons8.com/color/20/000000/firefox--v1.png) 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">
**Or** follow the manual steps below:
2. **Manual Installation**:
- 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](https://img.icons8.com/color/20/000000/safari--v1.png) Safari
1. Clone the repository or download and extract the ZIP file.
2. **Enable Developer Mode**:
- Open **Safari**, go to **Preferences > Advanced** and enable **Show Develop menu in the menu bar**.
3. **Install Extension**:
- Go to **Develop > Show Extension Builder**, click the **"+"** button, and select your extension folder.
- Click **Install**.
---
### Installation Video
For a step-by-step walkthrough, watch this [installation guide video](https://youtu.be/P4ryQPixfw8).
[![Watch the video](https://img.youtube.com/vi/P4ryQPixfw8/0.jpg)](https://youtu.be/P4ryQPixfw8)
## 📖 Usage
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**:
- A modern, animated clock is displayed prominently on the left side, keeping you aware of the current time without needing to check elsewhere.
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" in the screenshot) to get accurate weather data. A visual icon represents the weather, and temperature is displayed in degrees Celsius.
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.
5. **Quick Access Social Media Icons**:
- 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.
6. **AI Tools Button**:
- On the bottom left, an "AI Tools" button is available, which could provide access to AI-powered tools directly from the New Tab page. This feature can be helpful for quick, AI-driven assistance or tasks.
## 🤝 Contributing
Contributions are welcome! If you’d like to contribute:
0. Follow the guidelines in the [CONTRIBUTING.md](./CONTRIBUTING.md) file.
1. Fork the repository.
2. Create a feature branch: `git checkout -b feature/YourFeature`.
3. Commit your changes: `git commit -m 'Add Your Feature'`.
4. Push to the branch: `git push origin feature/YourFeature`.
5. Open a pull request.
## ❓ Issues and Support
If you encounter any bugs or issues, please [submit an issue](https://github.com/XengShi/materialYouNewTab/issues) on the GitHub repository.
## 🔒 Privacy Policy
For information on how we handle privacy, please read our [Privacy Policy](https://xengshi.github.io/materialYouNewTab/privacy-policy.html).
## 📜 License
Copyright (C) 2023-2024 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"