Skip to content

Commit

Permalink
add: chrome based translation for modal
Browse files Browse the repository at this point in the history
  • Loading branch information
cranberry3148 committed Jan 2, 2025
1 parent 0b3dbd8 commit 182d752
Show file tree
Hide file tree
Showing 4 changed files with 168 additions and 25 deletions.
65 changes: 65 additions & 0 deletions Extension-React/public/_locales/de/messages.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
{
"language_name": {
"message": "Deutsch"
},
"apply": {
"message": "Anwenden"
},
"ignore": {
"message": "Ignorieren"
},
"syrup_logo": {
"message": "Syrup Logo"
},
"show_extension": {
"message": "Erweiterung anzeigen"
},
"no_auto_apply_setup": {
"message": "Keine Seitenvoreinstellung für diese Seite."
},
"click_apply_to_try_them_all": {
"message": "Klicke auf \"Anwenden\", um alle zu scannen."
},
"syrup_found_coupons": {
"message": "Syrup hat Gutscheine gefunden!"
},
"got_it": {
"message": "Okay"
},
"testing_coupons": {
"message": "Teste Gutscheine..."
},
"testing_coupon_current_of_total": {
"message": "Teste Gutschein %currentIndex% von %total%"
},
"cancel": {
"message": "Abbrechen"
},
"use_best": {
"message": "Besten verwenden"
},
"testing_cancelled": {
"message": "Scan abgebrochen."
},
"scan_was_stopped_no_coupons_applied": {
"message": "Scan wurde abgebrochen. Keine Gutscheine angewendet."
},
"we_found_the_best_coupon": {
"message": "Wir haben den besten Gutschein gefunden!"
},
"applied_coupon_and_saved_savings_new_total": {
"message": "Gutschein \"%bestCoupon%\" angewendet und %savings% eingespart. Neuer Gesamtwert: %finalPrice%"
},
"no_better_price_found": {
"message": "Kein besserer Preis gefunden."
},
"all_coupons_tested_but_none_lowered_your_total": {
"message": "Alle Gutscheine getestet, aber kein Preis war besser."
},
"now_trying_best_so_far": {
"message": "Teste nun \"%currentCoupon%\". Bester Preis bis jetzt: %bestPriceSoFar%"
},
"best_price_so_far": {
"message": "Bester Preis bis jetzt: %bestPriceSoFar%"
}
}
65 changes: 65 additions & 0 deletions Extension-React/public/_locales/en/messages.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
{
"language_name": {
"message": "English"
},
"apply": {
"message": "Apply"
},
"ignore": {
"message": "Ignore"
},
"syrup_logo": {
"message": "Syrup Logo"
},
"show_extension": {
"message": "Show Extension"
},
"no_auto_apply_setup": {
"message": "No auto-apply setup for this site."
},
"click_apply_to_try_them_all": {
"message": "Click Apply to try them all."
},
"syrup_found_coupons": {
"message": "Syrup found coupons!"
},
"got_it": {
"message": "Got it"
},
"testing_coupons": {
"message": "Testing Coupons..."
},
"testing_coupon_current_of_total": {
"message": "Testing coupon %currentIndex% of %total%"
},
"cancel": {
"message": "Cancel"
},
"use_best": {
"message": "Use Best"
},
"testing_cancelled": {
"message": "Testing Cancelled."
},
"scan_was_stopped_no_coupons_applied": {
"message": "Scan was stopped. No coupons applied."
},
"we_found_the_best_coupon": {
"message": "We found the best coupon!"
},
"applied_coupon_and_saved_savings_new_total": {
"message": "Applied coupon \"%bestCoupon%\" and saved %savings%. New total: %finalPrice%"
},
"no_better_price_found": {
"message": "No better price found."
},
"all_coupons_tested_but_none_lowered_your_total": {
"message": "All coupons tested, but none lowered your total."
},
"now_trying_best_so_far": {
"message": "Now trying \"%currentCoupon%\". Best price so far: %bestPriceSoFar%"
},
"best_price_so_far": {
"message": "Best price so far: $%bestPriceSoFar%"
}
}
62 changes: 37 additions & 25 deletions Extension-React/public/content.js
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,15 @@
});
}

function getTranslation(key, data = {}) {
let translated = chrome.i18n.getMessage(key);
for (const [name, value] of Object.entries(data)) {
translated = translated.replace(new RegExp(`%${name}%`, "g"), value);
}
return translated;
}
const __ = getTranslation;

