Skip to content

Commit 6b80841

Browse files
Shreekant-04Shreekant-04
committed
chrome extension added.
1 parent 3b070f1 commit 6b80841

File tree

7 files changed

+371
-0
lines changed

7 files changed

+371
-0
lines changed

‎README.md

+5
Original file line numberDiff line numberDiff line change
@@ -308,5 +308,10 @@
308308
<td><a href="ToDos-with-local-storage">ToDos with local storage</a></td>
309309
<td><a href="https://glistening-cajeta-a6b4ef.netlify.app/ToDos-with-local-storage/">Link</a></td>
310310
</tr>
311+
<tr>
312+
<td>60</td>
313+
<td><a href="extension">Chrome Extension </a></td>
314+
<td><a href="https://glistening-cajeta-a6b4ef.netlify.app/extension/">Link</a></td>
315+
</tr>
311316
</tbody>
312317
</table>

‎extension/chrome.png

20.3 KB
Loading

‎extension/index.html

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>New Tab</title>
7+
<link rel="stylesheet" href="style.css" />
8+
<link rel="shortcut icon" href="/time-management.ico" type="image/x-icon" />
9+
10+
</head>
11+
<body>
12+
<div class="container">
13+
<header class="header">
14+
<div class="tab"></div>
15+
<div class="author"></div>
16+
</header>
17+
18+
<form class="search-container">
19+
<input type="text" class="search-bar" placeholder="Search Google.com" />
20+
</form>
21+
22+
<!-- Menu -->
23+
<div class="menu">
24+
<select name="category" id="category-select" >
25+
<option value="all">Random</option>
26+
<option value="success">Success</option>
27+
<option value="inspirational">Inspirational</option>
28+
<option value="selfConfidence">Self Confidence</option>
29+
</select>
30+
<button id="theme-toggle">Theme</button>
31+
</div>
32+
</div>
33+
34+
<!-- theme page -->
35+
<section class="theme">
36+
</section>
37+
38+
<script src="script.js"></script>
39+
</body>
40+
</html>

‎extension/manifest.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"manifest_version": 3,
3+
"name": "My First Chrome Extension",
4+
"version": "1.0",
5+
"description": "A simple Chrome extension.",
6+
"chrome_url_overrides": {
7+
"newtab": "index.html"
8+
},
9+
"permissions": ["storage"],
10+
"icons": {
11+
"16": "chrome.png",
12+
"48": "chrome.png",
13+
"128": "chrome.png"
14+
}
15+
}

‎extension/script.js

