Merge pull request #63 from ofuton/add-locales

Support i18n (add locale for English)

_locales/en/messages.json

@@ -0,0 +1,14 @@
+{
+  "Name": {
+    "message": "Maimodorun"
+  },
+  "Description": {
+    "message": "maimodorun: Save and recovery tool for text on kintone"
+  },
+  "RecoveryButtonTitle": {
+    "message": "Restore saved text"
+  },
+  "AutoSaveSign": {
+    "message": "Saved!"
+  }
+}

_locales/ja/messages.json

@@ -0,0 +1,14 @@
+{
+  "Name": {
+    "message": "まいもどるん"
+  },
+  "Description": {
+    "message": "kintoneで入力したテキストを自動で保存し、復元できる拡張機能です。"
+  },
+  "RecoveryButtonTitle": {
+    "message": "保存内容を復元する"
+  },
+  "AutoSaveSign": {
+    "message": "保存しました"
+  }
+}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "maimodorun",
   "private": true,
-  "version": "2.0.2",
+  "version": "2.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -17,8 +17,11 @@
     "@types/debounce": "^1.2.1",
     "dayjs": "^1.11.8",
     "debounce": "^1.2.1",
+    "i18next": "^23.2.6",
+    "i18next-browser-languagedetector": "^7.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^13.0.1",
     "vite-plugin-svgr": "^3.0.0"
   },
   "devDependencies": {

src/content_script/handler.ts

@@ -1,7 +1,7 @@
 import { debounce } from 'debounce'
 import { getRecord, hasKey, storeRecord } from '../background/client.ts'
 import { bindEventListener } from './bind.ts'
-import { getURL } from '../extension.ts'
+import { getI18nMessage, getURL } from '../extension.ts'
 
 const editorFieldClassName = 'ocean-ui-editor-field'
 
@@ -121,11 +121,12 @@ const renderRecoveryButton = async (key: string, element: HTMLElement, forceRend
     // 既存のツールバーの右端にボーダーを追加する
     const toolBarButtons = [...toolBarElement.getElementsByClassName('goog-toolbar-button')]
     toolBarButtons[toolBarButtons.length - 1].classList.add('goog-toolbar-button-right-border')
+    const recoveryButtonTitle: string = getI18nMessage('recoveryButtonTitle')
 
     toolBarElement.insertAdjacentHTML(
       'beforeend',
             `
-            <div id="maimodorun-recovery-button" class="goog-inline-block goog-toolbar-button ocean-ui-editor-toolbar-maimodorun" title="保存内容を復元する" role="button">
+            <div id="maimodorun-recovery-button" class="goog-inline-block goog-toolbar-button ocean-ui-editor-toolbar-maimodorun" title="${recoveryButtonTitle}" role="button">
                 <div class="goog-inline-block goog-toolbar-button-inner-box goog-toolbar-button-inner-box-maimodorun">
                   <div class="ocean-ui-editor-toolbar-maimodorun-button">
                       <img class="maimodorun-button-img" src="${getURL('/assets/icon48.png')}" />
@@ -157,11 +158,13 @@ const renderAutoSaveSign = (element: HTMLElement): void => {
     return
   }
 
+  const autoSavedSignMessage: string = getI18nMessage('AutoSaveSign')
+
   element.querySelector('.ocean-ui-comments-commentform-submit')?.insertAdjacentHTML(
     'afterend',
         `
         <div id="maimodorun-auto-save-sign" class="maimodorun-saved-sign">
-            <span>保存しました</span>
+            <span>${autoSavedSignMessage}</span>
         </div>
         `
   )

src/extension.ts

@@ -23,3 +23,7 @@ export const addListenerForOnUpdated = (callback: (tabId: number, changeInfo: ch
 export const removeListenerForOnUpdated = (callback: (tabId: number, changeInfo: chrome.tabs.TabChangeInfo) => void): void => {
   chrome.tabs.onUpdated.removeListener(callback)
 }
+
+// chrome.i18n.getMessage (_locale) は content_script でのみ利用している
+// i18next は popup で利用している
+export const getI18nMessage = (messageName: string, substitutions?: string[]): string => chrome.i18n.getMessage(messageName, substitutions)

src/i18n/config.ts

@@ -0,0 +1,24 @@
+import i18n from 'i18next'
+import { initReactI18next } from 'react-i18next'
+
+import en from './en/translation.json'
+import ja from './ja/translation.json'
+import I18nextBrowserLanguageDetector from 'i18next-browser-languagedetector'
+
+export const resources = {
+  en: { translation: en },
+  ja: { translation: ja }
+}
+
+i18n
+  .use(I18nextBrowserLanguageDetector)
+  .use(initReactI18next)
+  .init({
+    fallbackLng: 'en',
+    resources,
+    interpolation: {
+      escapeValue: false
+    }
+  })
+
+export default i18n

src/i18n/en/translation.json

@@ -0,0 +1,22 @@
+{
+  "RecordNotFoundAlert": "This record has been deleted.",
+  "Timeline": "Timeline",
+  "ActivityCount_one": "{{count}} activity",
+  "ActivityCount_other": "{{count}} activities",
+  "AriaLabelForListOfHistory": "List of history",
+  "AriaLabelForEmptyHistoryImage": "An image indicating that no activity exists",
+  "ActivityDoesNotExist": "You have no activity yet!",
+  "WhyDoNotYouPostComment": "Why don't you write something in kintone?",
+  "RecordCardTitleForComment": "You wrote the body text in \"{{location}}\".",
+  "RecordCardTitleForReply": "You wrote a reply with \"{{location}}\".",
+  "RecordCardTitleForReplyInPeople": "You wrote a reply with \"{{location}}\".",
+  "RecordCardTitleForCommentInMessage": "You wrote a message in \"{{location}}\".",
+  "RecordCardTitleForCommentInApp": "You wrote a comment in \"{{location}}\".",
+  "ThreadBodyTag": "Thread / Body",
+  "ThreadReplyTag": "Thread / Reply",
+  "PeopleBodyTag": "People / Body",
+  "PeopleReplyTag": "People / Reply",
+  "MessageBodyTag": "Message / Body",
+  "AppCommentTag": "App / Comment",
+  "UnknownTag": "Unknown"
+}

src/i18n/ja/translation.json

@@ -0,0 +1,21 @@
+{
+  "RecordNotFoundAlert": "このレコードは削除されています",
+  "Timeline": "タイムライン",
+  "ActivityCount": "{{count}}個のアクティビティ",
+  "AriaLabelForListOfHistory": "履歴の一覧",
+  "AriaLabelForEmptyHistoryImage": "アクティビティが存在しないことを表す画像",
+  "ActivityDoesNotExist": "まだアクティビティが存在しません！",
+  "WhyDoNotYouPostComment": "kintoneで何か書き込んでみてはいかがでしょうか？",
+  "RecordCardTitleForComment": "{{location}}で本文を書きました",
+  "RecordCardTitleForReply": "{{location}}で返信を書きました",
+  "RecordCardTitleForReplyInPeople": "{{location}}で投稿しました",
+  "RecordCardTitleForCommentInMessage": "{{location}}で送信しました",
+  "RecordCardTitleForCommentInApp": "{{location}}でコメントしました",
+  "ThreadBodyTag": "スレッド / 本文",
+  "ThreadReplyTag": "スレッド / 返信",
+  "PeopleBodyTag": "ピープル / 本文",
+  "PeopleReplyTag": "ピープル / 返信",
+  "MessageBodyTag": "メッセージ / 本文",
+  "AppCommentTag": "アプリ / コメント",
+  "UnknownTag": "不明"
+}

src/popup/component/App.tsx

@@ -3,8 +3,10 @@ import { Histories } from './Histories.tsx'
 import { useGetHistories } from '../hooks/useGetHistories.ts'
 import { deleteRecord, NotFoundRecordError, recoveryPageWithNewTab } from '../../background/client.ts'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 
 export const App: React.FC = () => {
+  const { t } = useTranslation()
   const [histories, setHistories] = useGetHistories()
   const clickTrashButtonHandler = async (url: string): Promise<void> => {
     // レコードが裏で消されていても特に問題はない
@@ -18,7 +20,7 @@ export const App: React.FC = () => {
       await recoveryPageWithNewTab(url)
     } catch (error: unknown) {
       if (error instanceof NotFoundRecordError) {
-        alert('このレコードは削除されています')
+        alert(t('RecordNotFoundAlert'))
         const newHistories = histories.filter((record) => record.url !== url)
         setHistories(newHistories)
       } else {

src/popup/component/Header.tsx

@@ -1,16 +1,19 @@
 import './header.css'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 
 interface HeaderProps {
   recordCount: number
 }
 
 export const Header: React.FC<HeaderProps> = ({ recordCount }: HeaderProps) => {
+  const { t } = useTranslation()
+
   return (
         <header className="l-header">
-            <h1 className="l-header-title">タイムライン</h1>
+            <h1 className="l-header-title">{t('Timeline')}</h1>
             <span id="l-header-available-count" className="l-header-available-count">
-                {recordCount}個のアクティビティ
+                {t('ActivityCount', { count: recordCount })}
             </span>
         </header>
   )