Feature Flag Chrome Plugin

Chrome Plugin to manage Feature Flags on any supported web app.

🚀 Built with TypeScript + Vite

This extension is now built with modern tooling:

• TypeScript for type safety and better development experience
• Vite for fast builds and hot reloading during development
• Manifest V3 for latest Chrome extension standards

Development Setup

# Install dependencies
npm install

# Development build with watch mode
npm run dev

# Production build
npm run build

# Type checking
npm run type-check

# Package for distribution
npm run package

---

Adding Feature Flag Support to your web app

To enable chrome plugins on your web app you need to register your feature flags from your app code.

To register, call the featureFlagsPluginRegister function on your window object.

function featureFlagsPluginRegister(flags, listener);

Example:

// Somewhere in you app's JS code

// Declare Flags
const flags = [
  {
    key: 'flag.one',
    value: true, // current / initial state of feature flags in you app.
    description: 'First feature description', // Optional
    title: 'First feature', // Optional - If not passed, key will be used.
  },
  {
    key: 'flag.two',
    value: true, // current / initial state of feature flags in you app.
    description: 'Second feature description', // Optional
    title: 'Second feature', // Optional - If not passed, key will be used.
  },
];

// This function will be called whenever a change happens in Chrome extension
function listener(key, value) {
  // Feature flag with key change and update value is in value.

  // Make your changes in your app
  toggleFeatureFlag(key, value);
  updateApp();
}

// Register Feature Flags with plugin
if (window.featureFlagsPluginRegister) {
  window.featureFlagsPluginRegister(flags, listener);
}

Avoiding race conditions

Sometimes your registration code runs before plugin registers featureFlagsPluginRegister. In this case you can expose a setup function registerMyFeatureFlags on window object so that the plugin loads, it will automatically call this function which will register your flags.

featureFlagsPluginRegister function is also passed to your registerMyFeatureFlags which can be used to register the feature flags.

Note: This will only run once the plugin registers with the web page. later on you can still call window.featureFlagsPluginRegister.

Example

window.registerMyFeatureFlags = (register) => {
  register(toggles, (key, value) => {
    console.info(`Toggling ${key} => ${value}`);
    toggleFeatureFlag(key, value);
  });
};

---

Testing Snippet

window.featureFlagsPluginRegister(
  [
    {
      key: 'flag.one',
      value: true,
      description: 'First feature description',
      title: 'First feature',
    },
    {
      key: 'flag.two',
      value: true,
      description: 'Second feature description',
      title: 'Second feature',
    },
  ],
  (key, value) => console.log('KV Received', key, value)
);