function isVisible(el) {
if (!el) return false;
return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
Expand All @@ -87,7 +96,6 @@

function replaceValue(selector, value) {
const el = document.querySelector(selector);
console.log("setting", el, "to", value);
if (el) {
el.value = value;
// Fire typical events to ensure the page sees the input
Expand Down Expand Up @@ -318,7 +326,7 @@

container.innerHTML = `
<h2 style="margin: 0 0 10px 0; font-size: 22px;">
Testing Coupons...
${__("testing_coupons")}
</h2>
<p id="syrup-test-step" style="margin: 5px 0; font-size: 16px; color: #333;"></p>
<p id="syrup-test-status" style="margin: 5px 0; font-size: 14px; color: #666;"></p>
Expand All @@ -333,7 +341,7 @@
cursor: pointer;
margin-right: 8px;
">
Cancel
${__("cancel")}
</button>
<button id="syrup-use-best-btn" style="
background-color: #ff9800;
Expand All @@ -344,7 +352,7 @@
font-size: 14px;
cursor: pointer;
">
Use Best
${__("use_best")}
</button>
</div>
`;
Expand Down Expand Up @@ -380,12 +388,12 @@
const statusEl = container.querySelector("#syrup-test-status");

if (stepEl) {
stepEl.textContent = `Testing coupon ${currentIndex} of ${total}`;
stepEl.textContent = __(`testing_coupon_current_of_total`, { currentIndex, total });
}
if (statusEl) {
statusEl.textContent = currentCoupon
? `Now trying "${currentCoupon}". Best price so far: $${bestPriceSoFar}`
: `Best price so far: $${bestPriceSoFar}`;
? __(`now_trying_best_so_far`, { currentCoupon, bestPriceSoFar })
: __(`best_price_so_far`, { bestPriceSoFar });
}
}

Expand All @@ -405,29 +413,33 @@
if (useBestBtn) useBestBtn.remove();

if (wasCancelled) {
if (stepEl) stepEl.textContent = "Testing Cancelled.";
if (stepEl) stepEl.textContent = __("testing_cancelled");
if (statusEl) {
statusEl.textContent = "Scan was stopped. No coupons applied.";
statusEl.textContent = __("scan_was_stopped_no_coupons_applied");
}
} else if (bestCoupon) {
if (stepEl) stepEl.textContent = "We found the best coupon!";
if (stepEl) stepEl.textContent = __("we_found_the_best_coupon");
if (statusEl) {
statusEl.textContent = `Applied coupon "${bestCoupon}" and saved $${savings.toFixed(
statusEl.textContent = __(`applied_coupon_and_saved_savings_new_total`, {
bestCoupon,
savings: savings.toFixed(
2
)}. New total: $${finalPrice.toFixed(2)}`;
),
finalPrice: finalPrice.toFixed(2)
});
}
} else {
if (stepEl) stepEl.textContent = "No better price found.";
if (stepEl) stepEl.textContent = __("no_better_price_found");
if (statusEl) {
statusEl.textContent =
"All coupons tested, but none lowered your total.";
__("all_coupons_tested_but_none_lowered_your_total");
}
}

// "Got it" button
const gotItBtn = document.createElement("button");
gotItBtn.id = "syrup-got-it-btn";
gotItBtn.textContent = "Got it";
gotItBtn.textContent = __("got_it");
gotItBtn.style.marginTop = "15px";
gotItBtn.style.backgroundColor = "#28a745";
gotItBtn.style.color = "#fff";
Expand Down Expand Up @@ -463,10 +475,10 @@
font-family: Arial, sans-serif;
">
<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 15px;">
<img src="${syrupIconUrl}" alt="Syrup Logo" style="width: 40px; height: 40px; border-radius: 8px;">
<img src="${syrupIconUrl}" alt="${__("syrup_logo")}" style="width: 40px; height: 40px; border-radius: 8px;">
<div>
<h3 style="margin: 0; font-size: 18px; color: #333;">Syrup found coupons!</h3>
<p style="margin: 0; font-size: 14px; color: #666;">Click Apply to try them all.</p>
<h3 style="margin: 0; font-size: 18px; color: #333;">${__("syrup_found_coupons")}</h3>
<p style="margin: 0; font-size: 14px; color: #666;">${__("click_apply_to_try_them_all")}</p>
</div>
</div>
<div style="display: flex; justify-content: space-between; gap: 10px;">
Expand All @@ -480,7 +492,7 @@
cursor: pointer;
transition: background-color 0.2s ease;
width: 100%;
">Apply</button>
">${__("apply")}</button>
<button id="ignore-coupons-btn" style="
background-color: #f8f9fa;
color: #333;
Expand All @@ -491,7 +503,7 @@
cursor: pointer;
transition: background-color 0.2s ease;
width: 100%;
">Ignore</button>
">${__("ignore")}</button>
</div>
</div>
`;
Expand Down Expand Up @@ -530,10 +542,10 @@
font-family: Arial, sans-serif;
">
<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 15px;">
<img src="${syrupIconUrl}" alt="Syrup Logo" style="width: 40px; height: 40px; border-radius: 8px;">
<img src="${syrupIconUrl}" alt="${__("syrup_logo")}" style="width: 40px; height: 40px; border-radius: 8px;">
<div>
<h3 style="margin: 0; font-size: 18px; color: #333;">Syrup found coupons!</h3>
<p style="margin: 0; font-size: 14px; color: #666;">No auto-apply setup for this site.</p>
<h3 style="margin: 0; font-size: 18px; color: #333;">${__("syrup_found_coupons")}</h3>
<p style="margin: 0; font-size: 14px; color: #666;">${__("no_auto_apply_setup")}</p>
</div>
</div>
<div style="display: flex; justify-content: space-between; gap: 10px;">
Expand All @@ -547,7 +559,7 @@
cursor: pointer;
transition: background-color 0.2s ease;
width: 100%;
">Show Extension</button>
">${__("show_extension")}</button>
<button id="ignore-no-config-btn" style="
background-color: #f8f9fa;
color: #333;
Expand All @@ -558,7 +570,7 @@
cursor: pointer;
transition: background-color 0.2s ease;
width: 100%;
">Ignore</button>
">${__("ignore")}</button>
</div>
</div>
`;
Expand Down
1 change: 1 addition & 0 deletions Extension-React/public/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"description": "A Honey alternative, find and apply the best coupons automatically.",
"version": "0.3",
"permissions": ["activeTab"],
"default_locale": "en",
"background": {
"service_worker": "background.js",
"scripts": ["background.js"]
Expand Down

0 comments on commit 182d752

Please sign in to comment.