The Atono Chrome extension simplifies testing and debugging for applications built with Atono. It allows you to report bugs for your application and adjust feature flags directly in your browser, reducing context-switching and the need to navigate between tools. This lets your team focus on testing features, resolving issues, and delivering value faster.

📘

Required setup for the Atono extension

The extension relies on meta tags to understand your environment and (if applicable) your tenancy setup. For implementation details, see the Meta tags section.

Key benefits

The Atono extension helps your team:

• Flip feature flags: Adjust flags in your browser for faster rollbacks, testing, or demos of new functionality.

• Report bugs for your application: Submit detailed bug reports directly from your browser while using your application. Automatically include important details like the current URL, operating system, browser viewport size, and console and network errors.

Install the extension

You can download the Atono extension directly from the Chrome Web Store.

1. In the Chrome Web Store, search for and select the Atono extension.
2. Click Add to Chrome.
3. In the confirmation dialog, click Add extension.
4. After installing, refresh the page where your application is running.

⚠️

Just installed the extension?

If you see a message about completing setup, close the extension and refresh the page. This ensures the extension is able to detect your application's required meta tags.

Use the Atono extension

Flip feature flags

Flip feature flags to test or demo new functionality or quickly roll back changes in your application. The extension applies changes to the current application, environment, and, if applicable, the customer (for multi-tenant applications).

If your application is multi-tenant, but the required tenancy meta tag is missing, the extension may not allow you to flip flags and will display an error. If your application is single-tenant, this tag is not required, and the extension should operate in single-tenant mode.

To flip feature flags, you'll need the appropriate permissions, and the application must be integrated with Atono's feature flag system. Flag flipping depends on valid meta tag setup.

1. Open the Atono extension and click Flip a feature flag.

2. Confirm that the workspace and environment displayed are correct.

3. Find the flag you want to update. You can view a list of which stories the flag applies to by hovering over the stories (book) icon.

   

4. Click the flag's current status (ON or OFF) and choose the new status from the menu.

   • For multi-tenant applications, the extension automatically applies the change to the relevant slice (a subset of the application for the current customer) for the current customer or creates a new slice if none exists.

5. In the Update flag configuration dialog, click Update to save your changes, or click X to cancel.

6. Click out of the extension to return to your application.

⚠️

How multi-tenant mode is detected

The extension determines whether your app is multi-tenant based on whether any feature flag in the current environment includes a slice that references the Customer attribute—even if the flag is inactive.

If so, the extension treats the environment as multi-tenant and requires a tenancy meta tag. If the tag is missing, the extension will block feature flag updates and bug reporting.

If no customer-based slices exist in the environment, the extension assumes it's single-tenant and doesn't require the tag.

Report bugs

Simplify bug reporting for your application by automatically collecting essential context, like the URL, browser information, and console and network errors.

1. Open the Atono extension and click Report a bug.
2. Fill out the bug report template. This uses the same format as in the Atono web application. For more details, see Create a bug.

3. Click Create to submit the bug.
4. After submission, choose from the following options:
   • Create another: Report another bug.
   • View bug: Open the bug in the Atono web application.
   • <Back : Return to the extension menu.

🚧

Meta tag issues can also block bug reporting

If your application is considered multi-tenant and the tenancy meta tag is missing, the extension will prevent bug creation. See implementation details for more information.

Details automatically included in bug reports

The extension automatically collects and attaches the following details to every bug:

• Current URL
• Operating system
• Browser details
• Viewport size
• Console errors (.txt file)
• Network errors (.txt file)

Troubleshooting

If something’s not working, the extension may show a helpful error message. Here are some common cases and how to fix them:

Installation
“Just installed the extension? Close the extension and refresh your page to complete the setup.”

The extension's content script hasn't initialized yet. Close the extension, refresh the page, and reopen it.

Missing environment meta tag
“This site's environment information is either missing or misconfigured.”

The atono:environment meta tag is required on all pages where the extension is used. Add the tag to your HTML. See Meta tags.

Missing tenancy meta tag
“This site’s tenancy meta tag is missing.”

Your environment contains customer-based slices, but the atono:tenancy tag is missing. Either add the tag, or remove all slices that reference Customer in this environment.

Environment not found in workspace
“You’re logged into the ‘X’ Atono workspace, but this site uses an environment that doesn’t exist in that workspace.”

The environment tag doesn't match any environments in your current workspace. Log into the correct workspace, or update the tag to match a valid environment key.

Differences between the extension and web UI

The Atono Chrome extension is designed for quick, in-context changes while using your application.

The extension only flips flags for the current environment and tenant. To change flags for other environments, other customers, or use location-based targeting, use the Atono web UI.

Implementation details

Meta tags

For the extension to function with your application, specific meta tags must be added to your site. These meta tags provide the extension with critical context about your environment and setup, ensuring it integrates seamlessly with Atono's features.

📘

What are meta tags?

Meta tags are snippets of HTML code that provide information about a webpage, often called metadata (details about the page's purpose or environment). They're not visible on the page itself, but they help tools, search engines, and applications understand the page's content and context.

For the Atono extension, meta tags are essential because they:

• Identify theAtono environment where the application is running (such as dev, test, or prod).
• Specify the customer (for multi-tenant applications), ensuring actions are applied to the correct user or organization.

Meta tags are typically added to the <head> section of a web page's HTML because this part of the page contains information about the document, such as metadata, styles, and scripts, which tools and applications like the Atono Chrome extension can access before the page loads.

Here's an example:

<meta property="atono:environment-key" content="value-goes-here">

If you're not familiar with HTML or meta tags, think of them as digital labels that the Atono extension reads to understand how to work with your site. Work with your development team to add or modify these tags based on the requirements below.

Required meta tags for Atono

Add the following meta tags to the <head> section of your HTML:

Environment key

The environment key identifies the environment where your application is running—such as in dev, test, or prod—and ensures the extension can connect to the correct instance.

You can copy the environment key from the Environments page in the Atono web application.

<meta property="atono:environment" content="<your-environment-key>">

Tenancy (customer)

The tenancy meta tag is only required for multi-tenant applications. It specifies the customer's tenant ID, ensuring feature flag changes and bug reports apply to the correct user or organization.

If your application is single-tenant, you should omit this tag.

<meta property="atono:tenancy" content="<customer-tenant-id>">