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 |