| OLD | NEW |
| 1 <div id="pageData-name" class="pageData">Internationalization (i18n)</div> | 1 <div id="pageData-name" class="pageData">Internationalization (i18n)</div> |
| 2 | 2 |
| 3 <!-- | 3 <!-- |
| 4 [NOTEs for editors: | 4 [NOTEs for editors: |
| 5 * Try to be consistent about string vs. message (it's probably not yet). | 5 * Try to be consistent about string vs. message (it's probably not yet). |
| 6 --> | 6 --> |
| 7 | 7 |
| 8 <!-- BEGIN AUTHORED CONTENT --> | 8 <!-- BEGIN AUTHORED CONTENT --> |
| 9 <p id="classSummary"> | 9 <p id="classSummary"> |
| 10 An <em>internationalized</em> extension | 10 An <em>internationalized</em> extension |
| (...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 47 </p> | 47 </p> |
| 48 | 48 |
| 49 <img src="images/i18n-before.gif" | 49 <img src="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";' | 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";' |
| 51 width="323" height="148"> | 51 width="323" height="148"> |
| 52 | 52 |
| 53 <p> | 53 <p> |
| 54 To internationalize this extension, | 54 To internationalize this extension, |
| 55 you name each user-visible string | 55 you name each user-visible string |
| 56 and put it into a messages file. | 56 and put it into a messages file. |
| 57 The extension's manifest and JavaScript code | 57 The extension's manifest, |
| 58 CSS files, |
| 59 and JavaScript code |
| 58 use each string's name to get its localized version. | 60 use each string's name to get its localized version. |
| 59 </p> | 61 </p> |
| 60 | 62 |
| 61 <p> | 63 <p> |
| 62 Here's what the extension looks like when it's internationalized | 64 Here's what the extension looks like when it's internationalized |
| 63 (note that it still has only English strings): | 65 (note that it still has only English strings): |
| 64 </p> | 66 </p> |
| 65 | 67 |
| 66 <img src="images/i18n-after-1.gif" | 68 <img src="images/i18n-after-1.gif" |
| 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".' | 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".' |
| 68 width="782" height="228"> | 70 width="782" height="228"> |
| 69 | 71 |
| 70 <p class="note"> | 72 <p class="note"> |
| 71 <b>Important:</b> | 73 <b>Important:</b> |
| 72 If an extension has a <code>_locales</code> directory, | 74 If an extension has a <code>_locales</code> directory, |
| 73 the <a href="manifest.html">manifest</a> | 75 the <a href="manifest.html">manifest</a> |
| 74 <b>must</b> define "default_locale". | 76 <b>must</b> define "default_locale". |
| 75 </p> | 77 </p> |
| 76 | 78 |
| 77 <p> | 79 <p> |
| 78 Some notes about internationalizing extensions: | 80 Some notes about internationalizing extensions: |
| 79 </p> | 81 </p> |
| 80 | 82 |
| 81 <ul> | 83 <ul> |
| 82 <li><p> | 84 <li><p> |
| 83 Use only <a href="#overview-locales">supported locales</a>! | 85 You can use any of the <a href="#overview-locales">supported locales</a>. |
| 86 If you use an unsupported locale, |
| 87 Google Chrome ignores it. |
| 84 </p></li> | 88 </p></li> |
| 85 | 89 |
| 86 <li> | 90 <li> |
| 87 In <code>manifest.json</code>, | 91 In <code>manifest.json</code> |
| 92 and CSS files, |
| 88 refer to a string named <em>messagename</em> like this: | 93 refer to a string named <em>messagename</em> like this: |
| 89 <pre>__MSG_<em>messagename</em>__</pre> | 94 <pre>__MSG_<em>messagename</em>__</pre> |
| 90 </li> | 95 </li> |
| 91 | 96 |
| 92 <li> | 97 <li> |
| 93 In your extension's JavaScript code, | 98 In your extension's JavaScript code, |
| 94 refer to a string named <em>messagename</em> | 99 refer to a string named <em>messagename</em> |
| 95 like this: | 100 like this: |
| 96 <pre>chrome.i18n.getMessage("<em>messagename</em>")</pre> | 101 <pre>chrome.i18n.getMessage("<em>messagename</em>")</pre> |
| 97 | 102 |
| 98 <li> <p> | 103 <li> <p> |
| 99 In each call to <code>getMessage()</code>, | 104 In each call to <code>getMessage()</code>, |
| 100 you can supply up to 9 strings | 105 you can supply up to 9 strings |
| 101 to be included in the message. | 106 to be included in the message. |
| 102 See <a href="#examples-getMessage">Examples: getMessage</a> | 107 See <a href="#examples-getMessage">Examples: getMessage</a> |
| 103 for details. | 108 for details. |
| 104 </p> | 109 </p> |
| 105 </li> | 110 </li> |
| 106 | 111 |
| 112 <li><p> |
| 113 Some messages, such as <code>@@bidi_dir</code> and <code>@@ui_locale</code>, |
| 114 are provided by the internationalization system. |
| 115 See the <a href="#overview-predefined">Predefined messages</a> section |
| 116 for a full list of predefined message names. |
| 117 </p> |
| 118 </li> |
| 119 |
| 107 <li> | 120 <li> |
| 108 In <code>messages.json</code>, | 121 In <code>messages.json</code>, |
| 109 each user-visible string has a name, a "message" item, | 122 each user-visible string has a name, a "message" item, |
| 110 and an optional "description" item. | 123 and an optional "description" item. |
| 111 The name is a key | 124 The name is a key |
| 112 such as "extName" or "search_string" | 125 such as "extName" or "search_string" |
| 113 that identifies the string. | 126 that identifies the string. |
| 114 The "message" specifies | 127 The "message" specifies |
| 115 the value of the string in this locale. | 128 the value of the string in this locale. |
| 116 The optional "description" | 129 The optional "description" |
| (...skipping 27 matching lines...) Expand all Loading... |
| 144 under <code>_locales/es</code>. | 157 under <code>_locales/es</code>. |
| 145 The following figure shows the previous extension | 158 The following figure shows the previous extension |
| 146 with a new Spanish translation. | 159 with a new Spanish translation. |
| 147 </p> | 160 </p> |
| 148 | 161 |
| 149 <img src="images/i18n-after-2.gif" | 162 <img src="images/i18n-after-2.gif" |
| 150 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.' | 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.' |
| 151 width="782" height="358"> | 164 width="782" height="358"> |
| 152 | 165 |
| 153 | 166 |
| 167 <h2 id="overview-predefined">Predefined messages</h2> |
| 168 |
| 169 <p> |
| 170 The internationalization system provides a few predefined |
| 171 messages to help you localize your extension. |
| 172 These include <code>@@ui_locale</code>, |
| 173 so you can detect the current UI locale, |
| 174 and a few <code>@@bidi_...</code> messages |
| 175 that let you detect the text direction. |
| 176 The latter messages have similar names to constants in the |
| 177 <a href="http://code.google.com/apis/gadgets/docs/i18n.html#BIDI"> |
| 178 gadgets BIDI (bi-directional) API</a>. |
| 179 </p> |
| 180 |
| 181 <p> |
| 182 The special message <code>@@extension_id</code> |
| 183 can be used in the CSS and JavaScript files of any extension, |
| 184 whether or not the extension is localized. |
| 185 This message doesn't work in manifest files. |
| 186 </p> |
| 187 |
| 188 <p> |
| 189 The following table describes each predefined message. |
| 190 </p> |
| 191 |
| 192 <table> |
| 193 <tr> |
| 194 <th>Message name</th> <th>Description</th> |
| 195 </tr> |
| 196 <tr> |
| 197 <td> <code>@@extension_id</code> </td> |
| 198 <td>The extension ID; |
| 199 you might use this string to construct URLs |
| 200 for resources inside the extension. |
| 201 Even unlocalized extensions can use this message. |
| 202 <br> |
| 203 <b>Note:</b> You can't use this message in a manifest file. |
| 204 </td> |
| 205 </tr> |
| 206 <tr> |
| 207 <td> <code>@@ui_locale</code> </td> |
| 208 <td>The current locale; |
| 209 you might use this string to construct locale-specific URLs. </td> |
| 210 </tr> |
| 211 <tr> |
| 212 <td> <code>@@bidi_dir</code> </td> |
| 213 <td> The text direction for the current locale, |
| 214 either "ltr" for left-to-right languages such as English |
| 215 or "rtl" for right-to-left languages such as Japanese. </td> |
| 216 </tr> |
| 217 <tr> |
| 218 <td> <code>@@bidi_reversed_dir</code> </td> |
| 219 <td> If the <code>@@bidi_dir</code> is "ltr", then this is "rtl"; |
| 220 otherwise, it's "ltr". </td> |
| 221 </tr> |
| 222 <tr> |
| 223 <td> <code>@@bidi_start_edge</code> </td> |
| 224 <td> If the <code>@@bidi_dir</code> is "ltr", then this is "left"; |
| 225 otherwise, it's "right". </td> |
| 226 </tr> |
| 227 <tr> |
| 228 <td> <code>@@bidi_end_edge</code> </td> |
| 229 <td> If the <code>@@bidi_dir</code> is "ltr", then this is "right"; |
| 230 otherwise, it's "left". </td> |
| 231 </tr> |
| 232 </table> |
| 233 |
| 234 <p> |
| 235 Here's an example of using <code>@@extension_id</code> in a CSS file |
| 236 to construct a URL: |
| 237 </p> |
| 238 |
| 239 <pre> |
| 240 body { |
| 241 <b>background-image:url('chrome-extension://__MSG_@@extension_id__/background.
png');</b> |
| 242 } |
| 243 </pre> |
| 244 |
| 245 <p> |
| 246 If the extension ID is abcdefghijklmnopqrstuvwxyzabcdef, |
| 247 then the bold line in the previous code snippet becomes: |
| 248 </p> |
| 249 |
| 250 <pre> |
| 251 background-image:url('chrome-extension://abcdefghijklmnopqrstuvwxyzabcdef/backgr
ound.png'); |
| 252 </pre> |
| 253 |
| 254 <p> |
| 255 Here's an example of using <code>@@bidi_*</code> messages in a CSS file: |
| 256 </p> |
| 257 |
| 258 <pre> |
| 259 body { |
| 260 <b>dir: __MSG_@@bidi_dir__;</b> |
| 261 } |
| 262 |
| 263 div#header { |
| 264 margin-bottom: 1.05em; |
| 265 overflow: hidden; |
| 266 padding-bottom: 1.5em; |
| 267 <b>padding-__MSG_@@bidi_start_edge__: 0;</b> |
| 268 <b>padding-__MSG_@@bidi_end_edge__: 1.5em;</b> |
| 269 position: relative; |
| 270 } |
| 271 </pre> |
| 272 |
| 273 <p> |
| 274 For left-to-right languages such as English, |
| 275 the bold lines become: |
| 276 </p> |
| 277 |
| 278 <pre> |
| 279 dir: ltr; |
| 280 padding-left: 0; |
| 281 padding-right: 1.5em; |
| 282 </pre> |
| 283 |
| 284 |
| 154 <h2 id="overview-locales">Locales</h2> | 285 <h2 id="overview-locales">Locales</h2> |
| 155 | 286 |
| 156 <p> | 287 <p> |
| 157 Extensions can use all the locales that Google Chrome supports, | 288 Extensions can use all the locales that Google Chrome supports, |
| 158 plus a few (such as <code>en</code>) | 289 plus a few (such as <code>en</code>) |
| 159 that let a single translation support multiple variations of a language | 290 that let a single translation support multiple variations of a language |
| 160 (such as <code>en_GB</code> and <code>en_US</code>). | 291 (such as <code>en_GB</code> and <code>en_US</code>). |
| 161 </p> | 292 </p> |
| 162 | 293 |
| 163 | 294 |
| (...skipping 280 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 444 }) | 575 }) |
| 445 } | 576 } |
| 446 </pre> | 577 </pre> |
| 447 | 578 |
| 448 <p> | 579 <p> |
| 449 For details on calling <code>getAcceptLanguages()</code>, see the | 580 For details on calling <code>getAcceptLanguages()</code>, see the |
| 450 <a href="#method-getAcceptLanguages">API reference</a>. | 581 <a href="#method-getAcceptLanguages">API reference</a>. |
| 451 </p> | 582 </p> |
| 452 | 583 |
| 453 <!-- END AUTHORED CONTENT --> | 584 <!-- END AUTHORED CONTENT --> |
| OLD | NEW |