Methods for Capturing Visual Context

Capture Context From Webpages

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

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 contextualised 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 "" and the Spanish version is "", only use the extension on "".

Take a Snapshot

  1. Install the Chrome Content Capture extension via the Chrome Store.
  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 toolbar button. 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.
  4. Login and, from the drop-down, select the destination project for the snapshot. You can preview the snapshot by clicking Preview.
    Note: The Context Capture Extension does not yet support login with a Google ID. You’ll need to use your Smartling ID to login.
  5. Click Send.

Smartling posts the snapshot to the selected project. If it matches uploaded strings, Smartling displays the snapshot to translators when they edit strings.

Targeting Specific Strings

By default, a Chrome Context snapshot will capture all strings visible on a page at that moment. You can use the string selection tool to target specific strings for contextualization and exclude strings 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 strings 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.
    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.

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 > 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.

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.
  2. Deploy your web application using the instrumented files.
  3. Use the Chrome Context Capture Extension to take context snapshots in your test environment.

Setting a Keyboard Shortcut

To make it easier to capture difficult-to-expose elements of a page, you can set a keyboard shortcut to take a snapshot.

  1. In the Chrome browser, navigate to Chrome > Preferences > Extensions and click Keyboard Shortcuts.
  2. In the Smartling Context Capture section, type a keyboard shortcut and click OK.
  3. 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 > Preferences > Extensions, find the Chrome Context Capture Extension, and click Options, or right click the extension and select Options.
  2. Check Execute javascript prior to snapshot and enter the code you wish to execute.
  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.


data-sl-anchor Tag Within an HTML Page

Another method is to use the data-sl-tag within an HTML page to include keys in the the context image that would be seen in a source file.

This allows Smartling to be more specific about matching strings, and does not require that you insert invisible characters in your application files as is the case with instrumented files.

There are a couple of options on how to approach this:

Option 1: If you're using this approach, there may be times when the file ends up containing multiples of the same string with different keys and context matches the incorrect instance of the string within a single HTML files.

  1. The file is uploaded via the Files API.
  2. The Strings API is called to get hashcodes for each string in the file. 
  3. Upload the HTML file to Context API, keeping the contextUid that is returned.
  4. Call the match/async endpoint to match hashcodes with the context file.

Options 2: With this approach, you'll be able to explicitly match each string to its corresponding HTML context.

  1. The file is uploaded via the Files API.
  2. The Strings API is called to get hashcodes for each string in the file.
  3. The HTML file is created with the data-sl-anchor tag as an attribute within the HTML. For example: <p data-sl-anchor="JSONSTRINGKEY">I am a string</p>.
    • The keys from the JSON files can be used here as the value.
  4. Upload the HTML file to the Context API, keeping the contextUid that is returned.
  5. Call the strings bindings for context endpoint to explicitly match string hashcodes with anchor tags within the HTML.


Was this article helpful?