Capturing Visual Context

Smartling's Context Capture Chrome Extension

Smartling Account Owners and Project Managers can use the Chrome Context Capture Extension to capture visual context from webpages.

The Chrome Context Capture Extension is an add-on for the Chrome browser that captures dynamic HTML context for a web application as you browse. Any content you can display in a browser can be contextualized this way. You can also use browser automation software such as Selenium to automate context capture, or simply provide your sitemap and have the extension crawl your site.

Only use the Chrome extension on source language sites. For example, if your primary web site is "smartlinghotels.com" and the Spanish version is "es.smartlinghotels.com", only use the extension on "www.smartlinghotels.com".

Capture Context

  1. Install the Chrome Content Capture extension via the Chrome Store. Once the extension is installed, you should have the Smartling Context Capture icon in your browser toolbar.
  2. Browse to the page you want to contextualize. Strings on the page should match strings already uploaded to a Smartling project.
  3. Click the Context Capture icon. The extension will capture the current state of the page at the moment you click. If you want to capture a dynamic element such as a modal dialog, make sure that element is displaying on the page before you click the toolbar button.
    context.png
  4. Login from the "Click here to Log In" button.
  5. From the drop-down, select the destination project in your Smartling account for the snapshot. You can preview the snapshot by clicking Preview.
    smartling.png
  6. Click Send.

Smartling sends the context to the selected project. If it matches uploaded strings, Smartling displays the snapshot of the entire page to translators in the CAT Tool. The string matches will highlight for translators and update the context with their translation in real-time as they translate. Translators can toggle between viewing their translation in context or revert back to viewing the source strings in context by clicking the gear icon on the context panel.

Targeting Specific Strings

By default, a Chrome Context snapshot will capture the entire page at that moment, making the full webpage visible in the context panel in the CAT Tool, but only the string matches will highlight for Translator. You can use the string selection tool to target specific strings for contextualization and exclude areas of the webpage for which the snapshot will not provide good context. For example, if you want to capture context for a modal dialog in the middle of the page, but exclude visibility of anything outside that dialog, use the selection tool to target only the dialog and its strings.

Using this function will overwrite any existing context for your selected strings.

To use string selection:

  1. Follow the instructions for taking a snapshot, but before sending, click Select strings.
  2. In the snapshot preview, select strings or regions of the page with the selection tool.
    target.png
    If you select a region, all visible strings within that region will be included in your selection. You can also click Select Whole Page.
  3. When you have finished making your selection, click Send.

Improve Context Matching With Instrumented Files

Using an instrumented resource file in a test environment can help you get faster and more accurate context matching with the Chrome Context Capture Extension.

Instrumented files are a modified version of the original file with each string wrapped in invisible unicode characters generated from the string’s hashcode. On the page, strings will look exactly the same, but The Chrome Context Capture Extension can match them exactly with their equivalent strings in a Smartling project. The effects of using an instrumented file include:

  • Context matching completes faster.
  • Each variant of a string will match to its correct context.
  • If the Chrome Context Capture Extension detects at least one instrumented string on a page, only instrumented strings will be matched. This is helpful for targeting context matching to specific strings, especially when using automation.

To use instrumented files:

  1. From Content > Files (or, in the New Experience, the Files tab in your project), download the instrumented files containing the strings you want to contextualize. You can also download instrumented files via the API.
    Screenshot_2020-07-07_at_17.29.31.png
  2. Deploy your web application using the instrumented files.
  3. Use the Chrome Context Capture Extension to take context snapshots in your test environment.

Overwrite Existing Context

By default, the Smartling Chrome Content Capture Extension will not override existing context for a string. To replace context for a string, either use the Reset Context action in the list view before using the Extension, or use the Select Strings function to override existing context for selected strings.

You can also control context overwrite in the Chrome Context Capture Extension by marking your site code with Smartling HTML classes. This is especially useful when automating. To override context for an entire page, add the two classes “sl-override-context sl-translate” to the page’s HTML tag.

To override context for an entire page:

Add the two classes sl-override-context and sl-translate to the page’s HTML tag.

To override context for specific elements on the page:

  1. Add the sl-notranslate class to the HTML tag of the page.
  2. Add the two classes sl-override-context and sl-translate to the elements you want to override context for. Any nested child elements will also be overwritten.

Snapshot History