+141
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
const images = [
2+
"#2B2B2B", // Dark Gray
3+
"#36454F", // Charcoal
4+
"#001F3F", // Navy Blue
5+
"#004D40", // Deep Teal
6+
"#808000", // Olive Green
7+
"#F0F0F0", // Light Gray
8+
"#F5F5F5", // Off-White
9+
"#E0F7FA", // Pale Blue
10+
"#F5DEB3", // Warm Beige
11+
"#FFFACD", // Pale Yellow
12+
"https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
13+
"https://images.unsplash.com/photo-1727197093259-e89dc8ccd8ee?q=80&w=1469&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
14+
"https://images.unsplash.com/photo-1470723710355-95304d8aece4?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
15+
"https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?q=80&w=1583&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
16+
"https://images.unsplash.com/photo-1449553728176-2ba1d6062517?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
17+
"https://images.pexels.com/photos/919073/pexels-photo-919073.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
18+
"https://images.pexels.com/photos/409701/pexels-photo-409701.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
19+
"https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
20+
"https://images.pexels.com/photos/206359/pexels-photo-206359.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
21+
"https://images.pexels.com/photos/1097456/pexels-photo-1097456.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
22+
];
23+
24+
const apiUrls = {
25+
all: "https://quotes-api-chi.vercel.app/quotes",
26+
success: "https://quotes-api-chi.vercel.app/quotes/random?type=success",
27+
inspirational:
28+
"https://quotes-api-chi.vercel.app/quotes/random?type=inspirational",
29+
selfConfidence:
30+
"https://quotes-api-chi.vercel.app/quotes/random?type=selfconfidence",
31+
};
32+
33+
document.addEventListener("DOMContentLoaded", () => {
34+
const categorySelect = document.querySelector("#category-select");
35+
const theme = document.querySelector(".theme");
36+
const themeToggle = document.querySelector("#theme-toggle");
37+
const searchForm = document.querySelector(".search-container");
38+
39+
// Theme Setup
40+
initializeTheme();
41+
addThemeSelectionListeners();
42+
let category = localStorage.getItem("quote") || "all";
43+
categorySelect.value = category;
44+
fetchRandomQuote();
45+
categorySelect.addEventListener("change", () => {
46+
localStorage.setItem("quote", categorySelect.value);
47+
fetchRandomQuote();
48+
});
49+
50+
// Search Form Submission Handler
51+
searchForm.addEventListener("submit", searchQuotesOnGoogle);
52+
53+
// Theme Toggle Button
54+
themeToggle.addEventListener("click", () => {
55+
theme.classList.toggle("active");
56+
});
57+
});
58+
59+
// Functions
60+
const initializeTheme = () => {
61+
let background = localStorage.getItem("theme") || "#2b2b2b";
62+
if (background.startsWith("#")) {
63+
document.querySelector("body").style.background = background;
64+
} else {
65+
document.querySelector(
66+
"body"
67+
).style.background = `center / cover no-repeat url(${background})`;
68+
}
69+
};
70+
71+
const addThemeSelectionListeners = () => {
72+
const theme = document.querySelector(".theme");
73+
images.forEach((img) => {
74+
let div = document.createElement("div");
75+
div.classList.add("theme-options");
76+
if (img.startsWith("#")) {
77+
div.style.background = img;
78+
} else {
79+
div.style.backgroundImage = `url(${img})`;
80+
}
81+
div.addEventListener("click", () => {
82+
localStorage.setItem("theme", img);
83+
initializeTheme();
84+
});
85+
theme.appendChild(div);
86+
});
87+
};
88+
89+
const fetchRandomQuote = async () => {
90+
let category = localStorage.getItem("quote") || "all";
91+
try {
92+
const response = await fetch(apiUrls[category]);
93+
const data = await response.json();
94+
const { quote, author } = data.response;
95+
displayQuote(quote, author);
96+
} catch (error) {
97+
document.querySelector(".header .tab").textContent =
98+
"Failed to load quote. Please try again.";
99+
}
100+
};
101+
102+
const displayQuote = (quote, author) => {
103+
const headerTab = document.querySelector(".header .tab");
104+
const authorTab = document.querySelector(".header .author");
105+
let displayedText = "";
106+
let authorText = "- ";
107+
108+
// Reset content
109+
headerTab.textContent = "";
110+
authorTab.textContent = "";
111+
112+
// Animate Quote Text
113+
quote.split("").forEach((char, index) => {
114+
setTimeout(() => {
115+
displayedText += char;
116+
headerTab.textContent = displayedText;
117+
}, 50 * index);
118+
});
119+
120+
// Animate Author Text
121+
setTimeout(() => {
122+
author.split("").forEach((char, index) => {
123+
setTimeout(() => {
124+
authorText += char;
125+
authorTab.textContent = authorText;
126+
}, 50 * index);
127+
});
128+
}, 50 * (quote.length + 1));
129+
};
130+
131+
const searchQuotesOnGoogle = (event) => {
132+
event.preventDefault();
133+
const searchBar = document.querySelector(".search-bar");
134+
const query = searchBar.value.trim();
135+
if (query) {
136+
const googleSearchUrl = `https://www.google.com/search?q=${encodeURIComponent(
137+
query
138+
)}`;
139+
window.location.href = googleSearchUrl;
140+
}
141+
};

‎extension/style.css

