Merge pull request #27 from adambullmer/locales

Added basic support for internationalization through browser APIs.

Author: adambullmer

README.md

@@ -201,6 +201,14 @@ module.exports = {
   }
   ```
 
+## Internationalization
+
+Some boilerplate for internationalization has been added. This follows the i18n ([chrome](https://developer.chrome.com/extensions/i18n)|[WebExtention](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n)) spec.
+Provided for you is the `default_locale` option in the manifest, and a `_locales` directory.
+There is some basic usage of it in the manifest, as well as in some of the boilerplate files.
+Since this is largely an out of the box solution provided by the browsers, it is heavily encouraged to utilize it.
+If you do not want to translate your app, simply delete the `public/_locales` directory, and no longer use the `browser.i18n` methods.
+
 ## Testing
 This library is following the standard styling of vue projects, and those are really the only tests to perform.
 

generator/index.js

@@ -25,7 +25,7 @@ module.exports = (api, _options) => {
   }
 
   const appRootPath = process.cwd()
-  const { name } = require(path.join(appRootPath, 'package.json'))
+  const { name, description } = require(path.join(appRootPath, 'package.json'))
   const eslintConfig = { env: { webextensions: true } }
   const pkg = {
     private: true,
@@ -57,7 +57,7 @@ module.exports = (api, _options) => {
   }
 
   api.extendPackage(pkg)
-  api.render('./template/base-app', { name, ...options })
+  api.render('./template/base-app', { name, description, ...options })
 
   if (options.components.background) {
     api.render('./template/background', { name, ...options })

generator/template/base-app/public/__locales/en/messages.json

@@ -0,0 +1,6 @@
+{
+  "extName": {
+    "message": "<%- name %>",
+    "description": "<%- description %>"
+  }
+}

generator/template/base-app/src/manifest.json

@@ -1,8 +1,9 @@
 {
   "manifest_version": 2,
-  "name": "<%- name %>",
+  "name": "__MSG_extName__",
   "homepage_url": "http://localhost/",
   "description": "A Vue Browser Extension",
+  "default_locale": "en",
   "icons": {
     "16": "icons/16.png",
     "48": "icons/48.png",
@@ -25,7 +26,7 @@
     <%_ if (options.components.popup) { -%>
     "default_popup": "popup/popup.html",
     <%_ } -%>
-    "default_title": "<%- name %>",
+    "default_title": "__MSG_extName__",
     "default_icon": {
       "19": "icons/19.png",
       "38": "icons/38.png"

generator/template/options/src/options/App.vue

@@ -1,12 +1,17 @@
 <template>
   <div>
-    <p>Hello world!</p>
+    <p>{{ defaultText }}</p>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'App'
+  name: 'App',
+  computed: {
+    defaultText() {
+      return <%- options.api %>.i18n.getMessage('extName');
+    }
+  }
 }
 </script>
 

generator/template/popup/src/popup/router/pages/Index.vue

@@ -1,5 +1,5 @@
 <template>
-  <p>Hello world!</p>
+  <h1>{{ defaultText }}</h1>
 </template>
 
 <script>
@@ -13,12 +13,11 @@ export default {
   },
   mounted () {
     <%- options.api %>.runtime.sendMessage({})
+  },
+  computed: {
+    defaultText() {
+      return <%- options.api %>.i18n.getMessage('extName');
+    }
   }
 }
 </script>
-
-<style scoped>
-p {
-  font-size: 20px;
-}
-</style>

generator/template/standalone/src/standalone/router/pages/Index.vue

@@ -1,5 +1,5 @@
 <template>
-  <p>Hello world!</p>
+  <p>{{ defaultText }}</p>
 </template>
 
 <script>
@@ -13,6 +13,11 @@ export default {
   },
   mounted () {
     <%- options.api %>.runtime.sendMessage({});
+  },
+  computed: {
+    defaultText() {
+      return <%- options.api %>.i18n.getMessage('extName');
+    }
   }
 }
 </script>