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="#-currently-supported-languages-18">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.ibb.co/M1cJHcx/Material-You-New-Tab-Preview.jpg" alt="Screenshot 1" width="100%">
#### 🔴 🟡 🟢 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.
## 🌐 Currently Supported Languages (18)
| 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/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/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/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**:
- 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, Adobe Firefly, 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. **Themes and Personalization**:
- Offers a dynamic theme system inspired by Material You, allowing users to customize colors, backgrounds, and fonts.
- Personalization options are accessible in the settings, enabling users to tailor the look and feel to their liking.
10. **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.
11. **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.
## 🤝 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 feature 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.
## ❓ 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"