> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stably.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Chrome Extensions

> Test Chrome extensions directly in Stably with simple upload, install, and automated testing - no complicated setup required.

<Note>
  This documentation is for **Stably Classic**. For the new Stably Web Editor, see [Stably Web Editor](/stably/stably-web-editor).
</Note>

## Introduction

Traditionally, testing Chrome extensions has been a challenge. Between packaging requirements, browser security restrictions, and setting up custom environments, it's often much more complicated than testing a standard website.

Stably simplifies all of this. With just a few quick steps, you can upload, install, and test Chrome extensions directly in your automated flows — no complicated setup needed.

***

## Uploading

Before you upload your extension, it’s important to package it correctly:

<Steps>
  <Step title="Package the Extension Properly">
    Open the extension's root folder, and select *all* the contents inside (including `manifest.json`). Right-click and select **Compress**, and save the new `.zip` file, we'll need it later.

    > *Tip: Do not compress the parent folder itself — only the files inside it.*

    <Frame>
      <img src="https://mintcdn.com/stablyai/gQcjGEzeMU3Scby6/images/chrome-extensions/select-files-to-compress.png?fit=max&auto=format&n=gQcjGEzeMU3Scby6&q=85&s=12a135492422203892bfdd8b1d3a3335" width="1392" height="800" data-path="images/chrome-extensions/select-files-to-compress.png" />
    </Frame>
  </Step>

  <Step title="Navigate to Stably's Execution Settings">
    Log in to your workspace in [Stably](https://app.stably.ai), and from the sidebar menu, go to **Execution Settings**, and click the **Chrome Extension** tab at the top.

    <Frame>
      <img src="https://mintcdn.com/stablyai/gQcjGEzeMU3Scby6/images/chrome-extensions/chrome-extensions-tab.png?fit=max&auto=format&n=gQcjGEzeMU3Scby6&q=85&s=da8ba9e76ec4fc345e5fbc1d0806b045" width="3248" height="2112" data-path="images/chrome-extensions/chrome-extensions-tab.png" />
    </Frame>
  </Step>

  <Step title="Upload Your Extension">
    Click **+ Add Extension**, and select the packaged `.zip` file you created earlier.

    <Frame>
      <img src="https://mintcdn.com/stablyai/gQcjGEzeMU3Scby6/images/add-extension.png?fit=max&auto=format&n=gQcjGEzeMU3Scby6&q=85&s=3cacdfeb098da8c14db151c57a4c1131" width="3248" height="2112" data-path="images/add-extension.png" />
    </Frame>
  </Step>

  <Step title="Verify and Complete Upload">
    Review the displayed extension information, and when satisfied, click **Upload**. Once the upload is complete, your extension will appear among the others on the same page. If a previous version of the extension already exists, the new upload will be grouped under the same name and versioned accordingly.

    <Frame>
      <img src="https://mintcdn.com/stablyai/gQcjGEzeMU3Scby6/images/chrome-extensions/new-extension.png?fit=max&auto=format&n=gQcjGEzeMU3Scby6&q=85&s=b1a6e330df5dce9851ffb0bd13de91cc" width="3248" height="2112" data-path="images/chrome-extensions/new-extension.png" />
    </Frame>

    <Frame>
      <img src="https://mintcdn.com/stablyai/gQcjGEzeMU3Scby6/images/chrome-extensions/all-extensions.png?fit=max&auto=format&n=gQcjGEzeMU3Scby6&q=85&s=c6c19afe698c58ed1c8ae11e04595b88" width="3248" height="2112" data-path="images/chrome-extensions/all-extensions.png" />
    </Frame>
  </Step>
</Steps>

***

## Using in Tests

Once your extension is uploaded, using it in your tests is easy:

<Steps>
  <Step title="Create a New Test Draft">
    Choose the **Desktop Web** test format when creating a new test.

    <Frame>
      <img src="https://mintcdn.com/stablyai/gQcjGEzeMU3Scby6/images/chrome-extensions/new-test.png?fit=max&auto=format&n=gQcjGEzeMU3Scby6&q=85&s=f54a5623cd4deddfe98695e03dca2fdf" width="3248" height="2112" data-path="images/chrome-extensions/new-test.png" />
    </Frame>
  </Step>

  <Step title="Install the Extension">
    To install the extension onto your virtual browser, select **Install Chrome Extension** from the **Add Step** menu.

    <Frame>
      <img src="https://mintcdn.com/stablyai/gQcjGEzeMU3Scby6/images/chrome-extensions/install-extension.png?fit=max&auto=format&n=gQcjGEzeMU3Scby6&q=85&s=c8775fcef69ce6ba86a571a43b2a7205" width="3248" height="2112" data-path="images/chrome-extensions/install-extension.png" />
    </Frame>
  </Step>

  <Step title="Choose the Extension and Version">
    Pick the Chrome extension and version you want installed on the virtual browser for your test, and click **Install**.

    <Frame>
      <img src="https://mintcdn.com/stablyai/gQcjGEzeMU3Scby6/images/chrome-extensions/choose-version.png?fit=max&auto=format&n=gQcjGEzeMU3Scby6&q=85&s=0197fc782b38c54ad2948123bd5a8a10" width="3248" height="2112" data-path="images/chrome-extensions/choose-version.png" />
    </Frame>
  </Step>

  <Step title="Start Testing!">
    Continue building your test flow as usual. The extension will be available just like in a real Chrome environment.
  </Step>
</Steps>

<Note>
  **Pro Tip:**\
  To quickly verify that the extension is installed, navigate to `chrome://extensions` inside your test, and verify that your extension is listed there.
</Note>
