Skip to content

Commit 318e98e

Browse files
rezamehdikhanloorezamehdikhanloo
committed
Adding Day #76
1 parent ab35388 commit 318e98e

File tree

13 files changed

+249
-1
lines changed

13 files changed

+249
-1
lines changed

‎Day #76 - Page Translator Extension/README.md

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# Day #76
2+
3+
### Page Translator Extension
4+
In this tutorial ([Open in Youtube](https://youtu.be/ZgjWHabI8Fs)), In this tutorial, we'll walk you through the step-by-step process of creating a fully functional page translator using HTML, CSS, and JavaScript.️
5+
6+
#### Here's what you'll learn:
7+
8+
🔹 Setting up the basic structure of our extension, including the manifest file.
9+
10+
🔹 Designing the extension popup with HTML and CSS for a clean and intuitive interface.
11+
12+
🔹 Implementing JavaScript to handle translation requests and inject translations into web pages.
13+
14+
🔹 Integrating with translation APIs to provide accurate and reliable translations.
15+
16+
# Screenshot
17+
Here we have project screenshot :
18+
19+
![screenshot](screenshot.jpg)

‎Day #76 - Page Translator Extension/background.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
chrome.runtime.onInstalled.addListener(() => {
2+
console.log("Page Translator Extension Installed.")
3+
});

‎Day #76 - Page Translator Extension/icons/icon128.png

4.38 KB
Loading

‎Day #76 - Page Translator Extension/icons/icon16.png

663 Bytes
Loading

‎Day #76 - Page Translator Extension/icons/icon32.png

1.2 KB
Loading

‎Day #76 - Page Translator Extension/langs.js

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
const languages = [
2+
{ code: 'af', name: 'Afrikaans' },
3+
{ code: 'sq', name: 'Albanian' },
4+
{ code: 'am', name: 'Amharic' },
5+
{ code: 'ar', name: 'Arabic' },
6+
{ code: 'hy', name: 'Armenian' },
7+
{ code: 'az', name: 'Azerbaijani' },
8+
{ code: 'eu', name: 'Basque' },
9+
{ code: 'be', name: 'Belarusian' },
10+
{ code: 'bn', name: 'Bengali' },
11+
{ code: 'bs', name: 'Bosnian' },
12+
{ code: 'bg', name: 'Bulgarian' },
13+
{ code: 'ca', name: 'Catalan' },
14+
{ code: 'ceb', name: 'Cebuano' },
15+
{ code: 'ny', name: 'Chichewa' },
16+
{ code: 'zh-CN', name: 'Chinese (Simplified)' },
17+
{ code: 'zh-TW', name: 'Chinese (Traditional)' },
18+
{ code: 'co', name: 'Corsican' },
19+
{ code: 'hr', name: 'Croatian' },
20+
{ code: 'cs', name: 'Czech' },
21+
{ code: 'da', name: 'Danish' },
22+
{ code: 'nl', name: 'Dutch' },
23+
{ code: 'en', name: 'English' },
24+
{ code: 'eo', name: 'Esperanto' },
25+
{ code: 'et', name: 'Estonian' },
26+
{ code: 'tl', name: 'Filipino' },
27+
{ code: 'fi', name: 'Finnish' },
28+
{ code: 'fr', name: 'French' },
29+
{ code: 'fy', name: 'Frisian' },
30+
{ code: 'gl', name: 'Galician' },
31+
{ code: 'ka', name: 'Georgian' },
32+
{ code: 'de', name: 'German' },
33+
{ code: 'el', name: 'Greek' },
34+
{ code: 'gu', name: 'Gujarati' },
35+
{ code: 'ht', name: 'Haitian Creole' },
36+
{ code: 'ha', name: 'Hausa' },
37+
{ code: 'haw', name: 'Hawaiian' },
38+
{ code: 'iw', name: 'Hebrew' },
39+
{ code: 'hi', name: 'Hindi' },
40+
{ code: 'hmn', name: 'Hmong' },
41+
{ code: 'hu', name: 'Hungarian' },
42+
{ code: 'is', name: 'Icelandic' },
43+
{ code: 'ig', name: 'Igbo' },
44+
{ code: 'id', name: 'Indonesian' },
45+
{ code: 'ga', name: 'Irish' },
46+
{ code: 'it', name: 'Italian' },
47+
{ code: 'ja', name: 'Japanese' },
48+
{ code: 'jw', name: 'Javanese' },
49+
{ code: 'kn', name: 'Kannada' },
50+
{ code: 'kk', name: 'Kazakh' },
51+
{ code: 'km', name: 'Khmer' },
52+
{ code: 'ko', name: 'Korean' },
53+
{ code: 'ku', name: 'Kurdish (Kurmanji)' },
54+
{ code: 'ky', name: 'Kyrgyz' },
55+
{ code: 'lo', name: 'Lao' },
56+
{ code: 'la', name: 'Latin' },
57+
{ code: 'lv', name: 'Latvian' },
58+
{ code: 'lt', name: 'Lithuanian' },
59+
{ code: 'lb', name: 'Luxembourgish' },
60+
{ code: 'mk', name: 'Macedonian' },
61+
{ code: 'mg', name: 'Malagasy' },
62+
{ code: 'ms', name: 'Malay' },
63+
{ code: 'ml', name: 'Malayalam' },
64+
{ code: 'mt', name: 'Maltese' },
65+
{ code: 'mi', name: 'Maori' },
66+
{ code: 'mr', name: 'Marathi' },
67+
{ code: 'mn', name: 'Mongolian' },
68+
{ code: 'my', name: 'Myanmar (Burmese)' },
69+
{ code: 'ne', name: 'Nepali' },
70+
{ code: 'no', name: 'Norwegian' },
71+
{ code: 'ps', name: 'Pashto' },
72+
{ code: 'fa', name: 'Persian' },
73+
{ code: 'pl', name: 'Polish' },
74+
{ code: 'pt', name: 'Portuguese' },
75+
{ code: 'pa', name: 'Punjabi' },
76+
{ code: 'ro', name: 'Romanian' },
77+
{ code: 'ru', name: 'Russian' },
78+
{ code: 'sm', name: 'Samoan' },
79+
{ code: 'gd', name: 'Scots Gaelic' },
80+
{ code: 'sr', name: 'Serbian' },
81+
{ code: 'st', name: 'Sesotho' },
82+
{ code: 'sn', name: 'Shona' },
83+
{ code: 'sd', name: 'Sindhi' },
84+
{ code: 'si', name: 'Sinhala' },
85+
{ code: 'sk', name: 'Slovak' },
86+
{ code: 'sl', name: 'Slovenian' },
87+
{ code: 'so', name: 'Somali' },
88+
{ code: 'es', name: 'Spanish' },
89+
{ code: 'su', name: 'Sundanese' },
90+
{ code: 'sw', name: 'Swahili' },
91+
{ code: 'sv', name: 'Swedish' },
92+
{ code: 'tg', name: 'Tajik' },
93+
{ code: 'ta', name: 'Tamil' },
94+
{ code: 'te', name: 'Telugu' },
95+
{ code: 'th', name: 'Thai' },
96+
{ code: 'tr', name: 'Turkish' },
97+
{ code: 'uk', name: 'Ukrainian' },
98+
{ code: 'ur', name: 'Urdu' },
99+
{ code: 'uz', name: 'Uzbek' },
100+
{ code: 'vi', name: 'Vietnamese' },
101+
{ code: 'cy', name: 'Welsh' },
102+
{ code: 'xh', name: 'Xhosa' },
103+
{ code: 'yi', name: 'Yiddish' },
104+
{ code: 'yo', name: 'Yoruba' },
105+
{ code: 'zu', name: 'Zulu' }
106+
];
107+

‎Day #76 - Page Translator Extension/manifest.json

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"manifest_version": 3,
3+
"name": "Page Translator",
4+
"version": "1.0",
5+
"description": "Simple Page Translator Extension that we created in AsmrProg Channel.",
6+
"permissions": [
7+
"activeTab",
8+
"scripting"
9+
],
10+
"background": {
11+
"service_worker": "background.js"
12+
},
13+
"action": {
14+
"default_popup": "popup.html",
15+
"default_icon": {
16+
"16": "icons/icon16.png",
17+
"32": "icons/icon32.png",
18+
"128": "icons/icon128.png"
19+
}
20+
},
21+
"icons": {
22+
"16": "icons/icon16.png",
23+
"32": "icons/icon32.png",
24+
"128": "icons/icon128.png"
25+
}
26+
}

‎Day #76 - Page Translator Extension/popup.css

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
*{
2+
outline: none;
3+
}
4+
5+
body{
6+
font-family: Arial, sans-serif;
7+
padding: 20px;
8+
width: 250px;
9+
}
10+
11+
h1{
12+
font-size: 18px;
13+
margin: 0;
14+
padding-bottom: 10px;
15+
border-bottom: 1px solid #ccc;
16+
}
17+
18+
label, select, button{
19+
margin-top: 10px;
20+
display: block;
21+
width: 100%;
22+
}
23+
24+
select{
25+
padding: 5px;
26+
font-size: 14px;
27+
cursor: pointer;
28+
}
29+
30+
button{
31+
padding: 10px;
32+
background-color: #4caf50;
33+
color: #fff;
34+
border: none;
35+
border-radius: 5px;
36+
cursor: pointer;
37+
font-size: 14px;
38+
transition: all 0.3s ease;
39+
}
40+
41+
button:hover{
42+
background-color: #45a049;
43+
}

‎Day #76 - Page Translator Extension/popup.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="popup.css">
8+
<title>Day #76 - Page Translator Extension | AsmrProg</title>
9+
</head>
10+
11+
<body>
12+
13+
<h1>Translate Page</h1>
14+
<label for="language">Choose Language:</label>
15+
<select id="language"></select>
16+
<button id="translate">Translate</button>
17+
18+
<script src="langs.js"></script>
19+
<script src="popup.js"></script>
20+
</body>
21+
22+
</html>

‎Day #76 - Page Translator Extension/popup.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
document.addEventListener('DOMContentLoaded', () => {
2+
const langSelect = document.getElementById('language');
3+
languages.forEach(lang => {
4+
const option = document.createElement('option');
5+
option.value = lang.code;
6+
option.textContent = lang.name;
7+
langSelect.appendChild(option);
8+
});
9+
10+
document.getElementById('translate').addEventListener('click', () => {
11+
const language = langSelect.value;
12+
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
13+
chrome.scripting.executeScript({
14+
target: { tabId: tabs[0].id },
15+
files: ['translate.js']
16+
}, () => {
17+
chrome.tabs.sendMessage(tabs[0].id, { language });
18+
});
19+
});
20+
});
21+
});

‎Day #76 - Page Translator Extension/screenshot.jpg

146 KB
Loading

‎Day #76 - Page Translator Extension/translate.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
2+
if (request.language) {
3+
const translateApi = `https://translate.google.com/translate?hl=${request.language}&sl=auto&tl=${request.language}&u=${window.location.href}`;
4+
window.location.href = translateApi;
5+
}
6+
});

‎README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -85,8 +85,9 @@ Here we have list of projects:
8585
73. Gameboy Tetris Clone
8686
74. Flashcard App
8787
75. Mini Music Player
88+
76. Page Translator Extension
8889

89-
## Where is rest 25 Projects
90+
## Where is rest 24 Projects
9091

9192
We create a project each 3 days with voting on our <a href="https://youtube.com/@AsmrProg" target="_blank">Youtube</a> channel.
9293
You can vote for upcoming projects on our channel **community** page :wink:

0 commit comments

Comments
 (0)