Skip to content

Fix: Add user feedback via popup for Groq API fetch failures #165

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dhaarypravi wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fix: Add user feedback via popup for Groq API fetch failures #165

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c0e19b8
Fix: Add user feedback via popup for Groq API fetch failures
dhaarypravi Jun 30, 2025
536a1f9
Fix: Show error popup for Groq API failures
dhaarypravi Jun 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
142 changes: 59 additions & 83 deletions background.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,6 @@ chrome.contextMenus.onClicked.addListener(async (info, tab) => {
});
} catch (error) {
console.error("Context menu translation error:", error);
// Show error in popup
chrome.scripting.executeScript({
target: { tabId: tab.id },
func: showErrorPopup,
Expand Down Expand Up @@ -190,54 +189,42 @@ async function translateText(text) {
const level = translationSettings?.level || "balanced";
const prompt = getTranslationPrompt(style, level);

try {
const response = await fetch(
"https://api.groq.com/openai/v1/chat/completions",
{
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${groqApiKey}`,
},
body: JSON.stringify({
messages: [
{
role: "system",
content: prompt,
},
{
role: "user",
content: text,
},
],
model: "meta-llama/llama-4-scout-17b-16e-instruct",
temperature: 0.7,
max_tokens: 1000,
}),
}
);

if (!response.ok) {
const errorData = await response.json().catch(() => ({}));
throw new Error(
errorData.error?.message || `API error: ${response.status}`
);
const response = await fetch(
"https://api.groq.com/openai/v1/chat/completions",
{
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${groqApiKey}`,
},
body: JSON.stringify({
messages: [
{ role: "system", content: prompt },
{ role: "user", content: text },
],
model: "meta-llama/llama-4-scout-17b-16e-instruct",
temperature: 0.7,
max_tokens: 1000,
}),
}
);

const data = await response.json();
const translatedText = data.choices[0].message.content.trim();
if (!response.ok) {
const errorData = await response.json().catch(() => ({}));
throw new Error(errorData.error?.message || `API error: ${response.status}`);
}

if (!translatedText) {
throw new Error("Empty translation received");
}
const data = await response.json();
const translatedText = data.choices[0].message.content.trim();

return translatedText;
} catch (error) {
console.error("Translation error:", error);
throw error;
if (!translatedText) {
throw new Error("Empty translation received");
}

return translatedText;
}


// Function to explain text using Groq API
async function explainText(text) {
const { groqApiKey, translationSettings } = await chrome.storage.local.get([
Expand All @@ -251,6 +238,7 @@ async function explainText(text) {

const style = translationSettings?.style || "hinglish";
const level = translationSettings?.level || "balanced";

const prompt = `You are an AI assistant that explains concepts in ${
style === "hindi" ? "Hindi" : "Hinglish"
}.
Expand All @@ -265,54 +253,42 @@ async function explainText(text) {
Format your response in a clear, structured way with bullet points or short paragraphs.
Only respond with the explanation, no additional text.`;

try {
const response = await fetch(
"https://api.groq.com/openai/v1/chat/completions",
{
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${groqApiKey}`,
},
body: JSON.stringify({
messages: [
{
role: "system",
content: prompt,
},
{
role: "user",
content: text,
},
],
model: "meta-llama/llama-4-scout-17b-16e-instruct",
temperature: 0.7,
max_tokens: 1000,
}),
}
);

if (!response.ok) {
const errorData = await response.json().catch(() => ({}));
throw new Error(
errorData.error?.message || `API error: ${response.status}`
);
const response = await fetch(
"https://api.groq.com/openai/v1/chat/completions",
{
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${groqApiKey}`,
},
body: JSON.stringify({
messages: [
{ role: "system", content: prompt },
{ role: "user", content: text },
],
model: "meta-llama/llama-4-scout-17b-16e-instruct",
temperature: 0.7,
max_tokens: 1000,
}),
}
);

const data = await response.json();
const explanation = data.choices[0].message.content.trim();
if (!response.ok) {
const errorData = await response.json().catch(() => ({}));
throw new Error(errorData.error?.message || `API error: ${response.status}`);
}

if (!explanation) {
throw new Error("Empty explanation received");
}
const data = await response.json();
const explanation = data.choices[0].message.content.trim();

return explanation;
} catch (error) {
console.error("Explanation error:", error);
throw error;
if (!explanation) {
throw new Error("Empty explanation received");
}

return explanation;
}


// Function to show loading popup
function showLoadingPopup() {
const popup = document.createElement("div");
Expand Down