| OLD | NEW |
| 1 <div id="pageData-name" class="pageData">Internationalization (i18n)</div> | |
| 2 | |
| 3 <!-- | 1 <!-- |
| 4 [NOTEs for editors: | 2 [NOTEs for editors: |
| 5 * Try to be consistent about string vs. message (it's probably not yet). | 3 * Try to be consistent about string vs. message (it's probably not yet). |
| 6 --> | 4 --> |
| 7 | 5 |
| 8 <!-- BEGIN AUTHORED CONTENT --> | 6 |
| 9 <p id="classSummary"> | 7 <p id="classSummary"> |
| 10 An <em>internationalized</em> extension | 8 An <em>internationalized</em> extension |
| 11 can be easily | 9 can be easily |
| 12 <em>localized</em> — | 10 <em>localized</em> — |
| 13 adapted to languages and regions | 11 adapted to languages and regions |
| 14 that it didn't originally support. | 12 that it didn't originally support. |
| 15 </p> | 13 </p> |
| 16 | 14 |
| 17 <p> | 15 <p> |
| 18 To internationalize your extension, | 16 To internationalize your extension, |
| 19 you need to put all of its user-visible strings into a file | 17 you need to put all of its user-visible strings into a file |
| 20 named <a href="i18n-messages.html"><code>messages.json</code></a>. | 18 named <a href="i18n-messages.html"><code>messages.json</code></a>. |
| 21 Each time you localize your extension | 19 Each time you localize your extension |
| 22 you add a messages file | 20 you add a messages file |
| 23 under a directory | 21 under a directory |
| 24 named <code>_locales/<em>localeCode</em></code>, | 22 named <code>_locales/<em>localeCode</em></code>, |
| 25 where <em>localeCode</em> is a code such as | 23 where <em>localeCode</em> is a code such as |
| 26 <code>en</code> for English. | 24 <code>en</code> for English. |
| 27 </p> | 25 </p> |
| 28 | 26 |
| 29 <p> | 27 <p> |
| 30 Here's the file hierarchy | 28 Here's the file hierarchy |
| 31 for an internationalized extension that supports | 29 for an internationalized extension that supports |
| 32 English (<code>en</code>), | 30 English (<code>en</code>), |
| 33 Spanish (<code>es</code>), and | 31 Spanish (<code>es</code>), and |
| 34 Korean (<code>ko</code>): | 32 Korean (<code>ko</code>): |
| 35 </p> | 33 </p> |
| 36 | 34 |
| 37 <img src="../images/i18n-hierarchy.gif" | 35 <img src="{{static}}/images/i18n-hierarchy.gif" |
| 38 alt='In the extension directory: manifest.json, *.html, *.js, _locales director
y. In the _locales directory: en, es, and ko directories, each with a messages.j
son file.' | 36 alt='In the extension directory: manifest.json, *.html, *.js, _locales director
y. In the _locales directory: en, es, and ko directories, each with a messages.j
son file.' |
| 39 width="385" height="77" /> | 37 width="385" height="77" /> |
| 40 | 38 |
| 41 | 39 |
| 42 <h2 id="l10">How to support multiple languages</h2> | 40 <h2 id="l10">How to support multiple languages</h2> |
| 43 | 41 |
| 44 <p> | 42 <p> |
| 45 Say you have an extension | 43 Say you have an extension |
| 46 with the files shown in the following figure: | 44 with the files shown in the following figure: |
| 47 </p> | 45 </p> |
| 48 | 46 |
| 49 <img src="../images/i18n-before.gif" | 47 <img src="{{static}}/images/i18n-before.gif" |
| 50 alt='A manifest.json file and a file with JavaScript. The .json file has "name"
: "Hello World". The JavaScript file has title = "Hello World";' | 48 alt='A manifest.json file and a file with JavaScript. The .json file has "name"
: "Hello World". The JavaScript file has title = "Hello World";' |
| 51 width="323" height="148"> | 49 width="323" height="148"> |
| 52 | 50 |
| 53 <p> | 51 <p> |
| 54 To internationalize this extension, | 52 To internationalize this extension, |
| 55 you name each user-visible string | 53 you name each user-visible string |
| 56 and put it into a messages file. | 54 and put it into a messages file. |
| 57 The extension's manifest, | 55 The extension's manifest, |
| 58 CSS files, | 56 CSS files, |
| 59 and JavaScript code | 57 and JavaScript code |
| 60 use each string's name to get its localized version. | 58 use each string's name to get its localized version. |
| 61 </p> | 59 </p> |
| 62 | 60 |
| 63 <p> | 61 <p> |
| 64 Here's what the extension looks like when it's internationalized | 62 Here's what the extension looks like when it's internationalized |
| 65 (note that it still has only English strings): | 63 (note that it still has only English strings): |
| 66 </p> | 64 </p> |
| 67 | 65 |
| 68 <img src="../images/i18n-after-1.gif" | 66 <img src="{{static}}/images/i18n-after-1.gif" |
| 69 alt='In the manifest.json file, "Hello World" has been changed to "__MSG_extNam
e__", and a new "default_locale" item has the value "en". In the JavaScript file
, "Hello World" has been changed to chrome.i18n.getMessage("extName"). A new fil
e named _locales/en/messages.json defines "extName".' | 67 alt='In the manifest.json file, "Hello World" has been changed to "__MSG_extNam
e__", and a new "default_locale" item has the value "en". In the JavaScript file
, "Hello World" has been changed to chrome.i18n.getMessage("extName"). A new fil
e named _locales/en/messages.json defines "extName".' |
| 70 width="782" height="228"> | 68 width="782" height="228"> |
| 71 | 69 |
| 72 <p class="note"> | 70 <p class="note"> |
| 73 <b>Important:</b> | 71 <b>Important:</b> |
| 74 If an extension has a <code>_locales</code> directory, | 72 If an extension has a <code>_locales</code> directory, |
| 75 the <a href="manifest.html">manifest</a> | 73 the <a href="manifest.html">manifest</a> |
| 76 <b>must</b> define "default_locale". | 74 <b>must</b> define "default_locale". |
| 77 </p> | 75 </p> |
| 78 | 76 |
| (...skipping 73 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 152 You copy <code>messages.json</code>, | 150 You copy <code>messages.json</code>, |
| 153 translate it, | 151 translate it, |
| 154 and put the copy into a new directory under <code>_locales</code>. | 152 and put the copy into a new directory under <code>_locales</code>. |
| 155 For example, to support Spanish, | 153 For example, to support Spanish, |
| 156 just put a translated copy of <code>messages.json</code> | 154 just put a translated copy of <code>messages.json</code> |
| 157 under <code>_locales/es</code>. | 155 under <code>_locales/es</code>. |
| 158 The following figure shows the previous extension | 156 The following figure shows the previous extension |
| 159 with a new Spanish translation. | 157 with a new Spanish translation. |
| 160 </p> | 158 </p> |
| 161 | 159 |
| 162 <img src="../images/i18n-after-2.gif" | 160 <img src="{{static}}/images/i18n-after-2.gif" |
| 163 alt='This looks the same as the previous figure, but with a new file at _locale
s/es/messages.json that contains a Spanish translation of the messages.' | 161 alt='This looks the same as the previous figure, but with a new file at _locale
s/es/messages.json that contains a Spanish translation of the messages.' |
| 164 width="782" height="358"> | 162 width="782" height="358"> |
| 165 | 163 |
| 166 | 164 |
| 167 <h2 id="overview-predefined">Predefined messages</h2> | 165 <h2 id="overview-predefined">Predefined messages</h2> |
| 168 | 166 |
| 169 <p> | 167 <p> |
| 170 The internationalization system provides a few predefined | 168 The internationalization system provides a few predefined |
| 171 messages to help you localize your extension. | 169 messages to help you localize your extension. |
| 172 These include <code>@@ui_locale</code>, | 170 These include <code>@@ui_locale</code>, |
| (...skipping 176 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 349 but "extName" is in only two of the locales. | 347 but "extName" is in only two of the locales. |
| 350 Wherever a user running Google Chrome in US English sees the label "Colors", | 348 Wherever a user running Google Chrome in US English sees the label "Colors", |
| 351 a user of British English sees "Colours". | 349 a user of British English sees "Colours". |
| 352 Both US English and British English users | 350 Both US English and British English users |
| 353 see the extension name "Hello World". | 351 see the extension name "Hello World". |
| 354 Because the default language is Spanish, | 352 Because the default language is Spanish, |
| 355 users running Google Chrome in any non-English language | 353 users running Google Chrome in any non-English language |
| 356 see the label "Colores" and the extension name "Hola mundo". | 354 see the label "Colores" and the extension name "Hola mundo". |
| 357 </p> | 355 </p> |
| 358 | 356 |
| 359 <img src="../images/i18n-strings.gif" | 357 <img src="{{static}}/images/i18n-strings.gif" |
| 360 alt='Four files: manifest.json and three messages.json files (for es, en, and e
n_GB). The es and en files show entries for messages named "extName" and "color
es"; the en_GB file has just one entry (for "colores").' | 358 alt='Four files: manifest.json and three messages.json files (for es, en, and e
n_GB). The es and en files show entries for messages named "extName" and "color
es"; the en_GB file has just one entry (for "colores").' |
| 361 width="493" height="488" /> | 359 width="493" height="488" /> |
| 362 | 360 |
| 363 <h3 id="locales-testing">How to set your browser's locale</h3> | 361 <h3 id="locales-testing">How to set your browser's locale</h3> |
| 364 | 362 |
| 365 <p> | 363 <p> |
| 366 To test translations, you might want to set your browser's locale. | 364 To test translations, you might want to set your browser's locale. |
| 367 This section tells you how to set the locale in | 365 This section tells you how to set the locale in |
| 368 <a href="#testing-win">Windows</a>, | 366 <a href="#testing-win">Windows</a>, |
| 369 <a href="#testing-mac">Mac OS X</a>, and | 367 <a href="#testing-mac">Mac OS X</a>, and |
| (...skipping 194 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 564 chrome.i18n.getAcceptLanguages(function(languageList) { | 562 chrome.i18n.getAcceptLanguages(function(languageList) { |
| 565 var languages = languageList.join(","); | 563 var languages = languageList.join(","); |
| 566 document.getElementById("languageSpan").innerHTML = languages; | 564 document.getElementById("languageSpan").innerHTML = languages; |
| 567 }) | 565 }) |
| 568 } | 566 } |
| 569 </pre> | 567 </pre> |
| 570 | 568 |
| 571 <p> | 569 <p> |
| 572 For details on calling <code>getAcceptLanguages()</code>, see the | 570 For details on calling <code>getAcceptLanguages()</code>, see the |
| 573 <a href="#method-getAcceptLanguages">API reference</a>. | 571 <a href="#method-getAcceptLanguages">API reference</a>. |
| 574 </p> | 572 </p> |
| 575 | |
| 576 <!-- END AUTHORED CONTENT --> | |
| OLD | NEW |