Skip to main content

Chrome Extension

The Toggly Chrome Extension allows you to visually select elements on any webpage to manage feature flags. It supports Documentation Mode for planning implementations, Control Mode for pairing that plan with the Cloudflare Worker (data-feature and page-manifest gating — not CSS-selector rewrites), and Developer Debugging for front-end SDKs.

Installation​

  1. Install the Toggly Chrome Extension from the Chrome Web Store
  2. Click the Toggly icon in your Chrome toolbar to open the extension
  3. Sign in with your Toggly account

Use Cases​

1. Documentation Mode​

Use this mode to document where new features should go or identify elements that should later be put under feature flags by your engineering team.

How it works:

  • Click the extension icon to open the Toggly panel
  • Click "Define Feature" to start element selection
  • Click on any element on the webpage you're viewing
  • The extension captures the element's CSS selector
  • Save the feature definition with the selector information
  • Your engineering team can use this documentation to implement feature flags at these locations

Use cases:

  • Planning new feature implementations
  • Documenting A/B test locations
  • Marking elements for future feature flag integration
  • Creating a visual map of where features should be controlled

2. Control Mode (edge HTML, not CSS selectors)​

The Chrome extension can document which elements should be flagged. Edge enforcement is done by the Toggly Cloudflare Worker, which:

  • Returns 404 (or redirects) for routes listed in /toggly-page-features.json when the mapped flag is off
  • Removes HTML elements that have data-feature="flag_key" when that flag is off

It does not apply hide/show/replace rules from CSS selectors captured in the extension. Those selectors are planning artifacts for your engineering team.

To gate content at the edge:

  1. Add data-feature="your-flag-key" on the HTML you want stripped when the flag is off, and/or
  2. Emit a page-feature manifest (Docusaurus, Gatsby, and Astro Toggly plugins do this from page frontmatter)
  3. Deploy the Cloudflare Worker in front of the origin
WordPress

The WordPress plugin evaluates flags server-side and is not this edge HTML proxy. Plugin docs: WordPress Integration.

3. Developer Debugging Tool​

Use the Chrome Extension as a powerful debugging tool for developers using Toggly's front-end SDKs. The extension inspects your page and provides real-time visibility into which feature flags are enabled, which flags are being checked, and visually highlights all elements on the page that have feature flags around them.

How it works:

  • The extension automatically detects Toggly SDK usage on the page
  • Displays a list of all feature flags that are currently enabled
  • Shows which feature flags are being checked/evaluated on the current page
  • Visually highlights DOM elements that are wrapped by feature flag directives
  • Provides real-time updates as feature flags are toggled or evaluated

Visual debugging features:

  • Flag Status Panel: See all enabled feature flags at a glance
  • Element Highlighting: Elements controlled by feature flags are highlighted with colored borders
  • Flag Information: Hover over highlighted elements to see which feature flag controls them
  • Evaluation Status: See which flags are actively being checked on the page
  • Real-time Updates: Highlights update automatically as flags change state

Use cases:

  • Debugging Flag Behavior: Quickly identify which elements are controlled by which feature flags
  • Verifying Implementation: Confirm that feature flags are correctly applied to the right elements
  • Troubleshooting: Identify why a feature isn't showing - check if the flag is enabled and if the element is correctly flagged
  • Code Review: Visually verify feature flag implementations during code reviews
  • Testing: See all flagged elements at once to understand the full scope of feature flag usage
  • Onboarding: Help new developers understand which parts of the UI are controlled by feature flags

Debugging workflow:

  1. Navigate to a page that uses Toggly front-end SDKs (React, Angular, Vue, etc.)
  2. Open the Toggly Chrome Extension
  3. The extension automatically detects and lists all enabled feature flags
  4. View highlighted elements on the page that are controlled by feature flags
  5. Hover over highlighted elements to see which feature flag controls them
  6. Check the evaluation status to see which flags are actively being checked
  7. Toggle flags in the Toggly dashboard and observe real-time highlighting updates

Benefits for developers:

  • Visual Inspection: Instantly see which elements are feature-flagged without reading code
  • No Console Required: Debug feature flags visually without opening browser DevTools
  • Real-time Feedback: See flag state changes reflected immediately on the page
  • SDK Agnostic: Works with all Toggly front-end SDKs (React, Angular, Vue, JavaScript, etc.)
  • Production Debugging: Use in production to verify flag states for specific users or segments

