| OLD | NEW |
| 1 <!DOCTYPE html><!-- This page is a placeholder for generated extensions api doc.
Note: | 1 <!DOCTYPE html><!-- This page is a placeholder for generated extensions api doc.
Note: |
| 2 1) The <head> information in this page is significant, should be uniform | 2 1) The <head> information in this page is significant, should be uniform |
| 3 across api docs and should be edited only with knowledge of the | 3 across api docs and should be edited only with knowledge of the |
| 4 templating mechanism. | 4 templating mechanism. |
| 5 3) All <body>.innerHTML is genereated as an rendering step. If viewed in a | 5 3) All <body>.innerHTML is genereated as an rendering step. If viewed in a |
| 6 browser, it will be re-generated from the template, json schema and | 6 browser, it will be re-generated from the template, json schema and |
| 7 authored overview content. | 7 authored overview content. |
| 8 4) The <body>.innerHTML is also generated by an offline step so that this | 8 4) The <body>.innerHTML is also generated by an offline step so that this |
| 9 page may easily be indexed by search engines. | 9 page may easily be indexed by search engines. |
| 10 --><html xmlns="http://www.w3.org/1999/xhtml"><head> | 10 --><html xmlns="http://www.w3.org/1999/xhtml"><head> |
| (...skipping 190 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 201 <h2>Contents</h2> | 201 <h2>Contents</h2> |
| 202 <ol> | 202 <ol> |
| 203 <li> | 203 <li> |
| 204 <a href="#l10">How to support multiple languages</a> | 204 <a href="#l10">How to support multiple languages</a> |
| 205 <ol> | 205 <ol> |
| 206 <li style="display: none; "> | 206 <li style="display: none; "> |
| 207 <a>h3Name</a> | 207 <a>h3Name</a> |
| 208 </li> | 208 </li> |
| 209 </ol> | 209 </ol> |
| 210 </li><li> | 210 </li><li> |
| 211 <a href="#overview-predefined">Predefined messages</a> |
| 212 <ol> |
| 213 <li style="display: none; "> |
| 214 <a>h3Name</a> |
| 215 </li> |
| 216 </ol> |
| 217 </li><li> |
| 211 <a href="#overview-locales">Locales</a> | 218 <a href="#overview-locales">Locales</a> |
| 212 <ol> | 219 <ol> |
| 213 <li> | 220 <li> |
| 214 <a href="#locales-supported">Supported locales</a> | 221 <a href="#locales-supported">Supported locales</a> |
| 215 </li><li> | 222 </li><li> |
| 216 <a href="#locales-usage">How extensions find strings</a> | 223 <a href="#locales-usage">How extensions find strings</a> |
| 217 </li><li> | 224 </li><li> |
| 218 <a href="#locales-testing">How to set your browser's locale</a
> | 225 <a href="#locales-testing">How to set your browser's locale</a
> |
| 219 </li> | 226 </li> |
| 220 </ol> | 227 </ol> |
| (...skipping 96 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 317 Say you have an extension | 324 Say you have an extension |
| 318 with the files shown in the following figure: | 325 with the files shown in the following figure: |
| 319 </p> | 326 </p> |
| 320 | 327 |
| 321 <img src="images/i18n-before.gif" alt="A manifest.json file and a file with Java
Script. The .json file has "name": "Hello World". The JavaSc
ript file has title = "Hello World";" width="323" height="148"> | 328 <img src="images/i18n-before.gif" alt="A manifest.json file and a file with Java
Script. The .json file has "name": "Hello World". The JavaSc
ript file has title = "Hello World";" width="323" height="148"> |
| 322 | 329 |
| 323 <p> | 330 <p> |
| 324 To internationalize this extension, | 331 To internationalize this extension, |
| 325 you name each user-visible string | 332 you name each user-visible string |
| 326 and put it into a messages file. | 333 and put it into a messages file. |
| 327 The extension's manifest and JavaScript code | 334 The extension's manifest, |
| 335 CSS files, |
| 336 and JavaScript code |
| 328 use each string's name to get its localized version. | 337 use each string's name to get its localized version. |
| 329 </p> | 338 </p> |
| 330 | 339 |
| 331 <p> | 340 <p> |
| 332 Here's what the extension looks like when it's internationalized | 341 Here's what the extension looks like when it's internationalized |
| 333 (note that it still has only English strings): | 342 (note that it still has only English strings): |
| 334 </p> | 343 </p> |
| 335 | 344 |
| 336 <img src="images/i18n-after-1.gif" alt="In the manifest.json file, "Hello W
orld" has been changed to "__MSG_extName__", and a new "defa
ult_locale" item has the value "en". In the JavaScript file, &quo
t;Hello World" has been changed to chrome.i18n.getMessage("extName&quo
t;). A new file named _locales/en/messages.json defines "extName"." wi
dth="782" height="228"> | 345 <img src="images/i18n-after-1.gif" alt="In the manifest.json file, "Hello W
orld" has been changed to "__MSG_extName__", and a new "defa
ult_locale" item has the value "en". In the JavaScript file, &quo
t;Hello World" has been changed to chrome.i18n.getMessage("extName&quo
t;). A new file named _locales/en/messages.json defines "extName"." wi
dth="782" height="228"> |
| 337 | 346 |
| 338 <p class="note"> | 347 <p class="note"> |
| 339 <b>Important:</b> | 348 <b>Important:</b> |
| 340 If an extension has a <code>_locales</code> directory, | 349 If an extension has a <code>_locales</code> directory, |
| 341 the <a href="manifest.html">manifest</a> | 350 the <a href="manifest.html">manifest</a> |
| 342 <b>must</b> define "default_locale". | 351 <b>must</b> define "default_locale". |
| 343 </p> | 352 </p> |
| 344 | 353 |
| 345 <p> | 354 <p> |
| 346 Some notes about internationalizing extensions: | 355 Some notes about internationalizing extensions: |
| 347 </p> | 356 </p> |
| 348 | 357 |
| 349 <ul> | 358 <ul> |
| 350 <li><p> | 359 <li><p> |
| 351 Use only <a href="#overview-locales">supported locales</a>! | 360 You can use any of the <a href="#overview-locales">supported locales</a>. |
| 361 If you use an unsupported locale, |
| 362 Google Chrome ignores it. |
| 352 </p></li> | 363 </p></li> |
| 353 | 364 |
| 354 <li> | 365 <li> |
| 355 In <code>manifest.json</code>, | 366 In <code>manifest.json</code> |
| 367 and CSS files, |
| 356 refer to a string named <em>messagename</em> like this: | 368 refer to a string named <em>messagename</em> like this: |
| 357 <pre>__MSG_<em>messagename</em>__</pre> | 369 <pre>__MSG_<em>messagename</em>__</pre> |
| 358 </li> | 370 </li> |
| 359 | 371 |
| 360 <li> | 372 <li> |
| 361 In your extension's JavaScript code, | 373 In your extension's JavaScript code, |
| 362 refer to a string named <em>messagename</em> | 374 refer to a string named <em>messagename</em> |
| 363 like this: | 375 like this: |
| 364 <pre>chrome.i18n.getMessage("<em>messagename</em>")</pre> | 376 <pre>chrome.i18n.getMessage("<em>messagename</em>")</pre> |
| 365 | 377 |
| 366 </li><li> <p> | 378 </li><li> <p> |
| 367 In each call to <code>getMessage()</code>, | 379 In each call to <code>getMessage()</code>, |
| 368 you can supply up to 9 strings | 380 you can supply up to 9 strings |
| 369 to be included in the message. | 381 to be included in the message. |
| 370 See <a href="#examples-getMessage">Examples: getMessage</a> | 382 See <a href="#examples-getMessage">Examples: getMessage</a> |
| 371 for details. | 383 for details. |
| 372 </p> | 384 </p> |
| 373 </li> | 385 </li> |
| 374 | 386 |
| 387 <li><p> |
| 388 Some messages, such as <code>@@bidi_dir</code> and <code>@@ui_locale</code>, |
| 389 are provided by the internationalization system. |
| 390 See the <a href="#overview-predefined">Predefined messages</a> section |
| 391 for a full list of predefined message names. |
| 392 </p> |
| 393 </li> |
| 394 |
| 375 <li> | 395 <li> |
| 376 In <code>messages.json</code>, | 396 In <code>messages.json</code>, |
| 377 each user-visible string has a name, a "message" item, | 397 each user-visible string has a name, a "message" item, |
| 378 and an optional "description" item. | 398 and an optional "description" item. |
| 379 The name is a key | 399 The name is a key |
| 380 such as "extName" or "search_string" | 400 such as "extName" or "search_string" |
| 381 that identifies the string. | 401 that identifies the string. |
| 382 The "message" specifies | 402 The "message" specifies |
| 383 the value of the string in this locale. | 403 the value of the string in this locale. |
| 384 The optional "description" | 404 The optional "description" |
| (...skipping 24 matching lines...) Expand all Loading... |
| 409 For example, to support Spanish, | 429 For example, to support Spanish, |
| 410 just put a translated copy of <code>messages.json</code> | 430 just put a translated copy of <code>messages.json</code> |
| 411 under <code>_locales/es</code>. | 431 under <code>_locales/es</code>. |
| 412 The following figure shows the previous extension | 432 The following figure shows the previous extension |
| 413 with a new Spanish translation. | 433 with a new Spanish translation. |
| 414 </p> | 434 </p> |
| 415 | 435 |
| 416 <img src="images/i18n-after-2.gif" alt="This looks the same as the previous figu
re, but with a new file at _locales/es/messages.json that contains a Spanish tra
nslation of the messages." width="782" height="358"> | 436 <img src="images/i18n-after-2.gif" alt="This looks the same as the previous figu
re, but with a new file at _locales/es/messages.json that contains a Spanish tra
nslation of the messages." width="782" height="358"> |
| 417 | 437 |
| 418 | 438 |
| 439 <h2 id="overview-predefined">Predefined messages</h2> |
| 440 |
| 441 <p> |
| 442 The internationalization system provides a few predefined |
| 443 messages to help you localize your extension. |
| 444 These include <code>@@ui_locale</code>, |
| 445 so you can detect the current UI locale, |
| 446 and a few <code>@@bidi_...</code> messages |
| 447 that let you detect the text direction. |
| 448 The latter messages have similar names to constants in the |
| 449 <a href="http://code.google.com/apis/gadgets/docs/i18n.html#BIDI"> |
| 450 gadgets BIDI (bi-directional) API</a>. |
| 451 </p> |
| 452 |
| 453 <p> |
| 454 The special message <code>@@extension_id</code> |
| 455 can be used in the CSS and JavaScript files of any extension, |
| 456 whether or not the extension is localized. |
| 457 This message doesn't work in manifest files. |
| 458 </p> |
| 459 |
| 460 <p> |
| 461 The following table describes each predefined message. |
| 462 </p> |
| 463 |
| 464 <table> |
| 465 <tbody><tr> |
| 466 <th>Message name</th> <th>Description</th> |
| 467 </tr> |
| 468 <tr> |
| 469 <td> <code>@@extension_id</code> </td> |
| 470 <td>The extension ID; |
| 471 you might use this string to construct URLs |
| 472 for resources inside the extension. |
| 473 Even unlocalized extensions can use this message. |
| 474 <br> |
| 475 <b>Note:</b> You can't use this message in a manifest file. |
| 476 </td> |
| 477 </tr> |
| 478 <tr> |
| 479 <td> <code>@@ui_locale</code> </td> |
| 480 <td>The current locale; |
| 481 you might use this string to construct locale-specific URLs. </td> |
| 482 </tr> |
| 483 <tr> |
| 484 <td> <code>@@bidi_dir</code> </td> |
| 485 <td> The text direction for the current locale, |
| 486 either "ltr" for left-to-right languages such as English |
| 487 or "rtl" for right-to-left languages such as Japanese. </td> |
| 488 </tr> |
| 489 <tr> |
| 490 <td> <code>@@bidi_reversed_dir</code> </td> |
| 491 <td> If the <code>@@bidi_dir</code> is "ltr", then this is "rtl"; |
| 492 otherwise, it's "ltr". </td> |
| 493 </tr> |
| 494 <tr> |
| 495 <td> <code>@@bidi_start_edge</code> </td> |
| 496 <td> If the <code>@@bidi_dir</code> is "ltr", then this is "left"; |
| 497 otherwise, it's "right". </td> |
| 498 </tr> |
| 499 <tr> |
| 500 <td> <code>@@bidi_end_edge</code> </td> |
| 501 <td> If the <code>@@bidi_dir</code> is "ltr", then this is "right"; |
| 502 otherwise, it's "left". </td> |
| 503 </tr> |
| 504 </tbody></table> |
| 505 |
| 506 <p> |
| 507 Here's an example of using <code>@@extension_id</code> in a CSS file |
| 508 to construct a URL: |
| 509 </p> |
| 510 |
| 511 <pre>body { |
| 512 <b>background-image:url('chrome-extension://__MSG_@@extension_id__/background.
png');</b> |
| 513 } |
| 514 </pre> |
| 515 |
| 516 <p> |
| 517 If the extension ID is abcdefghijklmnopqrstuvwxyzabcdef, |
| 518 then the bold line in the previous code snippet becomes: |
| 519 </p> |
| 520 |
| 521 <pre>background-image:url('chrome-extension://abcdefghijklmnopqrstuvwxyzabcdef/b
ackground.png'); |
| 522 </pre> |
| 523 |
| 524 <p> |
| 525 Here's an example of using <code>@@bidi_*</code> messages in a CSS file: |
| 526 </p> |
| 527 |
| 528 <pre>body { |
| 529 <b>dir: __MSG_@@bidi_dir__;</b> |
| 530 } |
| 531 |
| 532 div#header { |
| 533 margin-bottom: 1.05em; |
| 534 overflow: hidden; |
| 535 padding-bottom: 1.5em; |
| 536 <b>padding-__MSG_@@bidi_start_edge__: 0;</b> |
| 537 <b>padding-__MSG_@@bidi_end_edge__: 1.5em;</b> |
| 538 position: relative; |
| 539 } |
| 540 </pre> |
| 541 |
| 542 <p> |
| 543 For left-to-right languages such as English, |
| 544 the bold lines become: |
| 545 </p> |
| 546 |
| 547 <pre>dir: ltr; |
| 548 padding-left: 0; |
| 549 padding-right: 1.5em; |
| 550 </pre> |
| 551 |
| 552 |
| 419 <h2 id="overview-locales">Locales</h2> | 553 <h2 id="overview-locales">Locales</h2> |
| 420 | 554 |
| 421 <p> | 555 <p> |
| 422 Extensions can use all the locales that Google Chrome supports, | 556 Extensions can use all the locales that Google Chrome supports, |
| 423 plus a few (such as <code>en</code>) | 557 plus a few (such as <code>en</code>) |
| 424 that let a single translation support multiple variations of a language | 558 that let a single translation support multiple variations of a language |
| 425 (such as <code>en_GB</code> and <code>en_US</code>). | 559 (such as <code>en_GB</code> and <code>en_US</code>). |
| 426 </p> | 560 </p> |
| 427 | 561 |
| 428 | 562 |
| (...skipping 723 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 1152 _uff=0; | 1286 _uff=0; |
| 1153 urchinTracker(); | 1287 urchinTracker(); |
| 1154 } | 1288 } |
| 1155 catch(e) {/* urchinTracker not available. */} | 1289 catch(e) {/* urchinTracker not available. */} |
| 1156 </script> | 1290 </script> |
| 1157 <!-- end analytics --> | 1291 <!-- end analytics --> |
| 1158 </div> | 1292 </div> |
| 1159 </div> <!-- /gc-footer --> | 1293 </div> <!-- /gc-footer --> |
| 1160 </div> <!-- /gc-container --> | 1294 </div> <!-- /gc-container --> |
| 1161 </body></html> | 1295 </body></html> |
| OLD | NEW |