Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(4550)

Unified Diff: chrome/common/extensions/docs/server2/templates/intros/i18n.html

Issue 10832042: Extensions Docs Server: Doc conversion script (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: everything but svn stuff Created 8 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: chrome/common/extensions/docs/server2/templates/intros/i18n.html
diff --git a/chrome/common/extensions/docs/server2/templates/intros/i18n.html b/chrome/common/extensions/docs/server2/templates/intros/i18n.html
index d46611898c7e5bfd7891dfec53003fec4a8d98e0..72fd10d75a0aec52ae7e21e58fe59dac026b2f51 100644
--- a/chrome/common/extensions/docs/server2/templates/intros/i18n.html
+++ b/chrome/common/extensions/docs/server2/templates/intros/i18n.html
@@ -2,7 +2,8 @@
[NOTEs for editors:
* Try to be consistent about string vs. message (it's probably not yet).
-->
-<!-- BEGIN AUTHORED CONTENT -->
+
+
<p id="classSummary">
An <em>internationalized</em> extension
can be easily
@@ -10,6 +11,7 @@ can be easily
adapted to languages and regions
that it didn't originally support.
</p>
+
<p>
To internationalize your extension,
you need to put all of its user-visible strings into a file
@@ -21,6 +23,7 @@ named <code>_locales/<em>localeCode</em></code>,
where <em>localeCode</em> is a code such as
<code>en</code> for English.
</p>
+
<p>
Here's the file hierarchy
for an internationalized extension that supports
@@ -28,17 +31,23 @@ English (<code>en</code>),
Spanish (<code>es</code>), and
Korean (<code>ko</code>):
</p>
+
<img src="{{static}}/images/i18n-hierarchy.gif"
alt='In the extension directory: manifest.json, *.html, *.js, _locales directory. In the _locales directory: en, es, and ko directories, each with a messages.json file.'
width="385" height="77" />
+
+
<h2 id="l10">How to support multiple languages</h2>
+
<p>
Say you have an extension
with the files shown in the following figure:
</p>
+
<img src="{{static}}/images/i18n-before.gif"
alt='A manifest.json file and a file with JavaScript. The .json file has "name": "Hello World". The JavaScript file has title = "Hello World";'
width="323" height="148">
+
<p>
To internationalize this extension,
you name each user-visible string
@@ -48,39 +57,47 @@ CSS files,
and JavaScript code
use each string's name to get its localized version.
</p>
+
<p>
Here's what the extension looks like when it's internationalized
(note that it still has only English strings):
</p>
+
<img src="{{static}}/images/i18n-after-1.gif"
alt='In the manifest.json file, "Hello World" has been changed to "__MSG_extName__", 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 file named _locales/en/messages.json defines "extName".'
width="782" height="228">
+
<p class="note">
<b>Important:</b>
If an extension has a <code>_locales</code> directory,
the <a href="manifest.html">manifest</a>
<b>must</b> define "default_locale".
</p>
+
<p>
Some notes about internationalizing extensions:
</p>
+
<ul>
<li><p>
You can use any of the <a href="#overview-locales">supported locales</a>.
If you use an unsupported locale,
Google Chrome ignores it.
</p></li>
+
<li>
In <code>manifest.json</code>
and CSS files,
refer to a string named <em>messagename</em> like this:
<pre>__MSG_<em>messagename</em>__</pre>
</li>
+
<li>
In your extension's JavaScript code,
refer to a string named <em>messagename</em>
like this:
<pre>chrome.i18n.getMessage("<em>messagename</em>")</pre>
+
<li> <p>
In each call to <code>getMessage()</code>,
you can supply up to 9 strings
@@ -89,6 +106,7 @@ Some notes about internationalizing extensions:
for details.
</p>
</li>
+
<li><p>
Some messages, such as <code>@@bidi_dir</code> and <code>@@ui_locale</code>,
are provided by the internationalization system.
@@ -96,6 +114,7 @@ Some notes about internationalizing extensions:
for a full list of predefined message names.
</p>
</li>
+
<li>
In <code>messages.json</code>,
each user-visible string has a name, a "message" item,
@@ -117,12 +136,14 @@ Some notes about internationalizing extensions:
},
...
}</pre>
+
<p>
For more information, see
<a href="i18n-messages.html">Formats: Locale-Specific Messages</a>.
</p>
</li>
</ul>
+
<p>
Once an extension is internationalized,
translating it is simple.
@@ -135,10 +156,14 @@ under <code>_locales/es</code>.
The following figure shows the previous extension
with a new Spanish translation.
</p>
+
<img src="{{static}}/images/i18n-after-2.gif"
alt='This looks the same as the previous figure, but with a new file at _locales/es/messages.json that contains a Spanish translation of the messages.'
width="782" height="358">
+
+
<h2 id="overview-predefined">Predefined messages</h2>
+
<p>
The internationalization system provides a few predefined
messages to help you localize your extension.
@@ -150,15 +175,18 @@ The latter messages have similar names to constants in the
<a href="http://code.google.com/apis/gadgets/docs/i18n.html#BIDI">
gadgets BIDI (bi-directional) API</a>.
</p>
+
<p>
The special message <code>@@extension_id</code>
can be used in the CSS and JavaScript files of any extension,
whether or not the extension is localized.
This message doesn't work in manifest files.
</p>
+
<p>
The following table describes each predefined message.
</p>
+
<table>
<tr>
<th>Message name</th> <th>Description</th>
@@ -200,29 +228,36 @@ The following table describes each predefined message.
otherwise, it's "left". </td>
</tr>
</table>
+
<p>
Here's an example of using <code>@@extension_id</code> in a CSS file
to construct a URL:
</p>
+
<pre>
body {
<b>background-image:url('chrome-extension://__MSG_@@extension_id__/background.png');</b>
}
</pre>
+
<p>
If the extension ID is abcdefghijklmnopqrstuvwxyzabcdef,
then the bold line in the previous code snippet becomes:
</p>
+
<pre>
background-image:url('chrome-extension://abcdefghijklmnopqrstuvwxyzabcdef/background.png');
</pre>
+
<p>
Here's an example of using <code>@@bidi_*</code> messages in a CSS file:
</p>
+
<pre>
body {
<b>direction: __MSG_@@bidi_dir__;</b>
}
+
div#header {
margin-bottom: 1.05em;
overflow: hidden;
@@ -232,28 +267,39 @@ div#header {
position: relative;
}
</pre>
+
<p>
For left-to-right languages such as English,
the bold lines become:
</p>
+
<pre>
dir: ltr;
padding-left: 0;
padding-right: 1.5em;
</pre>
+
+
<h2 id="overview-locales">Locales</h2>
+
<p>
You can choose from many locales,
including some (such as <code>en</code>)
that let a single translation support multiple variations of a language
(such as <code>en_GB</code> and <code>en_US</code>).
</p>
+
+
<h3 id="locales-supported">Supported locales</h3>
+
<p>
Extensions can use any of the
<a href="http://code.google.com/chrome/webstore/docs/i18n.html#localeTable">locales that the Chrome Web Store supports</a>.
</p>
+
+
<h3 id="locales-usage">How extensions find strings</h3>
+
<p>
You don't have to define every string for every locale
that your internationalized extension supports.
@@ -262,6 +308,7 @@ has a value for every string,
your extension will run no matter how sparse a translation is.
Here's how the extension system searches for a message:
</p>
+
<ol>
<li>
Search the messages file (if any)
@@ -292,6 +339,7 @@ Here's how the extension system searches for a message:
<code>_locales/es/messages.json</code>.
</li>
</ol>
+
<p>
In the following figure,
the message named "colores" is in all three locales
@@ -305,10 +353,13 @@ Because the default language is Spanish,
users running Google Chrome in any non-English language
see the label "Colores" and the extension name "Hola mundo".
</p>
+
<img src="{{static}}/images/i18n-strings.gif"
alt='Four files: manifest.json and three messages.json files (for es, en, and en_GB). The es and en files show entries for messages named "extName" and "colores"; the en_GB file has just one entry (for "colores").'
width="493" height="488" />
+
<h3 id="locales-testing">How to set your browser's locale</h3>
+
<p>
To test translations, you might want to set your browser's locale.
This section tells you how to set the locale in
@@ -316,7 +367,9 @@ This section tells you how to set the locale in
<a href="#testing-mac">Mac OS X</a>, and
<a href="#testing-linux">Linux</a>.
</p>
+
<h4 id="testing-win">Windows</h4>
+
<p>
You can change the locale using either
a locale-specific shortcut
@@ -324,11 +377,14 @@ or the Google Chrome UI.
The shortcut approach is quicker, once you've set it up,
and it lets you use several languages at once.
</p>
+
<h5 id="win-shortcut">Using a locale-specific shortcut</h5>
+
<p>
To create and use a shortcut that launches Google Chrome
with a particular locale:
</p>
+
<ol>
<li>
Make a copy of the Google Chrome shortcut
@@ -343,27 +399,34 @@ with a particular locale:
<code>--lang</code> and
<code>--user-data-dir</code> flags.
The target should look something like this:
+
<pre><em>path_to_chrome.exe</em> --lang=<em>locale</em> --user-data-dir=c:\<em>locale_profile_dir</em></pre>
</li>
+
<li>
Launch Google Chrome by double-clicking the shortcut.
</li>
</ol>
+
<p>
For example, to create a shortcut
that launches Google Chrome in Spanish (<code>es</code>),
you might create a shortcut named <code>chrome-es</code>
that has the following target:
</p>
+
<pre><em>path_to_chrome.exe</em> --lang=es --user-data-dir=c:\chrome-profile-es</pre>
+
<p>
You can create as many shortcuts as you like,
making it easy to test your extension in multiple languages.
For example:
</p>
+
<pre><em>path_to_chrome.exe</em> --lang=en --user-data-dir=c:\chrome-profile-en
<em>path_to_chrome.exe</em> --lang=en_GB --user-data-dir=c:\chrome-profile-en_GB
<em>path_to_chrome.exe</em> --lang=ko --user-data-dir=c:\chrome-profile-ko</pre>
+
<p class="note">
<b>Note:</b>
Specifying <code>--user-data-dir</code> is optional but handy.
@@ -376,10 +439,14 @@ which can be challenging when you don't speak the language.
For more information, see
<a href="http://www.chromium.org/developers/creating-and-using-profiles">Creating and Using Profiles</a>.
</p>
+
+
<h5 id="win-ui">Using the UI</h5>
+
<p>
Here's how to change the locale using the UI on Google Chrome for Windows:
</p>
+
<ol>
<li> Wrench icon > <b>Options</b> </li>
<li> Choose the <b>Under the Hood</b> tab </li>
@@ -389,18 +456,25 @@ Here's how to change the locale using the UI on Google Chrome for Windows:
<li> Use the drop down to set the <b>Google Chrome language</b> </li>
<li> Restart Chrome </li>
</ol>
+
+
<h4 id="testing-mac">Mac OS X</h4>
+
<p>
To change the locale on Mac,
you use the system preferences.
</p>
+
<ol>
<li> From the Apple menu, choose <b>System Preferences</b> </li>
<li> Under the <b>Personal</b> section, choose <b>International</b> </li>
<li> Choose your language and location </li>
<li> Restart Chrome </li>
</ol>
+
+
<h4 id="testing-linux">Linux</h4>
+
<p>
To change the locale on Linux,
first quit Google Chrome.
@@ -409,10 +483,14 @@ set the LANGUAGE environment variable
and launch Google Chrome.
For example:
</p>
+
<pre>
LANGUAGE=es ./chrome
</pre>
+
+
<h2 id="overview-examples">Examples</h2>
+
<p>
You can find simple examples of internationalization in the
<a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/api/i18n/">examples/api/i18n</a>
@@ -422,29 +500,37 @@ For a complete example, see
For other examples and for help in viewing the source code, see
<a href="samples.html">Samples</a>.
</p>
+
+
<h3 id="examples-getMessage">Examples: getMessage</h3>
+
<!--
[PENDING: improve this section. it should probably start with a
one-variable example that includes the messages.json code.]
-->
+
<p>
The following code gets a localized message from the browser
and displays it as a string.
It replaces two placeholders within the message with the strings
"string1" and "string2".
</p>
+
<pre>
function getMessage() {
var message = chrome.i18n.getMessage("click_here", ["string1", "string2"]);
document.getElementById("languageSpan").innerHTML = message;
}
</pre>
+
<p>
Here's how you'd supply and use a single string:
</p>
+
<pre>
<em>// In JavaScript code</em>
status.innerText = chrome.i18n.getMessage("error", errorDetails);
+
<em>// In messages.json</em>
"error": {
"message": "Error: $details$",
@@ -457,17 +543,20 @@ status.innerText = chrome.i18n.getMessage("error", errorDetails);
}
}
</pre>
+
<p>
For more information about placeholders, see the
<a href="i18n-messages.html">Locale-Specific Messages</a> page.
For details on calling <code>getMessage()</code>, see the
<a href="#method-getMessage">API reference</a>.
</p>
+
<h3 id="example-accept-languages">Example: getAcceptLanguages</h3>
<p>
The following code gets accept-languages from the browser and displays them as a
string by separating each accept-language with ','.
</p>
+
<pre>
function getAcceptLanguages() {
chrome.i18n.getAcceptLanguages(function(languageList) {
@@ -476,8 +565,8 @@ function getAcceptLanguages() {
})
}
</pre>
+
<p>
For details on calling <code>getAcceptLanguages()</code>, see the
<a href="#method-getAcceptLanguages">API reference</a>.
-</p>
-<!-- END AUTHORED CONTENT -->
+</p>

Powered by Google App Engine
This is Rietveld 408576698