Skip to content

Commit

Permalink
Merge pull request #1 from forkimenjeckayang/develop
Browse files Browse the repository at this point in the history
Merging Chnages in Develop to main
  • Loading branch information
forkimenjeckayang committed Jun 12, 2024
2 parents 4832504 + ce59c44 commit 6204c55
Show file tree
Hide file tree
Showing 7 changed files with 95 additions and 94 deletions.
3 changes: 2 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
# language_translator_extension
About A web browser extension which can be used to translate from one language to another and supports speech recognition be it as input and output

A web browser extension which can be used to translate from one language to another and supports speech recognition be it as input and output
29 changes: 1 addition & 28 deletions background.js
Original file line number Diff line number Diff line change
@@ -1,28 +1 @@
// Create context menu item
chrome.contextMenus.create({
id: "translateText",
title: "Translate with Language Translator Extension",
contexts: ["selection"] // Show context menu item when text is selected
});

// Add click event listener for context menu item
chrome.contextMenus.onClicked.addListener((info, tab) => {
if (info.menuItemId === "translateText" && info.selectionText) {
// Send selected text to the popup for translation
chrome.runtime.sendMessage({ type: "translateFromContextMenu", text: info.selectionText });
}
});

// Add listener for messages from content script
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.type === "textSelected" && message.text) {
// Create context menu item dynamically for selected text
chrome.contextMenus.create({
id: "translateText",
title: `Translate "${message.text}" with Language Translator Extension`,
contexts: ["selection"]
});
}
});


// still to work on this in upcoming version
Binary file added icons/logo.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
37 changes: 18 additions & 19 deletions manifest.json
Original file line number Diff line number Diff line change
@@ -1,24 +1,23 @@
{
"manifest_version": 3,
"name": "Language Translator",
"version": "1.0",
"description": "Translate text to different languages.",
"permissions": ["activeTab", "contextMenus"],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
},
"icons": {
"16": "icons/icon16.png",
"manifest_version": 3,
"name": "Language Translator",
"version": "1.0",
"description": "Translate text to different languages.",
"permissions": ["activeTab", "contextMenus"],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icons/logo.jpg",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"background": {
"service_worker": "background.js"
}
},
"icons": {
"16": "icons/logo.jpg",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"background": {
"service_worker": "background.js"
}
}
12 changes: 10 additions & 2 deletions popup.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,22 @@
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>The Hybrid Translator</h1>
<textarea id="inputText" placeholder="Enter text here..."></textarea>
<div class="logo-container">
<img src="icons/logo.jpg" alt="Extension Logo" class="logo">
</div>

<label for="inputText">Text to Translate:</label>
<textarea id="inputText" placeholder="Enter text here..." spellcheck="false"></textarea>

<label for="languageSelect">Target Language:</label>
<select id="languageSelect">
<option value="es">Spanish</option>
<option value="fr">French</option>
<option value="en">English</option>
<option value="de">German</option>
<!-- Add more languages as needed -->
</select>

<button id="translateButton">Translate</button>
<p id="translatedText"></p>
<script src="popup.js"></script>
Expand Down
66 changes: 34 additions & 32 deletions popup.js
Original file line number Diff line number Diff line change
@@ -1,40 +1,42 @@
document.getElementById('translateButton').addEventListener('click', function() {
const inputText = document.getElementById('inputText').value;
const targetLanguage = document.getElementById('languageSelect').value;
const translatedTextElem = document.getElementById('translatedText');
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('translateButton').addEventListener('click', function() {
const inputText = document.getElementById('inputText').value;
const targetLanguage = document.getElementById('languageSelect').value;
const translatedTextElem = document.getElementById('translatedText');

// Clear previous translated text
translatedTextElem.innerText = '';
// Clear previous translated text
translatedTextElem.innerText = '';

// Show loading indicator
translatedTextElem.innerText = 'Translating...';
// Show loading indicator
translatedTextElem.innerText = 'Translating...';

const url = 'http://localhost:5000/translate';
const url = 'http://44.203.140.162:5000/translate';

const data = {
q: inputText,
target: targetLanguage,
source: 'auto' // Automatically detect the source language
};
const data = {
q: inputText,
target: targetLanguage,
source: 'auto' // Automatically detect the source language
};

fetch(url, {
method: 'POST',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(data => {
if (data.translatedText) {
translatedTextElem.innerText = data.translatedText;
} else {
translatedTextElem.innerText = 'Translation error. Please try again.';
}
})
.catch(error => {
console.error('Error:', error);
translatedTextElem.innerText = 'An error occurred. Please try again later.';
fetch(url, {
method: 'POST',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(data => {
if (data.translatedText) {
translatedTextElem.innerText = data.translatedText;
} else {
translatedTextElem.innerText = 'Translation error. Please try again.';
}
})
.catch(error => {
console.error('Error:', error);
translatedTextElem.innerText = 'An error occurred. Please try again later.';
});
});
});

42 changes: 30 additions & 12 deletions style.css
Original file line number Diff line number Diff line change
@@ -1,41 +1,47 @@
body {
width: 300px;
font-family: Arial, sans-serif;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 20px;
box-sizing: border-box;
border-radius: 16px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1 {
font-size: 18px;
font-size: 24px;
color: #333;
text-align: center;
margin-bottom: 20px;
}

label {
font-size: 16px;
font-weight: bold;
color: #555;
}

textarea {
width: 100%;
height: 60px;
height: 100px;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ddd;
padding: 12px;
border: 1px solid #ccc;
border-radius: 8px;
box-sizing: border-box;
font-size: 14px;
font-size: 16px;
}

select, button {
width: 100%;
margin-bottom: 10px;
padding: 10px;
font-size: 14px;
border: 1px solid #ddd;
padding: 12px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 8px;
box-sizing: border-box;
font-family: Arial, sans-serif;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

button {
Expand All @@ -52,8 +58,20 @@ button:hover {

#translatedText {
font-weight: bold;
margin-top: 10px;
margin-top: 20px;
color: #333;
text-align: center;
word-wrap: break-word;
}

.logo-container {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}

.logo {
width: 80px;
height: 70px;
}

0 comments on commit 6204c55

Please sign in to comment.