Using the Extension​

Step 1: Open the Extension​

  1. Navigate to any webpage where you want to manage feature flags
  2. Click the Toggly icon in your Chrome toolbar
  3. The extension popup will open

Step 2: Select Elements​

  1. Click "Define Feature" or edit an existing feature
  2. Click "Add Selector" to start element selection mode
  3. Hover over elements on the page - they will be highlighted
  4. Click on an element to capture its selector
  5. The selector will be automatically generated and saved

Step 3: Configure Feature Flags​

  1. In the Toggly dashboard, navigate to your feature flag
  2. View the saved selectors from the Chrome extension
  3. Configure targeting rules, rollouts, or experiments
  4. For edge gating, deploy the Cloudflare Worker and mark HTML with data-feature (or emit toggly-page-features.json)

Step 4: Control Visibility (edge worker)​

  1. In the Toggly dashboard, set the feature flag state
  2. The worker fetches evaluated flags from definitions.toggly.io and applies page 404/redirect and [data-feature] removal only
  3. CSS selectors saved by this extension are not applied to the live page by the worker

Features​

  • Visual Element Selection: Point and click to identify elements
  • Automatic Selector Generation: CSS selectors are generated automatically
  • Multi-Selector Support: Save multiple selectors per feature flag
  • URL-Specific Selectors: Different selectors for different pages
  • Real-time Preview: See how elements will be affected before saving

Best Practices​

For Documentation Mode​

  • Select elements that represent clear feature boundaries
  • Include descriptive names and descriptions for each feature
  • Document the expected behavior when the feature is enabled/disabled
  • Share feature definitions with your engineering team

For Control Mode​

  • Put data-feature on the real markup (or use a docs plugin that emits the page manifest)
  • Test on a staging origin behind the worker first
  • Do not expect Chrome-captured CSS selectors to change production HTML

For Developer Debugging​

  • Use the extension on pages that implement Toggly front-end SDKs
  • Check the flag status panel to see all enabled flags at a glance
  • Use element highlighting to quickly identify flagged elements
  • Verify that elements are correctly wrapped by feature flag directives
  • Test flag state changes and observe real-time highlighting updates
  • Use in production to debug flag behavior for specific users or segments
  • Share screenshots of highlighted elements with your team for documentation

Troubleshooting​

Selectors Not Working​

  • Verify the selector is still valid (page structure may have changed)
  • Remember: saved selectors are for documentation; the worker only honors data-feature and the page manifest
  • Ensure the feature flag is enabled in the correct environment

Elements Not Showing/Hiding​

  • Confirm the Cloudflare Worker is on the request path
  • Check that the element has data-feature="flag_key" (not only a CSS selector in the dashboard)
  • Check the feature flag state in the Toggly dashboard

Extension Not Loading​

  • Refresh the page and try again
  • Check that you're signed in to the extension
  • Verify your Toggly account has the necessary permissions

Security Considerations​

  • The extension only captures CSS selectors, not page content
  • All data is stored securely in your Toggly account
  • Edge HTML changes are limited to [data-feature] removal and page-level 404/redirect via the worker
  • No client-side JavaScript is required for those worker transforms
  • Secure Token Management: Authentication tokens are securely invalidated on logout

Token Invalidation​

The Chrome Extension implements secure token invalidation to protect your account:

When you sign out:

  1. Your access token is immediately sent to the Toggly server for invalidation
  2. The token is added to a server-side blacklist
  3. The token cannot be used for any API requests after logout
  4. Local authentication data is completely cleared from the extension

Security benefits:

  • Immediate Protection: Tokens are invalidated instantly, not just locally
  • Shared Device Safety: Safe to use on shared computers - logout ensures complete security
  • Token Theft Protection: Even if a token is intercepted, it cannot be used after you sign out
  • Automatic Cleanup: Blacklisted tokens are automatically removed when they expire naturally
Security Best Practice

Always sign out from the Chrome Extension when you're done working, especially on shared or public computers. This ensures your authentication token is properly invalidated server-side.

Support​

For issues or questions about the Chrome Extension: