Login Start for Free

GL Strings Chrome Extension for CLI Integrations

The GL Strings Chrome extension facilitates the connection between the CLI integrated GL Strings Project and the dedicated test environment for translation live preview. The live preview provides a web, in-context solution for linguists and reviewers. It allows linguists to quickly review translations while simulating the same experience as a web app’s end-user. For more information on using the web live preview, see the documentation here.

Table of Contents

  1. Considerations

  2. Installation

  3. Configuration of the GL Strings Project & CLI

  4. Usage

  5. CLI Configuration Examples


Considerations

  • The GL Strings Live Preview is only available for projects using the GL Strings' CLI Integration.
  • Users must enable the includeInvisibleId command in the target configuration.
  • Users must create a separate, dedicated environment for the Live Preview to prevent pushing or pulling GL Strings' hidden IDs that enable the use of the preview feature.

Installation

  1. Install the extension from the Chrome Web Store
  2. (Recommended) Pin the extension to the Chrome Taskbar.
    • Click the jigsaw puzzle icon in the Taskbar
    • Click the pin icon

Configuration of the GL Strings Project and CLI

  1. Create a new or use an existing Project from the GL Strings Dashboard.
  2. Follow the prompts and select the CLI integration option. Follow the CLI Integration Documentation to integrate the CLI setup for your app.
  3. You must enable the includeInvisibleId command in the target configuration to get the right files for your web app. To see some example Cli configurations for popular web frameworks see the Examples section.
    • Note these files should only be used in a development setting of the application and not in production since it adds a data overhead to the application.
    • Note in the default configuration, that gets created from the CLI, the source language does not get pulled. To use the chrome extension you need to pull the source language with invisibleId's as well

Once you have the corresponding files from the CLI you can rebuild the web app with those files in place. Once complete, you must host the web app so it is accessible to reviewers. See Usage for more details.


Back to Top


Usage

Connect the Extension to a Project

  1. Navigate to the CLI integrated GL Strings Project
  2. Click on the GL Strings Chrome extension - it should connect to the Project and look like the screenshot below
    • In the Link the website to preview (required) field, enter the url for the live development web app page
    • Select the language for preview in the Preview translation langauge dropdown
    • Click the Preview Website button
    • A new tab will open with the web app in the selected language
  3. Once the extension is connected to the Project, users can switch the tabs around and the extension will remain connected as long as tabs are open.

Note To switch languages, open the Chrome extension in either the Project tab or the Preview tab and use the Preview translation langauge dropdown to select another language.

Live Editing

While the extension is connected to the Project, users can open the Project tab and navigate to any language/entry to edit and preview changes. All changes to target translations will be immediately viewable via the extension in the Preview tab.

Edit Project & View Preview

  1. In the Project tab, click on any translation language
  1. This will land you in the Project’s Editor view
  1. In the Preview tab, locate a string you need to edit and copy into the search bar in the Editor in the Project tab
  1. Edit the translations as needed, click Save to see the update reflected in the Preview tab
*Note: Generally, [variables](https://www.globallinkstrings.com/docs/translation-management-dashboard/variables) (indicated by grey highlighting in the Editor) should not be edited.*

Limitation

Right to left languages (such as Arabic) are currently not supported and will default to the source string.


Important Note

Our data is cached to help improve overall performance. Ideally, you start the extension before making any edits in the GL String Editor if you’re intending to reference the extension. If entries were recently changed in the GL Strings Project before starting the extension, the data may still be cached. You can either

  • wait 15 minutes until the cache is updated before starting the extension for your edits to reflect
  • or start the extension and bypass the cache by manually resaving any recently edited/cached strings in the Editor (filter for edits made in the last 15 minutes).

Back to Top


CLI Configuration Examples

These are minimal example configurations to pull your data from GL Strings and setup your Project to be usable with the GL Strings Chrome Extension. If you need a more advanced setup please refer to the CLI Integration Documentation.

Angular

{
	"app": {
		"access_token": "<your access token>",
		"base_language": "en",
		"pull": {
			"target": [
				{
					"file_format": "angular_translate_json",
					"path": "./locale-<language>.json",
					"includeInvisibleId": true
				}
			]
		}
	}
}

Vue

{
	"app": {
		"access_token": "<your access token>",
		"base_language": "en",
		"pull": {
			"target": [
				{
					"file_format": "nested_json",
					"path": "./<language>.json",
					"includeInvisibleId": true
				}
			]
		}
	}
}

React

{
	"app": {
		"access_token": "<your access token>",
		"base_language": "en",
		"pull": {
			"target": [
				{
					"file_format": "react_nested_json",
					"path": "./<language>.json",
					"includeInvisibleId": true
				}
			]
		}
	}
}

Ruby on Rails

{
	"app": {
		"access_token": "<your access token>",
		"base_language": "en",
		"pull": {
			"target": [
				{
					"file_format": "ruby_on_rails_yaml",
					"path": "./<language>.yaml",
					"includeInvisibleId": true
				}
			]
		}
	}
}

Back to Top