The History function displays a list of context snapshots and statistics about the number of successful string matches.

  1. From the Context Capture toolbar button, click the Gear icon > History. The Feedback dialog displays a list of context snapshots with information such as the number of strings updated and matched. Note, that a snapshot will only be created if context has been updated for at least one string.
  2. If your submission matches strings in the project, clicking the view link displays the new context snapshot.
  3. Clicking Clear History allows you to clear the history log. This will not affect context already in the Dashboard.

Setting a Keyboard Shortcut

Google Chrome has a Keyboard Shortcut feature that allows you to set up shortcuts for Chrome browser extensions. This is useful if you want to take a snapshot of content in difficult-to-expose elements of a page, such as drop-down hover menus.

In the Chrome browser, right-click the Context Capture icon > Manage Extensions. On the top-left of the page, click Extensions > Keyboard Shortcuts.

Screenshot_2020-07-07_at_16.02.54.png

In the Smartling Context Capture section, hold down CTRL, ALT, or Command + the key (letter) you wish to use for your shortcut, eg: Command + Shift + S

Screenshot_2020-07-07_at_16.13.42.png

Execute Custom JavaScript Prior to Snapshot.

You can set up the Chrome Context Capture Extension to execute custom JavaScript on a page before taking a snapshot, for example, to show or hide certain elements on a page or to manipulate markup so that it will match strings in files.

  1. In Chrome, right-click the Chrome Context Capture Extension and select Options.
  2. Check Execute javascript prior to snapshot and enter the code you wish to execute.
    options.png
  3. There's also the ability to enable Autocapture. To use this feature, once you select Options, hold down the Shift + Alt/Option + A keys. You'll also need to enter an API key and a UID. To retrieve these, go to Smartling > Projects > API. For the API key field, enter the Smartling API key. For the UID field, enter the Project ID.
  4. Follow the procedure for Taking a Snapshot

Capturing Context on iFrame Sites

Iframes are windows within a webpage that contain a separate web page, such as a web form. A regular snapshot using the Chrome Context Capture Extension will not capture content within an iframe.

Right-click on the iframe window and from the drop-down menu, select Capture iframe, then follow the procedure to Capture a Snapshot.

capture.png

 

Automation

If you use browser automation software - such as Selenium, PhantomJS - for testing purposes, you can set up the Chrome Context Capture Extension to integrate with your existing test scripts and take a snapshot and any point in a script.

  1. In Chrome, right-click the Chrome Context Capture Extension and select Options.
  2. Check Detect Automation.
    Screenshot_2020-07-07_at_16.29.22.png
  3. To take a snapshot during automation, add this code to your script, substituting your Project ID and API Key.

JavaScript:

fireSmartlingChromeExtension({
        "projectId": "projectUID",
        "apiKey":"project-api-key",
        "callback":function(submissionData){
             /* snapshot is submitted, move on */
        }
});

 

Automation Tool

The Chrome Context Capture Extension can be automated to capture context for an entire website. The Automation Tool is only available for Application Resource Files projects.

By default the Chrome Context Capture Extension will not override existing context.

  1. In Chrome, navigate to Chrome > Preferences > Extensions and click Options.

  2. Select Automation Tool.
    automation_tool.png
  3. Drag your site’s sitemap.xml file into the marked area.
    drag.pngIn your sitemap.xml file you can create a <url-list> node populated with a list of URLs you wish to contextualize. You can also preload your Project UID and API key by adding this code at the top of your sitemap:

    <smartlingconfig>

           <apikey>#######</apikey>
           <projectUID>#######</projectUID>
     </smartlingconfig>

     
You can download a custom sitemap template here.

4. Set up the automation tool:
auto_tool.png

  • Project UID: Can be found on the Dashboard at Project Settings > API.
  • API Key: Can be found on the Dashboard at Project Settings > API.
  • Wait: Instructs the Chrome Context Capture Extension to wait X milliseconds after loading a page to take a snapshot. Use this feature if you have javascript that executes on loading a page.
  • Advanced: Allows you to execute custom javascript on each page before taking a snapshot.
  • URL Filter: Filters URLs by text. Snapshots will only be taken of URLs matching your filter text.
  • Test Mode: If checked, the Chrome Context Capture Extension will crawl the selected urls, but will not take snapshots. You can also click test next to any URL to view a preview snapshot for that URL.

5. Click Start. The Automation Tool will capture a snapshot of each selected URL and match the snapshots to any matching strings in your project.

 

 

Was this article helpful?