Applanga Chrome Extension for CLI Integrations

The Applanga Chrome Extension facilitates the connection between the CLI-integrated Applanga 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 Applanga Project & CLI
4. Usage
   • Connecting the Extension to a Project
   • Live Editing
5. Examples Cli configurations
   • Angular
   • Vue
   • React
   • Ruby on Rails

Considerations

• The Applanga Live Preview is only available for projects using the Applanga 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 Applanga's hidden IDs that enable the use of the preview feature.

Installation

1. Install the extension from Chrome Web Store

2. (Recommended) Pin the extension to the Chrome Taskbar.

   • Click the jigsaw puzzle icon in the Taskbar then click the pin icon

Configuration of the Applanga Project and CLI

1. Create a new or use an existing Project from the Applanga 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 webapp. 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 Webapp with those files in place. Once complete, you must host the webapp so it is accessible to reviewers. See Usage for more details.

Back to Top

Usage

Connecting the Extension to a Project

1. Navigate to the CLI-integrated Applanga Project.
2. Click on the Applanga Chrome extension - it should connect to the Project and look like the screenshot below
3. Enter the url for the live development webapp page into the Link the Website to Preview field
4. Select the language for preview.
5. Click the Preview Website button and a new tab will open with the Webapp in the selected language.
6. 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 language 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.

Important Note

Our data is cached to help improve overall performance. If entries were recently changed in the Applanga project, before starting the extension, the data may still be cached. You can either wait 15 minutes until the cache is updated, or use the live editing feature of the Extension to get around that.

Back to Top

Examples Cli configurations

These are minimal example configurations to pull your data from Applanga and setup your Project to be usable with the Applanga 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