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

# Extension

<Tip>
  Be sure to have followed the [dev setup](/dev-setup) before starting to dev on TBAG
</Tip>

Here you'll have all the information you need to be able develop the with the extension

Firstly you'll need to download [Chrome](https://www.google.com/intl/fr/chrome/)

<Info>
  Any other Chrome based browser will work, Firefox is not supported for dev (only for dev, normal user can use it normally) at this time
</Info>

Now in your terminal run this command

```bash theme={null}
bun run watch
```

After running it, you should see Chrome open automatically, that's a good sign, now go to the `Settings` and `Extension` like the screenshot under

<Frame>
  <img src="https://mintcdn.com/leonimust/XJ9IYzgOkKyje8gc/images/chrome-manage-extension.jpg?fit=max&auto=format&n=XJ9IYzgOkKyje8gc&q=85&s=ca88d54dee663907e68e0d0edd9024e7" alt="Chrome Extension" lightAlt="Chrome Extension" darkAlt="Chrome Extension" width="1092" height="1428" data-path="images/chrome-manage-extension.jpg" />
</Frame>

Now enable the `Developer mode`

<Frame>
  <img src="https://mintcdn.com/leonimust/XJ9IYzgOkKyje8gc/images/chrome-enable-devmode.jpg?fit=max&auto=format&n=XJ9IYzgOkKyje8gc&q=85&s=5f6488214d25ba41aa26e183dc80f3c0" alt="Chrome Devmod Extension" width="3024" height="1964" data-path="images/chrome-enable-devmode.jpg" />
</Frame>

And press the `Load unpacked`, navigate to the extension path and select it, when that's done the extension should open you the doc and Teams' website

<Frame>
  <img src="https://mintcdn.com/leonimust/XJ9IYzgOkKyje8gc/images/chrome-load-unpacked-extension.jpg?fit=max&auto=format&n=XJ9IYzgOkKyje8gc&q=85&s=48808f894454aa95f314be1a12352870" alt="Chrome Extension List" width="2102" height="964" data-path="images/chrome-load-unpacked-extension.jpg" />
</Frame>

Now, connect yourself to your Teams account, once that's done open the extension and enable the `Developer Mode`, you can choose to enable or disable the `Auto-reload on build`, which will automatically reload Teams' page when the `watch script` detects a change.

<Frame>
  <img src="https://mintcdn.com/leonimust/XJ9IYzgOkKyje8gc/images/chrome-extension-devmode.jpg?fit=max&auto=format&n=XJ9IYzgOkKyje8gc&q=85&s=f4eab40782b9fe326695a90dbc1a6c95" alt="Extension Open" width="536" height="1286" data-path="images/chrome-extension-devmode.jpg" />
</Frame>

A quick refresh of the page and TBAG should be working.

<Tip>
  Don't forget to install [React DevTools](https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) to work on plugins, it'll be useful when you make React path for your plugins
</Tip>

Go check Plugins and Themes to understand how they work to make your own one

<Card title="Plugins" icon="plug" horizontal href="/plugins">
  Create your own plugins to extend Teams' functionality
</Card>

<Card title="Themes" icon="window-maximize" horizontal href="/themes">
  Create custom CSS themes for Teams
</Card>