+163
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
/* General reset */
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
font-family: "Poppins", sans-serif;
10+
color: #e0e0e0;
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
height: 100vh;
15+
}
16+
17+
/* Container */
18+
.container {
19+
width: 100%;
20+
height: 100%;
21+
max-width: 100%;
22+
margin: 0 auto;
23+
padding: 20px;
24+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
25+
border-radius: 10px;
26+
color: #fff;
27+
display: flex;
28+
flex-direction: column;
29+
justify-content: flex-start;
30+
gap: 50px;
31+
}
32+
33+
/* Header */
34+
.header {
35+
padding: 10px 20px;
36+
border-radius: 10px;
37+
font-size: 1.5rem;
38+
display: flex;
39+
flex-direction: column;
40+
align-items: center;
41+
justify-content: center;
42+
text-align: center;
43+
width: max-content;
44+
background-color: #ffffff75;
45+
backdrop-filter: blur(10px);
46+
align-self: center;
47+
color: black;
48+
}
49+
.author {
50+
font-size: 1rem;
51+
font-weight: 700;
52+
}
53+
54+
.header .tab {
55+
margin-bottom: 10px;
56+
font-size: 1.2rem;
57+
}
58+
59+
/* Search Bar */
60+
.search-container {
61+
display: flex;
62+
justify-content: center;
63+
margin: 20px 0;
64+
margin-top: 10vmin;
65+
}
66+
67+
.search-bar {
68+
width: 100%;
69+
max-width: 600px;
70+
padding: 15px;
71+
border: none;
72+
border-radius: 30px ;
73+
outline: none;
74+
background-color: #44444493;
75+
color: #e0e0e0;
76+
font-size: 1rem;
77+
backdrop-filter: blur(2px);
78+
}
79+
::placeholder {
80+
color: #d3cdcd;
81+
}
82+
83+
84+
.search:hover {
85+
background-color: #0056b3;
86+
}
87+
88+
/* Menu */
89+
.menu {
90+
display: flex;
91+
justify-content: center;
92+
gap: 20px;
93+
margin: 20px 0;
94+
position: fixed;
95+
bottom: 0;
96+
left: 0;
97+
padding: 0 20px;
98+
width: 100%;
99+
display: flex;
100+
justify-content: space-between;
101+
}
102+
103+
.menu button,
104+
.menu select {
105+
padding: 15px 30px;
106+
border: none;
107+
background-color: #a39b8e83;
108+
backdrop-filter: blur(10px);
109+
border-radius: 5px;
110+
cursor: pointer;
111+
transition: background-color 0.3s ease;
112+
outline: none;
113+
font-weight: 600;
114+
}
115+
116+
.menu button:hover {
117+
background-color: #555;
118+
}
119+
120+
.theme {
121+
position: absolute;
122+
top: 2%;
123+
width: 75%;
124+
height: 85%;
125+
backdrop-filter: blur(10px);
126+
display: none;
127+
overflow-y: auto;
128+
scrollbar-width: thin;
129+
scrollbar-color: #fff transparent;
130+
padding: 10px;
131+
border-radius: 10px;
132+
box-shadow: 0 0 10px black;
133+
background-color: #a39b8e83;
134+
}
135+
136+
.active {
137+
display: grid;
138+
grid-template-columns: repeat(5, 1fr);
139+
gap: 10px;
140+
}
141+
142+
.theme-options {
143+
height: 20vmin;
144+
width: 30vmin;
145+
background-position: center;
146+
background-size: cover;
147+
background-repeat: no-repeat;
148+
border-radius: 20px;
149+
cursor: pointer;
150+
}
151+
/* Responsive */
152+
@media (max-width: 768px) {
153+
.search-bar,
154+
.search {
155+
width: 100%;
156+
max-width: none;
157+
}
158+
159+
.menu {
160+
flex-direction: column;
161+
gap: 10px;
162+
}
163+
}

‎index.html

+7
Original file line numberDiff line numberDiff line change
@@ -441,6 +441,13 @@
441441
<a href="./ToDos-with-local-storage/" target="_blank">Link</a>
442442
</td>
443443
</tr>
444+
<tr>
445+
<td>60</td>
446+
<td>Chrome extension</td>
447+
<td>
448+
<a href="./extension/" target="_blank">Link</a>
449+
</td>
450+
</tr>
444451
</tbody>
445452
</table>
446453
</body>

0 commit comments

Comments
 (0)