feat: move extension name & description into locales

Refs: #287

README.md

@@ -58,7 +58,7 @@ This boilerplate is made for creating chrome extensions using React and Typescri
 ## Procedures: <a name="procedures"></a>
 
 1. Clone this repository.
-2. Change `name` and `description` in package.json => **Auto synchronize with manifest**
+2. Change `extensionDescription` and `extensionName` in messages.json
 3. Install pnpm globally: `npm install -g pnpm` (check your node version >= 16.6, recommended >= 18)
 4. Run `pnpm install`
 

manifest.js

@@ -6,9 +6,14 @@ import packageJson from './package.json' assert { type: 'json' };
  */
 const manifest = {
   manifest_version: 3,
-  name: packageJson.name,
+  default_locale: 'en',
+  /**
+   * if you want to support multiple languages, you can use the following reference
+   * https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Internationalization
+   */
+  name: '__MSG_extensionName__',
   version: packageJson.version,
-  description: packageJson.description,
+  description: '__MSG_extensionDescription__',
   permissions: ['storage', 'sidePanel'],
   side_panel: {
     default_path: 'src/pages/sidepanel/index.html',

public/_locales/en/messages.json

@@ -0,0 +1,10 @@
+{
+  "extensionDescription": {
+    "description": "Extension description",
+    "message": "Chrome extension boilerplate developed with Vite, React and Typescript"
+  },
+  "extensionName": {
+    "description": "Extension name",
+    "message": "Chrome extension boilerplate"
+  }
+}