Add i18n support

src/_locales/en/messages.json

@@ -0,0 +1,69 @@
+{
+ "extensionName": {
+ "message": "Mozilla VPN Extension",
+ "description": "Name of the extension."
+ },
+
+ "extensionDescription": {
+ "message": "Integrate VPN into Firefox: Exclude Tabs, set Site locations and more!",
+ "description": "Description of the extension."
+ },
+
+ "notificationTitle": {
+ "message": "Click notification",
+ "description": "Title of the click notification."
+ },
+ "productName": {
+ "message": "Mozilla VPN",
+ "description": "Name of the Product"
+ },
+
+ "notificationContent": {
+ "message": "You clicked $URL$.",
+ "description": "Tells the user which link they clicked.",
+ "placeholders": {
+ "url": {
+ "content": "$1",
+ "example": "https://developer.mozilla.org"
+ }
+ }
+ },
+ "titleServerList": {
+ "message": "Select site location",
+ "description": "The header of a Serverlist, prompting the user to select a location"
+ },
+ "titlePageSettings": {
+ "message": "Preferences for this site",
+ "description": "The header for website specific settings i.e exclude a page from vpn"
+ },
+ "exludePageFor": {
+ "message": "Always turn off VPN protection for $origin$ ",
+ "description": "Setting to exclude a website from vpn ",
+ "placeholders": {
+ "origin": {
+ "content": "$1",
+ "example": "developer.mozilla.org"
+ }
+ }
+ },
+ "resetPageSettings": {
+ "message": "Reset site preferences",
+ "description": "Button Text to Reset all Site specific settings"
+ },
+ "isPrivateConnection": {
+ "message": "Secure and private",
+ "description": "Subheader in the 'card' telling users their current connection is secured by the vpn"
+ },
+ "turnOnForPrivateConnection": {
+ "message": "Turn on to protect your browser",
+ "description": "Call to Action for users to turn on the VPN"
+ },
+ "vpnIsOn": {
+ "message": "VPN is On",
+ "description": "Header to signal that VPN connection is enabled"
+ },
+ "vpnIsOff": {
+ "message": "VPN is Off",
+ "description": "Header to signal that VPN connection is disabled"
+ }
+}

src/components/vpncard.js

@@ -9,7 +9,7 @@ import {
  classMap,
  styleMap,
 } from "../vendor/lit-all.min.js";
-
+import { tr } from "../shared/i18n.js";
 import { resetSizing } from "./styles.js";
 
 /**
@@ -83,15 +83,16 @@ export class VPNCard extends LitElement {
  : html``;
 
  const subLine = this.enabled
- ? "Secure and private"
- : "Turn on to protect your browser";
+ ? tr("isPrivateConnection")
+ : tr("turnOnForPrivateConnection");
+ const vpnHeader = this.enabled ? tr("vpnIsOn") : tr("vpnIsOff");
 
  return html`
  <div class="${classMap(boxClasses)}">
  <main>
  <img src=${shieldURL} />
  <div class="infobox">
- <h1>VPN is ${this.enabled ? "On" : "Off"}</h1>
+ <h1>${vpnHeader}</h1>
  <p>${subLine}</p>
  ${timeString}
  </div>

src/manifest.json

@@ -2,8 +2,8 @@
  "manifest_version": 2,
  "version": "1.0",
  "author": "Mozilla",
- "name": "Mozilla VPN Web Extension (TODO Localize)",
- "description": "Mozilla VPN",
+ "name": "__MSG_extensionName__",
+ "description": "__MSG_extensionDescription__",
 
  "browser_specific_settings": {
  "gecko": {
@@ -36,6 +36,7 @@
  "icons": {
  "48": "assets/logos/logo-dark.svg"
  },
+ "default_locale": "en",
 
  "incognito": "spanning",
 

src/shared/i18n.js

@@ -0,0 +1,18 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/**
+ * Get's a translated message
+ * @param {*} id - The Id Of the Message
+ * @param {...any} arg - Substitution arguments
+ * @returns The Message translated for the Users Language.
+ */
+export const tr = (id, ...arg) => {
+ const candidate = browser.i18n.getMessage(id, arg);
+ if (!candidate || candidate.length === 0) {
+ console.error(`Missing Translation Message for ${id}`);
+ return id;
+ }
+ return candidate;
+};

src/ui/browserAction/popupPage.js

@@ -14,7 +14,7 @@ import {
 import { vpnController, proxyHandler } from "./backend.js";
 
 import { Utils } from "../../shared/utils.js";
-
+import { tr } from "../../shared/i18n.js";
 import { fontSizing, resetSizing } from "../../components/styles.js";
 
 // Other components used
@@ -100,15 +100,15 @@ export class BrowserActionPopup extends LitElement {
  return this.stackView?.value?.count > 1;
  })();
  let title = this.stackView?.value?.currentElement?.dataset?.title;
- title ??= "Mozilla VPN";
+ title ??= tr("productName");
 
  return html`
  <vpn-titlebar title="${title}" ${ref(this.titleBar)}>
  ${canGoBack ? BrowserActionPopup.backBtn(back) : null}
  <img slot="right" src="../../assets/img/settings-cog.svg" />
  </vpn-titlebar>
  <stack-view ${ref(this.stackView)}>
- <section data-title="Mozilla VPN">
+ <section data-title="${tr("productName")}">
  <main>
  <vpn-card
  .enabled=${this.vpnState?.connected}
@@ -195,7 +195,7 @@ export class BrowserActionPopup extends LitElement {
  return null;
  }
  return html`
- <h2>Select site location</h2>
+ <h2>${tr("titleServerList")}</h2>
  <div class="row" id="selectPageLocation" @click=${openServerList}>
  <img
  src="../../assets//flags/${siteContext.countryCode}.png"
@@ -214,19 +214,19 @@ export class BrowserActionPopup extends LitElement {
  })();
 
  return html`
- <h1>Preferences for this site</h1>
+ <h1>${tr("titlePageSettings")}</h1>
  <div class="row">
  <input
  type="checkbox"
  ?checked=${siteContext.excluded}
  @click=${tooggleExcluded}
  />
- <p>Always turn off VPN protection for <b>${siteContext.origin}</b></p>
+ <p>${tr("exludePageFor", siteContext.origin)}</p>
  </div>
  ${pageLocationPicker}
  ${hasSiteContext
  ? html`<button id="selectLocation" @click=${removeSiteContext}>
- Reset Site Preferences
+ ${tr("resetPageSettings")}
  </button>`
  : null}
  `;

src/ui/pageAction/pageAction.js

@@ -7,6 +7,7 @@ import { html, css, LitElement } from "../../vendor/lit-all.min.js";
 import { vpnController, proxyHandler } from "../browserAction/backend.js";
 
 import { Utils } from "../../shared/utils.js";
+import { tr } from "../../shared/i18n.js";
 
 import { fontSizing, resetSizing } from "../../components/styles.js";
 
@@ -81,7 +82,7 @@ export class PageActionPopup extends LitElement {
  };
 
  return html`
- <h1>Mozilla VPN</h1>
+ <h1>${tr("productName")}</h1>
  <p id="context-description">${contextDescriptionText()}</p>
 
  <div class="flex">